I've implemented a custom dialog using react native paper's dialog component but my screen readers reads the content behind the dialog

Question

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;

score 1 · Accepted Answer · answered May 03 '22 at 20:11

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.

I've implemented a custom dialog using react native paper's dialog component but my screen readers reads the content behind the dialog

1 Answers1

Linked