Skip to content

Added directive to force tab focus into a loop on specific elements.

Andreas Pittrich requested to merge tab-trap into main

This is pre work to an upcoming MR concerning extra menu entries.

In oder to make the legal menu entries at the bottom of the main menu dynamic (upcoming MR), we have to change the mechanics of trapping tab focus in the menu: Up until this MR we use angular template string to identify the first and last tabbable elements of the main menu. This no longer works, since the last tabbable element will be dynamiccaly added, which does not work well with angular template strings.

This MR introduces a directive, that will prevent tabbing out of an element (ESC will let you out); instead the tab focus will loop inside the element respecting tab order until ESC is used or the focus is set somewhere else programmatically, focus is lost or the directive's host is destroyed. Used in the main menu, but also useful for modals.

How to test?

Open the main menu and press TAB multiple times. The status bar should loop through all the links in the main menu.

Edited by Andreas Pittrich

Merge request reports

Loading