Conflict with how Vue handles class bindings, and potential workaround

[tinymachine]

In Vue 2.5.17, when I bind classes to an element that can receive focus, Vue appears to overwrite the .focus-visible class added by this polyfill. Thankfully the data-focus-visible-added attribute is also added by the polyfill, and that attribute is left untouched, so a workaround is simply to change the CSS rule recommended in the README (as of 4.1.5) from:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

to:

.js-focus-visible :focus:not([data-focus-visible-added]) {
  outline: none;
}

Is it safe to assume that this data attribute will continue to be added in updates to the polyfill?
(Thanks for creating and sharing this polyfill, btw!)

[robdodson]

I think we can add that as an additional option to the README. The attribute is really an implementation detail, we use it to detect if the class was added by the polyfill (instead of manually by the author).

As much as possible we'd like folks to just use the class but I totally understand why that won't work in this case. I'll add a note to the README.

[robdodson]

Added a PR over in #180. Thanks for reporting it!

[tinymachine]

That's great -- hope that can be of help to others. BTW I'm a big fan of your accessibility work, and as someone new to really digging into web accessibility, I've found your YouTube series A11ycasts extremely helpful and engaging. Kudos, and keep up the excellent work!

[robdodson]

Thank you! Glad you're finding the videos helpful 😁