在哪里添加 aria-modal 属性?

IT技术 reactjs accessibility wai-aria
2021-05-13 06:11:15

所以我在 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>

我是否aria-modal="true"使用 a添加所有元素className比如<Modal>, <div>, <h2>?

我已经阅读了 ARIA 1.1 上的文档,上面写着“aria-modal 属性用于指示“modal”元素的存在阻止了页面上其他内容的使用。”,但我不确定如何应用它。

1个回答

aria-modal属性与role=dialog