The focus border is created with a mixed blend mode of "difference" by default which might cause the focus border to not appear at all.
Can also be set by adding the class "hylo-accessibility-focus-no-blend" to an ancestor element.
Set this flag to disable the blend mode.
Generated using TypeDoc
A component which creates a focus border whenever one of its ancestors has the focus, has the class "ion-focused" or "hylo-focused". The default style creates an outline based on "--hylo-outline" and a box-shadow based on "--hylo-outline-shadow". The component does not react to pointer events and can therefore lay over any element without interfering with it.
It positions itself "absolute".
If an ancestor should not be considered, give the ancestor the class "hylo-accessibility-focus-ignore".
If the focus border does not appear and the ancestor in question has display: block, try setting the ancestor to display: inline-block and width: 100%.
If you want to have the focus border appear only when the ancestor element gained focus by tabbing into it (Tabulator key), give the element the class "hylo-accessibility-focus-tab". In case the keydown event does not bubble up to the body element, give the element or on of its parents the class "hylo-accessibility-focus-tab-show" when the focus border should appear on focus.
To hide the focused element's outline and the outline of this element, add the class "hylo-accessibility-focus-no-outline" to the element or one of its ancestors or set the css variable "--hylo-outline: none;".
To hide the added box-shadow, add the class "hylo-accessibility-focus-no-shadow" to the element or one of its ancestors or set the css variable "--hylo-outline-shadow: none;".
Uses the following css varibles: