C2LC-112: ARIA hidden element must not contain focusable elements

Description

The axe testing tool found this issue: “ARIA hidden element must not contain focusable elements” when “Something went wrong” dialog box is displayed

Steps to reproduce:

• Load the Coding Environment
• Click Connect to Dash
• Click Cancel on the Bluetooth chooser dialog box
• The “Something went wrong” dialog box is displayed
• Run axe

Impact: Serious

https://dequeuniversity.com/rules/axe/3.4/aria-hidden-focus?application=AxeChrome

Notes:

• It looks like the Modal that we are using from react-bootstrap is adding a focus listener to ‘document’ which redirects focus back to the Modal, rather than taking other things out of the focus order:
• https://github.com/react-bootstrap/react-overlays/blob/3735169669cb0f53b9a3d616cc13e0604c16eb06/src/Modal.js#L268-L295
• https://github.com/react-bootstrap/react-overlays/blob/3735169669cb0f53b9a3d616cc13e0604c16eb06/src/Modal.js#L361-L371
• I wonder if this is a reasonable alternative? Or if we should remove things from the focus order? Either by setting tabindex=-1, disabling, or by removing completely.

Comments

• Daniel Cho commented 2020-01-03T16:12:52.691-0500

  I was able to apply disabled property to all buttons other than the ones on the error modal, and the axe testing is passing except the ones on the modal. I tried to make the retry button and the cancel button on the modal disabled when we are not showing the error modal, but that did not fix the issue from axe. I also tried conditional rendering of the modal from App.js; and this did not fix since modal component has aria-hidden property set to true. The changes I made are in my git branch C2LC-112.

• Daniel Cho commented 2020-01-22T09:55:51.227-0500

  There's a problem with disabling command pallet command buttons and the connect button when the deleteAllModal shows up. State to show the modal lives in ProgramBlockEditor.js and need a way to communicate its state with App.js, in order to apply disabled property to the command buttons.

• Michelle D'Souza commented 2021-10-07T14:15:02.270-0400

  We aren't sure if this is an issue still. We should check into this when making our new dialog component

• Tony Atkins [RtF] commented 2021-11-25T10:01:57.834-0500

  This was fixed with C2LC-499.