Fix focus-visible for Safari

[sarayourfriend]

Fixes

Fixes #723 by @sarayourfriend

Description

Fixes focus-visible for Safari using a polyfill and a postcss plugin.

Testing Instructions

Checkout this branch and run it in Safari and verify that focus rings appear on elements that need them when focused via the keyboard (like buttons in the header).

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• [N/A] I added or updated tests for the changes I made (if applicable).
• [N/A] I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[sarayourfriend]

Is there a better way to import this into all layouts client-side only? I tried using a setting in head object in nuxt-config but I wasn't sure how to get the polyfill file referenced properly 🤔 Would we need to copy it out of node_modules during the build step or something into the static folder so it would get copied into the build output and we could reference it in a script element in the head?

[sarayourfriend]

focus-visible breaks SSR so we need to guard it to only be imported on the client.

[dhruvkb]

I'm not well versed with Nuxt config but could we add this somewhere globally instead of importing in every layout?

this

[sarayourfriend]

@dhruvkb Is there a global root file for Nuxt? I couldn't really find one that is accessible to edit, that's why I placed it in the layouts 🤔

[dhruvkb]

There has to be some level above the layouts. I'll dig through the docs.

[sarayourfriend]

@dhruvkb based on https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498 it seems like adding it to static and including it in the head configuration is the way to go ☹️ That makes sense for everything except vendor stuff.

I suppose we could use a CDN distribution of it instead of copying it from node_modules?

[dhruvkb]

If we can do that, it'll be great. But considering the a11y implications of completely forgetting about a browser, we could also merge this as a quickfix for now.

[sarayourfriend]

Well, either way we'll have to deploy the fix which probably won't happen for another couple hours anyway.

@zackkrida can you see any reason not to use a CDN version of the polyfill (provided we include all the appropriate integrity checks?)

We could use https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js?meta as we already rely on Cloudflare anyway.

[zackkrida]

I'm comfortable with unpkg + integrity checks, I don't see any issue there!

[sarayourfriend]

Went the plugin route that @obulat recommended. It's much more sensible!

[zackkrida]

This is working well on desktop Safari. A good way for others to test this is comparing the hover state of the homepage content type chooser on localhost vs. https://wordpress.org/openverse/