C2LC-169: Different component libraries' modal component behaves differently on ChromeVox

Metadata

Source
C2LC-169
Type
Bug
Priority
N/A
Status
Won't Fix
Resolution
N/A
Assignee
N/A
Reporter
Created
2020-02-13T15:47:13.236-0500
Updated
2024-05-01T10:19:03.622-0400
Versions
N/A
Fixed Versions
N/A
Component
N/A

Description

Behaviour of ChromeVox:

  • On React-Bootstrap Modal: Content on the modal component is not spoken by ChromeVox. Role of the modal wrapper is set to dialog and has aria-modal property set to "true"
  • On React-modal: Content on the modal component is spoken by ChromeVox after a long information about the page. Role of the modal wrapper is set to nothing, but the modal box's role is set to dialog without aria-modal property
  • On Material-ui: Content on the modal component is spoken by ChromeVox right away. Role of the modal is set to presentation, with aria-labelledby set to the id of the modal's heading and aria-describedby set to the id of the modal's main content
  • What's suggested on w3 (https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/alertdialog.html): use role of alertDialog with aria-labelledby and aria-describedby

Comments

  • Simon Bates commented 2024-05-01T10:18:54.909-0400

    We implemented our own modal component. Closing.