Skip to content

Change the way focus is set in skip link example code #3164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 3, 2025
Merged

Change the way focus is set in skip link example code #3164

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/guide/best-practices/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ You should add a link at the top of each page that goes directly to the main con
Typically this is done on the top of `App.vue` as it will be the first focusable element on all your pages:

```vue-html
<span ref="backToTop" tabindex="-1" />
<ul class="skip-links">
<li>
<a href="#main" ref="skipLink" class="skip-link">Skip to main content</a>
Expand All @@ -23,6 +24,9 @@ Typically this is done on the top of `App.vue` as it will be the first focusable
To hide the link unless it is focused, you can add the following style:

```css
.skip-links {
list-style: none;
}
.skip-link {
white-space: nowrap;
margin: 1em auto;
Expand All @@ -40,7 +44,7 @@ To hide the link unless it is focused, you can add the following style:
}
```

Once a user changes route, bring focus back to the skip link. This can be achieved by calling focus on the skip link's template ref (assuming usage of `vue-router`):
Once a user changes route, bring focus back to the very beginning of the page, right before the skip link. This can be achieved by calling focus on the `backToTop` template ref (assuming usage of `vue-router`):

<div class="options-api">

Expand All @@ -49,7 +53,7 @@ Once a user changes route, bring focus back to the skip link. This can be achiev
export default {
watch: {
$route() {
this.$refs.skipLink.focus()
this.$refs.backToTop.focus()
}
}
}
Expand All @@ -65,12 +69,12 @@ import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const skipLink = ref()
const backToTop = ref()

watch(
() => route.path,
() => {
skipLink.value.focus()
backToTop.value.focus()
}
)
</script>
Expand Down