在哪里添加aria-modal属性？ [英] where to add the aria-modal attribute?

问题描述

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

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

我知道我需要拥有 aria-modal = true ，但是我不确定100％是否在我有 className 的所有地方都添加了此属性。因此，例如：

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>

是否在所有具有 className aria-modal = true c $ c>？如< Modal> ，< div> ，< ; h2> ？

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

我已经阅读了关于ARIA 1.1的文档，其中说： aria-modal属性用于表示存在模式元素排除了页面上其他内容的使用。，但我不确定如何应用。

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.

推荐答案

aria-modal 属性与 role = dialog

这篇关于在哪里添加aria-modal属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！