Vue Focus Visible 🙌👩‍🦽💪

✨ Automagically manage the visibility of :focus states in your app — by recreating the :focus-visible pseudo-selector behaviour. Supports Vue 3.x out of the box 🎉

Do you know that problem when you have custom :focus styles, but they're also getting applied on click 😒? Enough of that! Just install and include this plugin and you'll have a new, native HTML attribute v-focus-visible which you can select via CSS. Examples are below.

Use this polyfill if you want to use the native :focus-visible css pseudo-selector in all browsers, since Browser Support on it is currently very bad.

1. Quick start

First install the package as a dependency of your project.

npm i vue-focus-visible

In your main.js file, add the plugin like this:

// main.js

import Vue from 'vue'
// ...

import FocusVisible from 'vue-focus-visible'
Vue.use(FocusVisible)

// ...

Then include it into your application, the best place may be src/App.vue:

<!-- src/App.vue -->

<template>
  <div id="app" v-focus-visible>
    ... 
    Your App in here
    ...
  </div>
</template>

<style>
  /*
    This package does not modify any of your stylings by default. 
    It adds a `v-focus-visible` HTML attribute (which will be either `"true"` or `"false"`).
    You can simply select it and style the focus. 
  */
  :focus {
    outline: none!important;
  }

  [v-focus-visible=true] :focus {
    box-shadow: 0 0 0 2px #0498FB!important;
  }
</style>

2. Options

By default (on app load), the value of the v-focus-visible is always true. You can customize that.

// main.js

import FocusVisible from 'vue-focus-visible'
Vue.use(FocusVisible, { 
  defaultValue: true|false
})

3. API

You can set the visibility state of the focus manually, with the global method $setFocusVisible(boolean).

Please note, that the next time the plugin changes the visibility, it will override your custom value.

Usage:

export default {
  methods: {
    foo() {
      this.$setFocusVisible(false)
    }
  }
}

or

<template>
  <button @click="$setFocusVisible(true)">My button</button>
</template>

Development

Normally you don't have to deal with this, but if you want to make any contributions, just clone and download this repo,

• install @vue/cli-service globally on your machine
• cd into it the cloned repo
• hit npm i to install everything and then
• npm start to start the development server with hot-reload
• npm run build to compile and minify for production (will build everything in the dist folder).
• After this, the package can be publsued to npm

Feature requests? 😊 Questions?

Just hit me via a GitHub Issue.

Contributing

If you want to, just fork this repo and create a PR if you like to add/improve something! Also special thanks to filoxo for creating a similar solution, but it didn't quite fit to what I needed.