Me pregunto si hay alguna forma de evitar que la lectura de la pantalla acceda a elementos que no están en los componentes CustomDialog mientras CustomDialog está visible. Asumí que el componente de diálogo de react-native-paper se encargaría de eso, pero parece que cuando deslizo el lector de pantalla, va a los elementos detrás de mi diálogo. Mi componente se ve así:
ComponentePersonalizado.tsx
type Props = { title: string; body: string; primaryAction: string; secondaryAction: string visible: boolean; dismissable?: boolean; onPrimaryAction: () => void; onSecondaryAction: () => void; onDismiss: () => void; }; const CustomDialog: FunctionComponent<Props> = ({ title, body, primaryAction, secondaryAction, visible, dismissable = true, onPrimaryAction, onSecondaryAction onDismiss, }) => { return ( <Portal> <Dialog style={styles.dialog} visible={visible} dismissable={dismissable} onDismiss={onDismiss}> <Dialog.Title> <HeaderText variant="h3">{title}</HeaderText> </Dialog.Title> <Dialog.Content> <BodyText variant="b1">{body}</BodyText> </Dialog.Content> <Dialog.Actions> <PrimaryButton wide style={styles.primaryAction} title={primaryAction} onPress={onPrimaryAction} /> <PrimaryButton variant="tertiary" wide title={secondaryAction} onPress={onSecondaryAction} /> </Dialog.Actions> </Dialog> </Portal> ); }; export default CustomDialog;No soy un usuario de React, pero el concepto general de "ocultar" la página de fondo cuando se muestra un cuadro de diálogo se realiza fácilmente si el cuadro de diálogo y la página principal pueden ser "hermanos" en el DOM. Luego, puede agregar aria-hidden a la página principal cuando se muestra el cuadro de diálogo, pero asegúrese de que el cuadro de diálogo no sea un elemento secundario de la página principal porque aria-hidden ocultará todos los elementos secundarios.
Antes de que se muestre el cuadro de diálogo, el DOM es aproximadamente:
<!-- main page --> <main> stuff </main> <!-- dialog --> <div role="dialog" style="display:none"> stuff </div>Cuando se muestra el cuadro de diálogo:
aria-hidden en "verdadero" <!-- main page --> <main aria-hidden="true"> stuff </main> <!-- dialog --> <div role="dialog" style="display:block"> stuff </div> Cuando se cierra el cuadro de diálogo, puede eliminar el atributo aria-hidden de <main> o configurarlo como "falso". Eliminar el atributo es la forma preferida.
Hay más buena información sobre el " patrón de diseño de diálogo " de w3.org con respecto a varios atributos ARIA y compatibilidad con el teclado.