Installations

npm install @notainc/key-focus-visible

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

11.13.0

NPM Version

6.7.0 Score

68.2

Supply Chain

87

Quality

82

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

6

Total

14

Closed

1

Merged

7

Issues

Open

0

Total

0

Closed

0

Releases

2

v0.0.4

Updated on Feb 18, 2019

v0.0.2

Updated on Feb 14, 2019

View All 2 releases

Languages

3

HTML

JavaScript

CSS

HTML (39.34%)

JavaScript (37.48%)

CSS (23.18%)

Developer

nota

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

4 Stars

28 Commits

17 Watchers

8 Branches

35 Contributors

Updated on Jan 15, 2020

Maintainers

5

View All 35 Contributors

Package Meta Information

Latest Version

0.0.7

Package Id

@notainc/key-focus-visible@0.0.7

Unpacked Size

5.47 kB

Size

2.71 kB

File Count

4

NPM Version

6.7.0

Node Version

11.13.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

1

standard

Key focus visible

This library allows you to show CSS :focus pseudo-class only when triggered by the keyboard.

Alternatively, :focus-visible polyfill is available. Here are advantages compared to the polifill:

Easy to debug the stylesheets on Chrome.
Does not conflict with React or Vue since it doesn't change the DOM of each element.
Code is simpler.

Detailed behavior:

Works well when the focus is returned after you close the modal/dropdown by the mouse or keyboard.
Works well when the focus is given programmatically.

In both cases, we remember the last used input device to focus, and if it was a keyboard, focus is shown, if it was a pointing device, focus is not shown.

Install

$ npm install @notainc/key-focus-visible

How to use

Just import/require this library to your project.

1import '@notainc/key-focus-visible'

It sets data-focus-visible attribute on body element when the focus is given by the keyboard. So you can apply the style as follows:

1*:focus {
2  outline: none;
3}
4
5[data-focus-visible] *:focus {
6  box-shadow: 0 0 0px 4px rgba(64, 167, 255, 0.6);
7}

You can also use it in Sass:

1.foo-component {
2  background-color: #fff;
3
4  &:active,
5  &:hover,
6  [data-focus-visible] &:focus {
7    background-color: #ccc;
8  }
9}

Demo

See the live demo here

Compatibility

Suports ordinary modern dekstop browsers (Chrome, Firefox, Safari, Opera, Edge) and mobile browsers (Chrome for Android, iOS Safari)

Does not throw error on IE.

License

This software is released under the MIT License, see LICENSE.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More