VoiceOver not pronouncing Modal Title [Accessibility]

[rupeshpadhye]

I ran voice over on modal and noticed its not pronouncing title. I also tried passing aria-labelledby as prop but results were not as desired .

Here is loom video on
https://www.loom.com/share/afcdab781e044fe28e4285f0a7afb10e

[elizabetdev]

@rupeshpadhye the issue is that the example you're running with the voice-over has initialFocus="[name=popswitch]". So the voice over reads first the switch. Then if you navigate inside the modal you'll be able to listen to the rest of the content.

But if you want to assure the voice-over reads the title when initialFocus="[name=popswitch]". You can improve the code to:

<EuiOverlayMask>
  <EuiModal
    onClose={closeModal}
    initialFocus="[name=popswitch]"
    aria-labelledby="modal_title"
  >
    <EuiModalHeader>
      <EuiModalHeaderTitle>
        <h2 id="modal_title">My Modal title</h2>
      </EuiModalHeaderTitle>
    </EuiModalHeader>

    <EuiModalBody>{formSample}</EuiModalBody>

    <EuiModalFooter>
      <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>

      <EuiButton onClick={closeModal} fill>
        Save
      </EuiButton>
    </EuiModalFooter>
  </EuiModal>
</EuiOverlayMask>;

So the voice-over will read the switch and title:

@cchaos should we update the docs examples to ensure the best a11y practices?

[rupeshpadhye]

@miukimiu thanks for quick reply.
I think EuiModal missing attribute role="dialog". Defiantly we can pass as property to EuiModal and that will work as added screen shot . but it will be great if component does this out of box

[myasonik]

#3889 is tracking several a11y improvements that need to be made to modals, adding role=dialog is one of them!

Going to close this as a duplicate in favor of the existing ticket.

Thanks!