Before: Quest for date picker

• ETH Zürich re-implementing many of their websites and
  web apps
  • Need to be fully accessible (keyboard, mobile / desktop
    screen readers)
• Date picker libraries tested: 23
  • Main criterion: accessible, plus some Vue-specific
  • Accessible: ~7
    • Some rely on jQuery, Bootstrap...
    • Some not in usable shape (maintenance,
      configurability)
    • Winner: Duet Design System Date Picker
      • https://duetds.github.io/date-picker/

Quest for searchable multi select

• Hard criteria:
  • All-in-one: single and multi select
  • Searchable
  • AJAX
• Libraries tested: 25
  • Main criterion: accessible, plus some Vue-specific
  • Accessible: ~5
    • Some rely on jQuery, Bootstrap...
    • Some not in usable shape (maintenance,
      configurability)
    • None offering all hard criteria features

• Within a few weeks, please
• Based on the ADG's autosuggest
   
• But: what is special
  regarding ADG's
  widgets?
• Why do they accomplish
  great accessibility, while
  most others don't?

Current state

• Proof of concept → Josua and Xaver
  • https://github.com/NothingAG/accessible-dropdown
  • Tested by Gianfranco and Petra (A4A)
• Widget implementation
  • https://github.com/NothingAG/adg-widgets
  • As web component → Wayne
    • No shadow DOM
      • Easier to customise CSS, forms support
    • Using Stenciljs
      • Backwards compatibility down to IE 11

Todos

• Single select feature → Wayne (?)
• AJAX → Wayne (?)
• Custom events → Wayne (?)
• Multi-lang (and other configs) → Jürgen
• Automated testing → Ramon
   
• Name?
  • Repo: Widget vs. component
  • Widget: Select vs. dropdown vs. combobox vs. ...
• Integrate into ADG
  • Replace existing autosuggest widget