Accessible Lists Made Easy Using the Angular CDK Listbox Module

Although we get most of the functionality from Angular CDK, we need to write quite a bit of code to build accessible lists. One of my previous articles discusses it in more detail:

Accessibility Made Easy with Angular CDK

Fortunately, starting from version 14.2.0, this is made seamless by the Angular CDK. A new module named @angular/cdk/listbox provides directives to help create accessible custom list boxes.

To use it, we need to import the CdkListboxModule, which provides two directives — cdkListbox and cdkOption:

These two directives give us all the expected behavior for an accessible experience, such as bidi layout support and keyboard interaction. In addition, all directives apply their associated ARIA roles to their host elements.

There is also support for Angular forms, disabling options, custom styles, orientation, options typehead, multiple selects, and more!

Each feature has an example in the official repository:

components/src/components-examples/cdk/listbox at main · angular/components

And the official docs:

components/listbox.md at main · angular/components

Follow me on Medium or Twitter to read more about Angular and JS!