where to add the aria-modal attribute?

问题

So I have a project in React where the modal does not have the proper markup.

I know I need to have aria-modal="true", but I am not 100% sure if this attribute is added everywhere I have a className. So for example:

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>

Do I add aria-modal="true" in all the elements with a className? Such as <Modal>, <div>, <h2>?

I have read the documentation on ARIA 1.1 that says "The aria-modal attribute is used to indicate that the presence of a "modal" element precludes usage of other content on the page.", but I am not sure how to apply it.

回答1:

The aria-modal attribute goes on the same element as the role=dialog

来源：https://stackoverflow.com/questions/51600621/where-to-add-the-aria-modal-attribute