# AccessibilityFlyingFocus
The AccessibilityFlyingFocus provides a floating outline(black/white) that appears around the focused element, when navigating using the keyboard. To serve their purpose AccessibilityFlyingFocus should be the first element on the page before AccessibilitySkiplinks.
Unique Component
This component must only exist once per layout.
#the-flying-focus
# Dependencies
None.
# Props
None.
# Variants
None.
# Example
Good
<!-- nuxt-starter/layouts/default.vue -->
<!--
The component will need the DOM, therefore
it makes sense to wrap the component in
client-only to prevent server side rendering -->
<client-only>
<AccessibilityFlyingFocus />
</client-only>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Bad
<!-- nuxt-starter/pages/index.vue -->
<!-- Do not use the component on pages or components! -->
<div class="page">
<AccessibilityFlyingFocus />
</div>
<!-- nuxt-starter/layouts/default.vue -->
<!-- Do not use this component more than once per layout -->
<AccessibilityFlyingFocus />
<AccessibilityFlyingFocus />
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11