mouseFocusIndicator
keyboardFocusIndicator

The uxFocusIndicator directive allows you to easily determine when an element should receive focus indicator styling. By default browsers will display a focus ring on any focusable element when it is clicked, navigated to via the keyboard or programmatically focused. A common use case is to only show the focus ring when the user has navigated to an element by using the keyboard and preventing the focus ring from appearing when the user has clicked on it.

The following options can be used to customize the behavior of the directive:

If true, this element will receive a focus indicator when any child element has focus. If true, this element will receive a focus indicator when the element is clicked on. If true, this element will receive a focus indicator when the element is focused using the keyboard. If true, this element will receive a focus indicator when the element is touched. If true, this element will receive a focus indicator when the element is programmatically focused. This will emit a boolean value indicating whether or not the focus ring is visible on the element.

The example above can be created using the following:

Focus Indicator Service

Alternatively, we provide a FocusIndicatorService service for you to manually apply the focus indicator settings to an element. This can be useful when creating a custom component and you which to target the host element.

The following functions are available in the service:

This will begin controlling the focus indicator on the specified element.

Below is an example of using the service:

Focus Origin

There are occasions where an element is focused when it is first shown, for example when a modal is launched the primary button might receive focus. Ideally the button would only show a focus indicator when the modal was opened using the keyboard and not when trigged using a click. To achieve this behavior you can add the uxFocusIndicatorOrigin directive to the element that indirectly causes the focus, e.g. the button that launches the modal.

Global Defaults

The default options for the directive and service can optionally be configured for your entire application by importing the AccessibilityModule in your AppModule and calling the static forRoot function, passing it the desired AccessibilityOptions.

Local Defaults

The global configuration can be overriden on a element level by adding a uxFocusIndicatorOptions to an element. This will provide all the inputs available to the uxFocusIndicator. These options will be applied to any child elements using the focus indicator.