Is my approach to handling arrow key side-panel toggling best practice?

I'm developing an Angular application with a side panel (drawer) that can be expanded or collapsed using the left and right arrow keys. However, I want to ensure that the arrow key behavior doesn’t interfere with users who are typing in form fields or using assistive technologies.

Here is the relevant part of my component code:

@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent): void {
const activeElement = document.activeElement;

const isTyping =
activeElement instanceof HTMLElement &&
(activeElement.tagName === 'INPUT' ||
activeElement.tagName === 'TEXTAREA' ||
activeElement.isContentEditable);

if (isTyping) {
// If user is typing in an input/textarea, do nothing
return;
}

if (event.key === 'ArrowRight') {
this.isOpen = false;
} else if (event.key === 'ArrowLeft') {
this.isOpen = true;
}
}

1. Is this approach considered best practice in Angular for capturing keyboard events to control the side panel?
2. Are there accessibility (a11y) concerns with relying on unmodified arrow keys at the global (window) level, especially for screen readers or other assistive technologies?
3. How could I improve this method to make it more accessible or more in line with typical Angular/JavaScript best practices?

My goal:

I’d like the side panel to be easily toggleable via keyboard, but not break normal text navigation or assistive tech usage.

I want to follow Angular and general web app best practices in terms of accessibility, code clarity, and maintainability.

Continue reading...