TabIndicator
Observes if a user is using the tab key (to navigate through the site).
Get the package
npm i --save @superherocheesecake/tab-indicatorImport
import TabIndicator from '@superherocheesecake/tab-indicator';Basic Usage
const tabIndicator = new TabIndicator();Events
Get Current State
addClassToBody() {
document.body.classList.add('is-tab-enabled');
}
removeClassFromBody() {
document.body.classList.remove('is-tab-enabled');
}
// single update event
tabIndicator.addEventListener('update', (isEnabled) => {
if (isEnabled) {
addClassToBody();
}
else {
removeClassFromBody();
}
});
// or listen to separate events
tabIndicator.addEventListener('enabled', () => {
addClassToBody();
});
tabIndicator.addEventListener('disabled', () => {
removeClassFromBody();
});Methods
Get Current State
tabIndicator.isEnabled();Examples
Example styling for focus (in _base.scss)
:focus {
outline: highlight solid 2px;
outline: -webkit-focus-ring-color auto 5px;
}
body:not(.is-tab-enabled) :focus {
outline: none !important;
}