I am wondering is there any way to prevent the screen reading from accessing elements that are not in the CustomDialog components while the CustomDialog is visible? I assumed react-native-paper's dialog component would take care of that but it seems that when I swipe the screen reader, it goes to the elements behind my dialog. My component looks like this:
CustomComponent.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;
I'm not a React user but the general concept of "hiding" the background page when a dialog is displayed is easily done if the dialog and the main page can be "siblings" in the DOM. Then you can add aria-hidden to the main page when the dialog is displayed but make sure the dialog is not a child of the main page because aria-hidden will hide all children.
Before the dialog is displayed, the DOM is roughly:
<!-- main page -->
<main>
stuff
</main>
<!-- dialog -->
<div role="dialog" style="display:none">
stuff
</div>
When the dialog is displayed:
aria-hidden to "true"<!-- main page -->
<main aria-hidden="true">
stuff
</main>
<!-- dialog -->
<div role="dialog" style="display:block">
stuff
</div>
When the dialog is closed, you can either delete the aria-hidden attribute from the <main> or set it to "false". Removing the attribute is the preferred way.
There's more good info on the "dialog design pattern" from w3.org regarding various ARIA attributes and keyboard support.