The listbox below is composed of list items containing BUTTON elements

Changes

  1. Added aria-expanded and aria-controls to the primary button. aria-expanded must be toggled accordingly to convey the correct state
    2. .
  2. Added ID and role="listbox" to the UL to reclass it as a Listbox container.
  3. Added role="presentation" to all LI elements to remove them from the accessibility tree.
  4. Added role="option" to all of the focusable button elements within the Listbox to reclass them as Listbox Option nodes, plus tabindex to give only one tabstop for the Listbox which will require scripting to dynamically set tabindex="0" on the correct node to set focus to when using the arrow keys, and setting all others to "-1" to remove them from the tab order.
  5. Added aria-checked to all role="option" nodes to convey the correct checked state when checking multiple filter options at the same time, if this is a feature for the widget.
  6. Added aria-label to the UL tag to give the Listbox an explicit label.
  7. Added aria-selected to all role="option" elements to convey which Option node is currently selected as being focusable. aria-selected="true" in this case matches the element that includes tabindex="0", and all other role="option" elements include aria-selected="false".

Scripting Behaviors

  1. When the primary button with aria-expanded is activated and the Listbox appears, aria-expanded must be set to "true" to convey this, and focus must be set on the role="option" element that includes tabindex="0".
  2. Once focus is within the Listbox, the arrow keys must move focus between each role="option" element by toggling tabindex="0" and tabindex="-1" appropriately before moving focus. The aria-selected attribute must be set to "true" on the Option node that includes tabindex="0", and all others must be set to "false" to match tabindex="-1".
  3. When the Spacebar is pressed and when using onClick() on a role="option" element, the aria-checked attribute must be toggled appropriately to convey the checked state of the Option node.
  4. When pressing Escape, the Listbox must be closed without saving any values and focus set back to the primary button element as before.
  5. When pressing Enter, the checked Option values should be saved and the Listbox must be closed and focus set back to the primary button element as before.
  6. When pressing Tab or Shift+Tab while focus is on the Listbox, it should be closed, and it should either save or ignore the currently checked Options as appropriate for the UI.
  7. When the Listbox is closed, the primary button's aria-expanded attribute value must be set to "false".