Skip to content

v3.0.0
Compare
Choose a tag to compare
@robdodson robdodson released this 16 Nov 01:00
· 132 commits to main since this release
v3.0.0
f6e0993

This is a fairly minor release in that it does not radically alter the behavior of the polyfill. However there are a couple breaking changes (detailed below) which required us to bump the major version.

🚧 Breaking Changes 🚧

No longer bundling other polyfills

The :focus-ring polyfill uses the Element.classList API which is not supported in IE 8-9. In accordance with the W3C's new Polyfill guidance, the :focus-ring polyfill no longer bundles other polyfills so the classList polyfill was removed. This avoids loading unnecessary or duplicate polyfills.

If you need to support these older browsers you should add the classList polyfill to your page before loading the :focus-ring polyfill. Using a service like Polyfill.io will handle feature detecting and loading the necessary polyfills for you:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>

Ignoring the dist/ directory

Previously we checked in a built version of the :focus-ring polyfill in the dist/ dir. This was to make it easier to link to in our demo and because we weren't entirely sure what was the best process to publish to npm. This ended up causing a lot of annoying PR churn because every change necessitated rebuilding dist/focus-ring.js and committing it. Having dist checked in was also dangerous because our master branch is not guaranteed to be stable.

To fix this we've redone our demo so it now points at the latest version of the polyfill on unkpg. While we have always encouraged folks to use the polyfill by installing it from npm, we've taken this a step further and removed the dist directory from the repo. We strongly encourage you to only use versions of the polyfill that have been published to npm. This ensures that they've been properly tested and we're confident in releasing them. If you really want to build from source and check that version into your project, be sure you clone a recent tag.

Other Changes 📌

  • Radio buttons should now properly apply the .focus-ring class when moving focus with the arrow keys.
  • Fixed a nasty bug where the .focus-ring class was not applied if the user tabbed from the URL bar to an interactive element.
  • Tests! So many tests! We've added a full suit of selenium tests to verify that :focus-ring behaves as expected.
Assets 2
Loading