Skip to content

Instantly share code, notes, and snippets.

@corinagum

corinagum/dialogFilter.md

Last active March 11, 2020 20:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save corinagum/7c74fb84be6c050b6ff52f540bcde1ff to your computer and use it in GitHub Desktop.
Save corinagum/7c74fb84be6c050b6ff52f540bcde1ff to your computer and use it in GitHub Desktop.
Download ZIP
Dialog filter a11y notes
Raw
dialogFilter.md

Accessibility for Dialog Filter (combobox)

Related issues: A11y Filter Dialog

Current code (ProjectTree/index.tsx): Annotation 2020-03-11 111244

Fabric:

Combobox design pattern:

Combobox overview:

  • Two parts: single line textbox & pop-up element for users to set the value
  • Differs from a listbox; the value of combox is shown in an editable field (allows copy/pasting)
  • Graphical button is optional (per our spec, we want the button)

UX features:

  • Arrow keys allow for navigation between partial matches in the pop-up element
  • Enter selects value if autocomplete is enabled
  • Escape closes the popup, and/or clears the textbox

ARIA:

  • aria-haspopup (Container): "listbox" will set behavior to have a popup of suggested values
  • aria-expanded (Container): true/false indicates whether the listbox is displayed or not
  • aria-autocomplete="both" (Textbox): will show autocomplete in input and suggest list of possible values in popup
  • aria-activedescendant (Textbox): (id ref) indicates which option has focus
  • option (Listbox): all children of the listbox
  • aria-selected (Listbox): indicates which option is highlighted

JS Tutorial with working examples:

Emulator example:

em-combobox

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment