Angular, how to block the keyboard interaction with the parent component

Question

The environment

I have a big component tree on my angular application with multiples routes outlet to display specific component on each level. the deepest level is a modal that manages certain info.

The Problem

I can block the interaction through the mouse from my child component to the parent component event if you can see it (the parent component ) but when I use the keyboard I'm able to navigate to the parent component and select options in all my parent component

the question

How can I prevent this behavior?

score 13 · Accepted Answer · answered Mar 15 '18 at 16:48

13

Angular CDK provides a directive called cdkTrapFocus which prevents focus moving outside a dom node and it's children. They use this in MatDialog, and it works great.

If you don't want to switch to using MatDialog or you need this in some other layout than a dialog, you might want to look into using cdkTrapFocus on it's own: https://github.com/angular/material2/blob/3aceb7361cc34ad987f7b1ca39339d3203248341/src/cdk/a11y/focus-trap/focus-trap.ts#L340

It should be as simple as importing and declaring the directive, then <div cdkTrapFocus></div>

answered Mar 15 '18 at 16:48

funkizer

4,626
1
18
20

thanks , I will take a look how they implement the directive, so we can follow the same approach – Ricardo Mar 15 '18 at 16:53
@Ricardo If this is the correct answer, then please mark it so that this no longer appears in the unanswered queue. – Zze Apr 07 '18 at 01:07
According to the docs, cdkTrapFocus does not prevent mouse interaction outside the dialog. – Wallace Howery Apr 18 '18 at 15:06
It only traps the focus yeah, you'd need an overlay also to prevent all mouse actions below it – funkizer Apr 18 '18 at 16:46
Is there equivalent to cdkTrapFocus on mobile accessibility reader? – snowrain Nov 02 '18 at 20:43

Zze · Answer 2 · 2018-03-27T22:26:33.297

3

Well you could implement some crude event binding like this:

document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;

    // tab, up, down, left, right
    if (e.keyCode == '9' || e.keyCode == '38' || e.keyCode == '40' || e.keyCode == '37' || e.keyCode == '39') {
        console.log("prevent");
        e.stopImmediatePropagation();
        e.preventDefault();
    }
}

This will completely prevent use of the arrow keys on the page, as well as the tab key (tabbing between targets.)

A note on accessibility

One of the comments from @Ricardo states that this is a very poor approach for accessibility. I think it is important to remember that many people with accessibility issues will use a program like Jaws to navigate a web page. These programs capture the keystrokes outside of the web app and then propogate these actions through to the browser. Blocking keydown events will not inhibit this - JAWS specifically transmutes the users keydown events into focus events.

edited Mar 27 '18 at 22:26

answered Mar 22 '18 at 04:28

Zze

18,229
13
85
118

that can be done but the idea is use the keyboard in the modal (layer on top with a specific router outlet ) and block the access to the other outlets – Ricardo Mar 22 '18 at 12:04
@Ricardo So they need to explicitly use the arrow keys within the application, just not as a navigational medium? – Zze Mar 22 '18 at 12:13
is not a requirement of the system but feature increase accessibility.. is good think about that when you are developing a app, to help people complete the task without using only the mouse, and also if is a form inside the modal you need to allow key press – Ricardo Mar 22 '18 at 12:16
1

I did say it was a crude approach. – Zze Mar 22 '18 at 12:18
@Ricardo please see my note about accessibility. – Zze Mar 27 '18 at 22:26

Angular, how to block the keyboard interaction with the parent component

2 Answers2