Allows a target element (either via href or the targetValue as a selector) to be focused.
If the element does not have a tabindex attribute, it will be added and removed when the element loses focus.
Description
Useful for the skip link functionality, which appears at the top left corner of the admin when the tab button is clicked.
Used to provide an accessible skip button for keyboard control so that users can
easily navigate to the main content without having to navigate a long list of navigation links.
Inspired by https://github.com/selfthinker/dokuwiki_template_writr/blob/master/js/skip-link-focus-fix.js
Example: As an accessible skip link
<ahref="#main"data-controller="w-focus"data-action="w-focus#focus:prevent">Skip to main content</a>
Example: As a button to skip to the top of a section
<section> <divclass="section-top"><h3>Section title</h3></div> <p>...lots of content...</p> <buttontype="button"data-controller="w-focus"data-w-focus-target-value=".section-top"data-action="w-focus#focus">Skip to top</button> </section>
Allows a target element (either via
hrefor the targetValue as a selector) to be focused. If the element does not have atabindexattribute, it will be added and removed when the element loses focus.Description
Useful for the skip link functionality, which appears at the top left corner of the admin when the tab button is clicked. Used to provide an accessible skip button for keyboard control so that users can easily navigate to the main content without having to navigate a long list of navigation links. Inspired by https://github.com/selfthinker/dokuwiki_template_writr/blob/master/js/skip-link-focus-fix.js
Example: As an accessible skip link
Example: As a button to skip to the top of a section