Improve dialogs a11y (#3094)
* Improve a11y on ios * Format * Remove android * Fix android
This commit is contained in:
parent
ebd279ed68
commit
6c9d6f5b05
4 changed files with 91 additions and 54 deletions
|
@ -30,6 +30,7 @@ import {useCloseAnyActiveElement} from '#/state/util'
|
|||
import * as notifications from 'lib/notifications/notifications'
|
||||
import {Outlet as PortalOutlet} from '#/components/Portal'
|
||||
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
|
||||
import {useDialogStateContext} from '#/state/dialogs'
|
||||
|
||||
function ShellInner() {
|
||||
const isDrawerOpen = useIsDrawerOpen()
|
||||
|
@ -55,6 +56,7 @@ function ShellInner() {
|
|||
const closeAnyActiveElement = useCloseAnyActiveElement()
|
||||
// start undefined
|
||||
const currentAccountDid = React.useRef<string | undefined>(undefined)
|
||||
const {openDialogs} = useDialogStateContext()
|
||||
|
||||
React.useEffect(() => {
|
||||
let listener = {remove() {}}
|
||||
|
@ -78,9 +80,21 @@ function ShellInner() {
|
|||
}
|
||||
}, [currentAccount])
|
||||
|
||||
/**
|
||||
* The counterpart to `accessibilityViewIsModal` for Android. This property
|
||||
* applies to the parent of all non-modal views, and prevents TalkBack from
|
||||
* navigating within content beneath an open dialog.
|
||||
*
|
||||
* @see https://reactnative.dev/docs/accessibility#importantforaccessibility-android
|
||||
*/
|
||||
const importantForAccessibility =
|
||||
openDialogs.length > 0 ? 'no-hide-descendants' : undefined
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={containerPadding}>
|
||||
<View
|
||||
style={containerPadding}
|
||||
importantForAccessibility={importantForAccessibility}>
|
||||
<ErrorBoundary>
|
||||
<Drawer
|
||||
renderDrawerContent={renderDrawerContent}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue