RxJS Challenge #15: Tracking focus type

You might have noticed that when you click a button and it receives focus — it doesn’t show you the outline. It appears for buttons and some other elements only on keyboard focus. It is also not uncommon to see outline: none in styles to remove native outline since you cannot change its appearance. But how would keyboard users know where the focus is at?

:focus-visible is finally getting support by all major browsers which is the solution to the issue above!

Generally speaking, it might be important to know what initiated the focus. That’s why Angular CDK has a FocusMonitor — dedicated class that can tell you what triggered the focus.

Let’s practice our RxJS and DOM API skills to create a simple Observable tracking the focus type.

General solution

Like Angular CDK, we also would break focus into 4 categories: mouse, keyboard, touch and script.

1 Mouse focus happens after mousedown event on the element in the same synchronous thread. It is the default action of this event and can be prevented by calling preventDefault()

2 Keyboard focus happens after Tab key is pressed on previous focusable element in the same synchronous thread (or Shift + Tab…