在哪里添加 aria-modal 属性？

Question

所以我在 React 中有一个项目，其中模式没有正确的标记。

我知道我需要 aria-modal="true"，但我不能 100% 确定是否在我有 className 的任何地方都添加了此属性。例如：

renderModal() {
    return (
      <Modal
        isOpen={this.props.isOpen}
        onRequestClose={this.toggleModal}
        contentLabel="Address Book"
        className={this.props.parentClassName ? 
            this.props.parentClassName + " address-modal" :
            "address-modal"}
        role="dialog"
      >
        {this.renderAddressForm()}
      </Modal>
    );
  }

  renderAddressForm(){
    return(
      <div className={this.props.parentClassName ? "form-"+this.props.parentClassName : null}>
        <h2 className="modal-title">{this.props.title}</h2>

是否要在所有带有 className 的元素中添加 aria-modal="true"？比如<Modal>,<div>,<h2>?

我已阅读有关 ARIA 1.1 的文档，其中提到 "The aria-modal attribute is used to indicate that the presence of a "模态“元素排除了页面上其他内容的使用。”，但我不确定如何应用它。

Answer 1

aria-modal 属性与 role=dialog

在同一元素上

在哪里添加 aria-modal 属性？

where to add the aria-modal attribute?

accessibility

wai-aria

reactjs