Accessibility improvement for listbox

[haxxmaxx]

• <svg> tags are decorative and provide no information to users. This applies to all icons in selection toolbar

  • Give these tags aria-hidden="true" attributes.

• Items in more menu are not marked up as buttons

  • Should be converted to <button> or have role="button"

• More menu uses ARIA menu roles, which are only intended for desktop-style application menus. Improper use of these roles often prevents screen reader users from accessing the expanded content.

  • Remove the ARIA menu roles from this menu, including role="menu", role="menuitem", and role="menubar"
    

• More menu items lack focus indicator when they receive focus

  • A focus indicator should always be visible, and have sufficient contrast. It is best to intentionally style the focus indicator for all links, buttons, fields, etc. We encourage you to change the shape somehow (add a border, box, underline, etc.) as well as choose a color that has sufficient contrast, and test each element with the tab key to make sure a focus indicator is always visible for each focusable element.

• The open more meny button control expandable content, but this is not indicated to screen reader users.

  • Add an aria-controls attribute to the elements that control the expandable content and set the values of those attributes to equal the ids of the tags that wrap the expanded content. Also add an aria-expanded="true" attribute to those same control elements when content is expanded, and aria-expanded="false" otherwise.

• The search field is not labeled

  • All form fields should have (visible) labels (typically via a <label> tag) which are properly associated with their field (via the for attribute).

• Buttons are not labeled correctly

  • Add screen reader only text or an aria-label attribute to each of these buttons which tells users where they go and/or what they do. These are labeled with title attributes, but this is not sufficient for these labels to be ready consistently across various browser and screen reader combinations.