React-A11y的React-Bootstrap模态可访问性警告

Question

React-A11y对我的模态大喊大叫“tabIndex”＆＃39;和＆＃39;角色＆＃39;。我的模态看起来像这样：

    <Modal
        aria-label="..."
        tabIndex={-1}
        role="Dialog"
        show={this.state.showInfo}
        onHide={this.closeInfo.bind(this)} >
        <Modal.Header tabIndex={9} role="Dialog" closeButton>
            <Modal.Title tabIndex={-1} role="Dialog">...</Modal.Title>
        </Modal.Header>
        <Modal.Body tabIndex={-1} role="Dialog">
            ...
      </Modal.Body>
    </Modal>

从上面可以看出，我在每个元素中都有tabIndex和角色，但当我查看React插件时，我发现A11y正在向Modal的孩子大喊大叫，我无法访问：

我不允许使用像React-Accessible-Modal这样的其他修改过的Modals。那么有什么方法让我去摆脱这个警告？感谢

Answer 1

顶级元素是正确的。直系儿童div应该有role="document"和否tabIndex。实际上只有你的根元素（对话框）应该有tabIndex="-1"。应删除所有其他角色。

Tabindex会影响制表顺序。如果将其设置为0，那么该元素将能够通过Tab键获得焦点。如果可能，我会避免这种情况。浏览器允许专注于交互元素。考虑将要获得焦点的元素包装在锚点等中。

Tabindex作为肯定是不是没有。完全弄乱了标签顺序。

Tabindex -1实际上很好，但只有当该元素通过js以编程方式接收焦点时

[Element].focus();

因此，您的对话框应该以编程方式获得焦点，并且只允许其余的自然标签顺序。

注意：陷阱焦点在模态中，直到用户关闭模态。然后将焦点返回到模态触发器（锚点或按钮，我更喜欢锚点）