Bug 282773 – AX: <dialog /> aria-describedby attribute is not read by VoiceOver

• Status: NEW
• Component: Accessibility

[Ildar]

Created attachment 473170 [details]
Demo

Hi

I am using <dialog> element that has both `aria-labelledby` and `aria-describedby` attributes pointing to existing elements in the DOM. However, when the dialog is open, VoiceOver reads only header label but ignores the description.
Find demo attached.

Minimal HTML:

```
<dialog
  id="modal-dialog-2"
  role="dialog"
  tabindex="-1"
  aria-modal="true"
  aria-labelledby="modal-header-2"
  aria-describedby="modal-description-2"
  class="sc-hqyNC hrYsWQ"
  ><div aria-hidden="true" class="Box-sc-18eybku-0 jGGjJW"></div>
  <div width="1,700px" role="document" class="Box-sc-18eybku-0 fxzjpf">
    <div class="Box-sc-18eybku-0 hDEZsr">
      <div
        color="label,label"
        id="modal-header-2"
        display="flex"
        class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 bSsGUH"
      >
        <h2
          color="title,title"
          id="modal-header-2"
          class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 cWEmcU"
        >
          Edit Countries or Regions
        </h2>
        <div class="Box-sc-18eybku-0 iQrLAn">
          <p color="label,label" class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 khwgeX">
            Select<button
              color="#0070C9"
              cursor="pointer"
              role="button"
              class="Box-sc-18eybku-0 Link-sc-1tc8rtf-0 BAdOS"
            >
              All</button
            ><span color="keyline" class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 flQIly">|</span
            ><button
              color="ctrlDisabled"
              cursor="default"
              role="button"
              disabled=""
              class="Box-sc-18eybku-0 Link-sc-1tc8rtf-0 jfkvNS"
            >
              None
            </button>
          </p>
        </div>
      </div>
      <div height="550px" overflow="auto" class="Box-sc-18eybku-0 ffCiMG sc-frDJqD fIRRAG">
        <div id="modal-description-2" class="Box-sc-18eybku-0 bGSxvu">
          <p color="label,label" class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 ciaIxa">
            Select which countries or regions you want to make pre-order changes to.
          </p>
        </div>
        <div class="Box-sc-18eybku-0 bGSxvu">
          <div overflow="auto" class="Box-sc-18eybku-0 bKGniX">
          </div>
        </div>
      </div>
    </div>
    <div class="Box-sc-18eybku-0 fcEFHH">
      <div display="flex" class="Box-sc-18eybku-0 bGMpio">
        <div display="flex" class="Box-sc-18eybku-0 bHoFio"></div>
        <div display="flex" class="Box-sc-18eybku-0 gFeMUa">
          <button
            cursor="pointer"
            display="inline-block"
            color="#0070C9"
            type="button"
            class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 base__InteractiveText-sc-cmy001-0 iWATDU"
          >
            Cancel</button
          ><button
            cursor="default"
            display="inline-block"
            color="#FFFFFF"
            type="button"
            disabled=""
            class="Box-sc-18eybku-0 Text__BaseText-sc-4nqr4q-0 Text-sc-4nqr4q-1 base__InteractiveText-sc-cmy001-0 jimoTy sc-uJMKN MOFpc"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  </div></dialog
>
```

[Radar WebKit Bug Importer]

<rdar://problem/139460932>