The delay in milliseconds between the setting of the goto element label and the shifting of focus to the goto element. A screen reader needs time to recognize the newly set label.
A css query selector or HTMLElement which defines an element to which the position of the tabulator/screen reader will jump. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.
Leave empty if you just want a label.
A css selector(s) for elements which will be set "aria-hidden" as soon as the goto element gets the focus. The "aria-hidden" will be removed after "gotoHideDuration" milliseconds or when the first "keydown" or "focusout" event fires on the goto element.
Helpful when the goto element is a very nested element and the screen reader is attempting to read all the nested text content. With "gotoHide" you can hide the nested content for the jump.
The duration in milliseconds the "gotoHide" elements will be hidden for the screen reader.
A label which will be set for the goto element. It is advisable to have a label for the goto element so that the user recognizes the skip to the goto element because the screen reader will announce the label.
You can set a label directly for the goto element by using the attributes "aria-label" or "aria-labelledby" on the element. The difference is when using "gotoLabel", the label will be removed again after the goto element loses focus again.
By default the content is hidden by using the "clip" css feature.
If the property "position" is set, the content is hidden outside the screen to the "left: -10000px".
If true, not only the "aria-label" will be set with the gotoLabel value but also a hylo-sr-only component with the value will be placed inside the goto element. (And also be removed again when loosing focus. Works only in combination with gotoLabel.)
Helps when the screen reader want read the label but only the content of the goto element.
Sets the content "top: -500px" instead of "left: -10000px" outside the screen when property "position" is set.
Generated using TypeDoc
Creates a jump mark which is hidden until it gets the focus.
Meant to create short cuts for tabulator and screen reader navigation where the component offers an anchor link to a specific position on the page.
E.g. usefull to skip the header navigation so that the user doesn't have to tab through it every time.
Tip: The css position value should never change. Define it ones for the element at the beginning and leave it alone. Otherwise you might run into problems with screen readers. The default value is "absolute".
Used css variables: