Adds and removes hylo-accessibility-focus elements automatically to elements whenever a "hyloHasFocus" event occurs.
The event gets fired by hylo-router-link, hylo-button, hylo-button-back, hylo-accessibility-button, hylo-checkbox,
hylo-snap-slider-item, hylo-accordion-item-header. Add class "hylo-accessibility-focus-manager-disable" to disable the
manager for this element.
Beginning with the target element of the event it checks if an ancestor (or the target element itself) has
the class "hylo-accessibility-focus-wrapper", is a hylo-accessibility-button element, is a hylo-button element,
is a hylo-button-back element, is a hylo-router-link element or is a hylo-slide element (in that order).
If none of the above is found, it uses the target element itself.
Starting with the found element, going down its children, it searches for an element which has dimensions
and is not an "inline" element (skipping elements with the class "hylo-accessibility-focus-skip").
To that element a hylo-accessibility-focus element gets appended when none of its children is not already one.
It gets removed again when the focus gets lost.
The added hylo-accessibility-focus element is set to not use its blend mode by default.
If you want to use the blend mode, add the class "hylo-accessibility-focus-blend" to the element or one of its ancestors.
To hide the actual element outline, not the artificially added box-shadow (with or without blend mode),
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 artificially added box-shadow (with or without blend mode),
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;".
If a hylo-accessibility-focus element is added, the element to which the hylo-accessibility-focus element is appended
gets the class "hylo-accessibility-focus-manager".
Adds and removes hylo-accessibility-focus elements automatically to elements whenever a "hyloHasFocus" event occurs. The event gets fired by hylo-router-link, hylo-button, hylo-button-back, hylo-accessibility-button, hylo-checkbox, hylo-snap-slider-item, hylo-accordion-item-header. Add class "hylo-accessibility-focus-manager-disable" to disable the manager for this element.
Beginning with the target element of the event it checks if an ancestor (or the target element itself) has the class "hylo-accessibility-focus-wrapper", is a hylo-accessibility-button element, is a hylo-button element, is a hylo-button-back element, is a hylo-router-link element or is a hylo-slide element (in that order). If none of the above is found, it uses the target element itself. Starting with the found element, going down its children, it searches for an element which has dimensions and is not an "inline" element (skipping elements with the class "hylo-accessibility-focus-skip"). To that element a hylo-accessibility-focus element gets appended when none of its children is not already one. It gets removed again when the focus gets lost.
The added hylo-accessibility-focus element is set to not use its blend mode by default. If you want to use the blend mode, add the class "hylo-accessibility-focus-blend" to the element or one of its ancestors.
To hide the actual element outline, not the artificially added box-shadow (with or without blend mode), 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 artificially added box-shadow (with or without blend mode), 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;".
If a hylo-accessibility-focus element is added, the element to which the hylo-accessibility-focus element is appended gets the class "hylo-accessibility-focus-manager".