C2LC-119: Contents of the connection error modal is not consistently read on VoiceOver

Description

Steps to Reproduce:

1. Open the coding environment with VoiceOver
2. Tab to the Connect to Dash Button and press it
3. Press the cancel button when the list of available devices shows up
4. Close the error modal by pressing the Cancel Connection button on the modal
5. Repeat the steps 2 and 3

Expected Result:

VoiceOver should read the contents of the modal

Actual Result:
VoiceOver does not read the contents of the modal

Notes:
React Bootstrap Modal component has a property called autoFocus, which is setting tabindex of -1 to the modal on show, which will allow contents on the modal to be focusable when it opens. On NVDA screen reader, the modal is properly focused on show and users are able to navigate through the contents with keyboard interaction; however, auto focus seems not working all the time on VoiceOver – seems like it works when page is initially loaded and not after that. When the auto focus is not working, focus remains on previous component (in our case, the button to show the modal), and the contents of the modal is not being read by VoiceOver.

There is an interesting fix to make VoiceOver to read the contents, which is manually setting tabindex of -1 to each div that contains the contents.

Comments

• Daniel Cho commented 2020-01-09T12:36:41.015-0500

  Changes I tried those didn't work:

  • Use Modal component directly on the component instead of using import
  • Add Header, title, and footer like examples on React Bootstrap documentation
  • Remove icon from the modal body
  • Use just text for the contents, not FormattedMessage
  • Put any text contents in a paragraph tag

  I found out that any texts on buttons on the modal is read by VoiceOver

• Daniel Cho commented 2020-01-09T12:42:53.294-0500

  I also found out that autoFocus doesn't work in safari in default setting, cause tabindex gets ignored – interesting stackoverflow question: https://stackoverflow.com/questions/1848390/safari-ignoring-tabindex

• Daniel Cho commented 2020-01-09T14:11:33.403-0500

  including tabindex='-1' on each div in the modal seems working all the time

• Simon Bates commented 2020-01-21T14:51:56.382-0500

  This component looks like it's worth investigating:

  https://github.com/davidtheclark/react-aria-modal

• Simon Bates commented 2020-01-21T14:53:36.969-0500

  We're on the latest react-bootstrap, but could try the current master branch, in case anything has changed.

• Simon Bates commented 2020-01-21T14:54:25.115-0500

  We could also upgrade our react dependency. We're on 16.9.0 and latest release is 16.12.0.

• Daniel Cho commented 2020-01-21T16:39:31.788-0500

  VoiceOver is working fine on commits in branch C2LC-124, https://github.com/chosww/c2lc-coding-environment/commit/54d64078eed2e10cd0238c3b4da4af86d760644b

• Daniel Cho commented 2020-01-22T09:07:06.753-0500

  Even when I remove tabindex = -1 that we set for divs on the modal from the current main repo's master branch, it works fine, I am not sure why it's working now, but it's a good news?

• Simon Bates commented 2020-01-22T14:08:56.521-0500

  I'll remove the tabindex="-1" on the dialog contents on master and we can try against https://c2lc-dev.web.app/

• Simon Bates commented 2020-01-28T16:42:01.074-0500

  I've removed the tabindex="-1" from the dialog contents on master.

  Daniel, could you test against https://c2lc-dev.web.app/ please?

• Daniel Cho commented 2020-02-13T14:23:28.072-0500

  I've tested on VoiceOver and now it's speaking out the content on the modal.