@superherocheesecake/tab-indicator

TabIndicator

Observes if a user is using the tab key (to navigate through the site).

Get the package

npm i --save @superherocheesecake/tab-indicator

Import

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;
}