Accessible listbox interactions using CDK Listbox directives

Accessibility is one of the key aspects to focus on when you’re thinking about your end users using your applications. One of the major use cases for the users is to make a selection in apps, whether that’s selecting the color or size of a product or selecting multiple labels for a post. It makes it such a good experience if the experience is accessible. In this recipe, we’re going to replace a color selection feature for products with an accessible alternative using the Angular CDK Listbox APIs.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-listbox inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-listbox
   

   This should open the app in a new browser tab,...