FocusOverlay -
Repo
This page contains various html controls and demonstrates when the keyboard is being used to show FocusOverlay.
Navigate through the interactive elements with your tab key.
Outlined sections have their own scoped instance.
Buttons
Default Settings
Checkbox
Radio 1
Radio 2
Button
Regular Link
Editable text
Transitions
Link with focus transition
Link with permanent focus transition
Link with focus transition and outer element that's focusable
Link with focus transition and inner element with focus transition
Iframe
Transitioned link after iframe focus
Regular link before iframe
Sorry, your browser doesn't support embedded videos.
alwaysActive
set to true
Contenteditable explicitly set to true
Contenteditable
Contenteditable with textbox role
Focusable
<div>
s
tabindex="0"
tabindex="-1"
tabindex="0"
Selects
Select one from drop-down:
Apple
Orange
Banana
Select one from list:
Apple
Orange
Banana
Select multiple:
Apple
Orange
Banana
Other
data-focus-label with no
for
attribute:
Bowling score from 0 to 300:
FocusOverlay is not called on the elements below
Checkbox
Radio 1
Radio 2
Button