v5.2.1

Remove mention of malicious polyfill service from demo and docs

5.2.0

Lists module export in package.json

v5.0.0

• Meta keys (command/ctrl, alt/option, windows key) will no longer trigger :focus-visible. You can combine these keys with your keyboard shortcuts to better support multi-modal users (i.e., someone using a mouse but also pressing keyboard shortcuts like ctrl-k).
• Shadow DOM support has been added!
• Ensure target.nodename exists in IE11 (fix)

v4.0.1

🚧 Breaking Changes 🚧

Renamed to :focus-visible

This release renames the :focus-ring polyfill to :focus-visible. This matches the latest version of the CSS draft spec. https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo. Please be sure to update your code and replace any usage of .focus-ring with .focus-visible.

v3.0.0

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.

v2.0.0

This release comes with a couple of important changes.

#34 Changes the heuristic so it only matches if the user navigates using Tab or Shift + Tab. We decided to make this change after receiving feedback from partners who said the current heuristic of matching any keypress was too aggressive. In particular, if a user uses a keyboard shortcut in an app, suddenly focus rings start appearing.

#50, #51 A .js-focus-ring class is now added to the body to signal that the polyfill has loaded. This avoids situations where a developer might disable focus styles only to have the polyfill fail to load. The recommended CSS pattern is now:

.js-focus-ring :focus:not(.focus-ring) {
    outline: 0;
}

Full changelog

v1.0.0

s/bikeshed/foo/