Software Engineering

Accessibility in Angular–Good Practices and Pitfalls

5 case studies on keyboard listeners

Photo by Sigmund on Unsplash.

As developers, we love to use the keyboard in our daily coding life. It makes things easier and quicker to perform than using the mouse. Yet we are not alone in this love; many end-users of the applications we’re implementing love to do it too. Designing an app to be more accessible generally improves the user experience. The only problem here is that knowing how to use the keyboard is much simpler for us than knowing how to implement a feature accessible by pressing some keys from the keyboard.

Whenever you add an event listener to your code, you should do it in an optimized way to avoid sucking performance from users’ browsers or flatten their little phone batteries.

In today’s article, I will focus on reacting to users via keyboard events or shortcuts. I will take five real-life examples of handling keyboard listeners in an Angular app. Let’s get started.

Case Study 1

Let’s say you have an input field in your component and you want to open a dialog when the user presses F2. You can do it in two ways.

Option 1