/adg-components

Primary LanguageTypeScript

ADG Combobox: a searchable single/multi select dropdown

An initiative of the «Accessibility Developer Guide» community to provide a truly accessible reusable select dropdown with the following features:

  • It is searchable 🔍
  • It handles both ✅ single and ✅✅✅ multi selection
  • Options can be loaded async 🧩
  • It is 100% accessible ♿️, based on WCAG 2.1

It is based on HTML form controls, with which we prove that accessibility is simple by relying on rock-solid browser standard behaviour, instead of reinventing the wheel with the (up to this day) fragmentarily supported ARIA Standard.

Usage

<script type="module" src="/build/adg-components.esm.js"></script>
<script nomodule src="/build/adg-components.js"></script>

<adg-combobox id="hobbiesCombobox" name='hobbies' label='Hobbies'></adg-combobox>

<script>
  const hobbiesCombobox = document.querySelector('#hobbiesCombobox');
  hobbiesCombobox.formControlName = 'hobbies';
  hobbiesCombobox.filterLabel = 'Hobbies';
  hobbiesCombobox.options = [
    'Soccer',
    'Badminton',
    'Movies',
    'Gardening',
    'Kickboxing',
  ];
</script>

Development

Our components are based on Stencil.

  • $ cd path/to/adg-components
  • $ npm i to install dependencies
  • $ npm run start starts a local server on http://localhost:3333/ (with hot reload)

Automated tests

Our components are thoroughly tested using Playwright.

  • Make sure your local server is running
  • $ npm run test:run for headless
  • $ npm run test:gui to see the magic happen!

See <playwright.config.ts> for further configuration.

Involved parties