https://github.com/safrmo/auto-blur

Automatically blur buttons and other elements when clicked
https://github.com/safrmo/auto-blur

a11y accessibility blur button

Last synced: about 1 month ago
JSON representation

Automatically blur buttons and other elements when clicked

• Host: GitHub
• URL: https://github.com/safrmo/auto-blur
• Owner: SaFrMo
• Created: 2018-03-16T01:13:29.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-07T20:31:11.000Z (about 6 years ago)
• Last Synced: 2024-10-30T05:09:15.330Z (3 months ago)
• Topics: a11y, accessibility, blur, button
• Language: JavaScript
• Size: 21.5 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Blur a button or other element automatically when clicked.

## Usage

`npm install auto-blur --save`

In your JS:

```js

import { blur } from 'auto-blur'

// Blur any button after it's clicked

addEventListener('click', evt => blur(evt))

```

or even more simply:

```js

import { autoBlur } from 'auto-blur'

// does the above automatically

autoBlur()

```

## API

-   `blur(event, tag = 'BUTTON')`

    -   `event` - Event, required

    -   `tag` - String, optional. Default `BUTTON`. Name of the tag to look for and blur.

Blur an element if it exists in a specific event. Pass the event to this function - if the given `tag` exists within the event's hierarchy, `blur` will blur that tag immediately.

-   `autoBlur(tag = 'BUTTON')`

    -   `tag` - String, optional. Default `BUTTON`. Name of the tag to look for and blur.

Attaches a click event listener to the window and blurs the given `tag` if it exists anywhere within the click event target's hierarchy.

## Why?

I like styling both `hover` and `focus` states in CSS, so that users who don't use a mouse can have the same hover experience as users who do:

```css

button:hover,

button:focus {

    background-color: black;

    color: white;

    outline: none; /* remove the default :focus outline */

}

```

But when you style like this, clicking any link will make it retain the `:focus` state.

`auto-blur` is a tiny solution to this problem that listens for click events, finds the `target` of those events, and searches the `target`'s hierarchy for a given `tag`. If that `tag` is found, it is blurred immediately, preventing holdover `focus` states.

## Issues/Questions

Please feel free to submit issues for problems or questions, I'm happy to help!