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;

CodePudding user response：

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:

• set aria-hidden to "true"
• unhide the dialog

<!-- 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.