https://github.com/wicg/focus-visible

Polyfill for `:focus-visible`
https://github.com/wicg/focus-visible

Last synced: 1 day ago
JSON representation

Polyfill for `:focus-visible`

• Host: GitHub
• URL: https://github.com/wicg/focus-visible
• Owner: WICG
• License: other
• Created: 2017-03-08T07:05:18.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2022-12-21T18:27:48.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T12:17:40.557Z (7 months ago)
• Language: JavaScript
• Homepage: https://wicg.github.io/focus-visible/demo/
• Size: 783 KB
• Stars: 1,607
• Watchers: 35
• Forks: 122
• Open Issues: 57
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/WICG/focus-visible.svg?branch=main)](https://travis-ci.org/WICG/focus-visible)

Based on the proposed CSS

[`:focus-visible`](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo)

pseudo-selector,

this prototype adds a `focus-visible` class to the focused element,

in situations in which the `:focus-visible` pseudo-selector should match.

# Details

- Read the [Explainer](explainer.md).

- Read the [Spec](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).

- Try the [Demo](https://wicg.github.io/focus-visible/demo).

- [Give feedback!](https://github.com/WICG/focus-visible/issues)

    - Open discussions:

        - [What's the impact on users with low vision or cognitive impairments?](https://github.com/WICG/focus-visible/issues/128)

        - [Should :focus-visible match when returning focus or programmatically focusing?](https://github.com/WICG/focus-visible/issues/88)

        - [Brainstorm: options for opting in to always matching focus ring.](https://github.com/WICG/focus-visible/issues/42)

# Polyfill

## Support

👋 `:focus-visible` is now [supported in all major browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#browser_compatibility).

![A browser suppor table showing focus-visible is supported in Chrome 86, Edge 86, Firefox 85, Opera 72, Safari 15.4, all Android browsers, Safari 15.4 on iOS, Android WebView, and Samsung Internet](https://user-images.githubusercontent.com/1066253/208977092-0fdacba7-b1de-4a8f-90f9-880b06dcdb26.png)

We would encourage you to use the CSS selector instead of this polyfill if you are able. We are not currently planning to make any updates or release new versions of the polyfill, but are open to discussion in GitHub issues if changes need to be made for emergencies.

## Installation

`npm install --save focus-visible`

_We recommend only using versions of the polyfill that have been published to npm, rather than

cloning the repo and using the source directly. This helps ensure the version you're using is stable

and thoroughly tested._

_If you do want to build from source, make sure you clone the latest tag!_

## Usage

### 1. Add the script to your page

```html

    ...