我已经使用 react native paper 的对话框组件实现了一个自定义对话框，但我的屏幕阅读器读取了对话框背后的内容

Question

我想知道在 CustomDialog 可见时，有什么方法可以防止屏幕读取访问不在 CustomDialog 组件中的元素吗？我假设 react-native-paper 的对话框组件会处理这个问题，但似乎当我滑动屏幕时 reader，它会转到我的对话框后面的元素。我的组件如下所示：

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;

Answer 1

我不是 React 用户，但如果对话框和主页可以是 DOM 中的“兄弟姐妹”，那么在显示对话框时“隐藏”背景页面的一般概念很容易实现.然后你可以在显示对话框时将 aria-hidden 添加到主页，但 确保对话框不是主页 的 child 因为 aria-hidden 将隐藏所有 children.

对话框显示前，DOM大致为：

<!-- main page -->
<main>
  stuff
</main>

<!-- dialog -->
<div role="dialog" style="display:none">
  stuff
</div>

当对话框显示时：

将 aria-hidden 设置为“真”
取消隐藏对话框

<!-- main page -->
<main aria-hidden="true">
  stuff
</main>

<!-- dialog -->
<div role="dialog" style="display:block">
  stuff
</div>

当对话框关闭时，您可以从 <main> 中删除 aria-hidden 属性或将其设置为“false”。删除属性是首选方法。

w3.org 的“dialog design pattern”中有更多关于各种 ARIA 属性和键盘支持的有用信息。

我已经使用 react native paper 的对话框组件实现了一个自定义对话框，但我的屏幕阅读器读取了对话框背后的内容

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

javascript

accessibility

reactjs

react-native

react-native-paper