Evaluate use of `listbox` and keyboard navigation of customize columns tearsheet

[elycheea]

Reported by @kristastarr in the Datagrid customize columns review from the accessibility audit.

Note that these were flagged as potential violations and recommendations.

Confirm the <ol> <listbox> has keyboard access and focus indicator - When the find column search bar has focus, and you press tab, there is a tab stop that I think is the select all checkbox, but has no focus indicator so is not clear. You reach the checkbox after you press tab again which does have a correct focus indicator.

Looks like the whole listbox has tab access but no focus indicator. This may be to support navigation in the modal via keyboard if the column list becomes long enough to require scrolling.

Also while the <ol> does use an aria-label, we can probably use aria-labelledby with the tearsheet title in this case.

• Verify the <ol> element with "listbox" role has keyboard access
• Check the keyboard focus indicator is visible when using CSS declaration for border or outline
• The input element does not have an associated visible label
• Component with listbox role has more than one tabbable element
• For the
• s - the element with the role “option” contains implicit roles “checkbox” which are ignored by browsers
• The element with role "listbox" owns the child element with the role "checkbox" that is not one of the allowed role(s): "option"
• The element with role "listbox" owns the child element with the role "status" that is not one of the allowed role(s): "option"

The customize columns tearsheet contains both arrow keys and tabbable checkboxes for selecting which columns to display. It seems this may not be appropriate for the role listbox.

From Equal Access:

Why is this important?

Unlike native HTML form elements, browsers do not provide keyboard support for graphical user interface (GUI) components that are made accessible with ARIA. Authors need to implement keyboard access using keyboard handlers, such as onkeydown or onkeypress.

Element location

<ol
   tabindex="0"
   aria-describedby="c4p--datagrid__customize-columns--instructions"
   aria-label="Customize columns"
   role="listbox"
   class="c4p--datagrid__customize-columns-column-list--focus">

All focus indicators should be visible and distinguishable. When navigating a Web page with a keyboard, users need to know which element has the keyboard focus. A visual focus indicator might be a vertical bar (a typical cursor) or a visible border surrounding a user interface control.

[elycheea]

At a quick glance, we may need to restructure the HTML a bit so that the listbox only contains the list items themselves and not also the divs and spans. Use of checkboxes within the listbox options also seems invalid.