Keyboard navigation for lists

Accessibility is one of the most important aspects of building apps with a great user experience. The apps should not only be fast and performant but also accessible. While there are a lot of things to consider when it comes to accessibility, in this recipe, we're going to make lists and list items more accessible by providing keyboard navigation for the items. With Angular CDK, it is super simple. We're going to use the ListKeyManager service from Angular to implement keyboard navigation for the users list in our target application.

Getting ready

The project for this recipe resides in chapter09/start_here/using-list-key-manager. Proceed as follows:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, as follows:

Figure 9.5 – The using-list-key-manager app...