[a11y]: Modal is not providing content or expected behaviour for screen reader user

[mbgower]

Package

@carbon/react

Browser

Chrome, Safari

Operating System

Windows, MacOS

Package version

storybook

React version

https://react.carbondesignsystem.com/?path=/story/components-modal--default

Automated testing tool and ruleset

n/a

Assistive technology

JAWS

Description

Likely related to the focus discussions mentioned in the other issue #12727 I've opened against the modal dialog, I'm seeing odd behaviour with JAWS when trying to interact.

For passive modal, focus not place in dialog; text not announced

In addition to the issue with focus not being visually placed on the closed button, as described elsewhere, JAWS is saying nothing when the passive dialog is launched. If I press Tab once, I hear "focus sentinel button". After I tab a second time, the focus goes to the actual X control and I hear "Close button". However, the text "You have been successfully signed out" is not announced (which should have been the aria-label value).

As well, the focus is not actually trapped within the dialog. I have the ability to press Tab again and reach the focus sentinel button. Sometimes repeated pressing Tab will cycle between these. Others, the tab focus exits right out of the modal into the browser chrome. Neither should happen.

The expected behaviour here is that the focus will land on the X and JAWS will announce it's a dialog and also give read the text "You have successfully been signed out"

WCAG 2.1 Violation

Focus Order; Name, Role, Value; Info & Relationships

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-modal--default

Steps to reproduce

1. Launch a windows system or a Windows VM.
2. Start JAWS
3. Open a browser window and go to https://react.carbondesignsystem.com/?path=/story/components-modal--default
   I recommend opening the storybook in a new window
4. Jaws says nothing. Observe that the focus is not on the X as expected
5. Press tab. Jaws says Focus Sentinel button
6. Press tab again. The focus appears on the X. Jaws says Close button
   The text "You have been successfully signed out" is not read

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

This is partly fixed by #14156

Additionally, the focus wrap not working is a defect with firefox - with the close button being the only focusable element within the DOM, it's focused the second time you hit tab, but firefox has a bug where when the same element is focused a second time it moves focus outside the browser window and onto the browser chrome. I can't find a way around this atm, but it's very possible it would be solved by moving the modal to use the native dialog element that includes the focustrap behavior by default. #13807