xref: https://github.com/github/accessibility-audits/issues/4054
xref: https://github.com/github/accessibility-audits/issues/4067
xref: https://github.com/github/accessibility-audits/issues/4056

Description

This PR is to solve a couple accessibility issues. 1) The list items in the cloning dialog were not properly highlighted, and the 2) list was not tab navigable too. I thought the two were closely related so worked them together.. turns out they are not, but small enough to have in one PR.

1. Bit gnarly issue: The list item selected row blue highlight css is applied when the focus container encapsulating the list applies the focusing classes. However, the focusin events on the list were not being registered. This was because the focus trap from the repository foldout was stoping the propagation of focus events if something outside of the focus trap originated it -> a dialog. This actually presented in any dialog that depended on the focusin event given an app foldout was open; it is just evident here because you open the clone dialog from the open repository fold out.
   • Solution: Disable the focus trap in app foldouts whenever a dialog is open. The dialog uses the dialog built in focus management; thus, it is not a focus trap on a focus trap.
2. Pretty straightforward, [-1] is not a valid value for the selectedRows property in the List component.
   • Solution: In the filter list component, pass an empty array if the selectedRow property is -1. Also, add a non fatal error to alert us of this issue in the future as it is not an obvious regression unless you typically navigate to the list with keyboard.

Other solutions discussed:

• Use react context similar to our dialog isTopMost to pass the enableFocusTrap state down to toolbars whereever they are in the app hierarchy. Decided against since they were not far down the hierarchy, only 3 app toolbars, and these toolbars don't change often unlike dialogs where we may add future dialogs more frequently.

Screenshots

Shows hitting tab from the filter input to the refresh button to the list and then using the up/down arrows to select items. The items are properly highlighted now.

Release notes

Notes: [Fixed] The list in the "Clone a Repository" dialog is keyboard navigable to.
[Fixed] The selected list items in the "Clone a Repository" dialog are highlighted like other lists with proper contrast.