Adding focus-visible styles with polyfill #3695

dfmcphee · 2020-12-09T17:48:57Z

WHY are these changes introduced?

Currently we use a hack for not showing focus rings on things like buttons by blurring on mouseup. This works, but it takes adding this behaviour specifically to every component that needs it.

This adds the focus-visible polyfill so that we can start taking a CSS approach to this that will eventually be supported by browsers and we can remove the polyfill at that point.

Right now this would be about a 1kb bundle increase, but I think we could get it to about the same once we start removing the custom click/blur code.

Here is an example of clicking or tabbing to a tooltip activator before this change:

And after this change clicking would show this:

And tabbing to would show this:

WHAT is this pull request doing?

This adds the polyfill package as well as some default focus-visible styles for all elements.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide
For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

github-actions · 2020-12-09T17:51:29Z

🟡 This pull request modifies 8 files and might impact 5 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:

All files potentially affected (total: 5)

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

📄 package.json (total: 0)

Files potentially affected (total: 0)

🧩 src/components/AppProvider/AppProvider.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx (total: 0)

Files potentially affected (total: 0)

📄 src/components/Tooltip/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Tooltip/Tooltip.tsx (total: 3)

Files potentially affected (total: 3)

🎨 src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss (total: 5)

Files potentially affected (total: 5)

📄 yarn.lock (total: 0)

Files potentially affected (total: 0)

alex-page · 2020-12-09T18:27:55Z

src/components/Tooltip/README.md

-    <Link>Order #1001</Link>
+    <TextStyle variation="strong">Order #1001</TextStyle>


Should we revert this example change?

I think it is actually useful to have one example that isn't a link here. The link never showed this being an issue because it had its own focus styles.

alex-page

Looks great, the NPM package is nice and clean as well.

dleroux · 2020-12-09T19:27:52Z

Globally, I think we should just remove the focus styles altogether. Since our styles are not being applied to the element directly, but to the ::after selector using the focusing ring, this could cause en element to have 2 focus styles:

dfmcphee · 2020-12-09T19:32:39Z

Globally, I think we should just remove the focus styles altogether. Since our styles are not being applied to the element directly, but to the ::after selector using the focusing ring, this could cause en element to have 2 focus styles:

The problem with this is that for components not getting a specific focus style, just a tabindex like a tooltip activator, they would never have a focus style reapplied.

I think the real problem here is we have two different ways of applying our focus styles. This one adds a box-shadow directly to the focused element, whereas or focus-ring mixin applied it to an ::after. The reason I didn't use the same approach for the global style is that it assumes too much by applying position: relative to everything. I wish our focus-ring was a little more flexible to work on elements.

dleroux · 2020-12-09T19:39:30Z

it assumes too much by applying position: relative

I think that is the reality of the focus ring. We need to make a conscious decision when applying styles to all focusable elements. I don't recall us adding it directly to an element. Do we do that anywhere?

dfmcphee · 2020-12-09T19:59:07Z

I think that is the reality of the focus ring. We need to make a conscious decision when applying styles to all focusable elements. I don't recall us adding it directly to an element. Do we do that anywhere?

Not currently but that is part of the issue. We end up with inconsistent browser default focus styles on some elements because we don't do this (like the tooltip example above). In my opinion it would be better to have a better base focus style that we can apply globally that respects focus-visible. We could then tweak those focus styles where we need to in specific components, but we also wouldn't leave anything out then.

The alternative is not apply anything globally but fix this up in each individual case but it is going to be difficult to do that in all cases.

dfmcphee · 2020-12-09T20:16:12Z

I pushed up one more commit showing what this would look like without any global styles and only fixing the tooltip activator focus for now.

alex-page · 2020-12-09T20:23:27Z

I think it's worth fixing globally and then going through the components and addressing any technical debt. It will remove a lot of code and hopefully make it a better experience when developing new components or patterns as they will have focus styles by default.

beefchimi · 2020-12-09T21:04:49Z

I implemented a CSS-only solution to using :focus-visible in online-store-ui, which looks something like this:

@mixin interaction-focus-ring-suppress {
  &::after {
    box-shadow: 0 0 0 0 transparent;

    @media (-ms-high-contrast: active) {
      outline: none;
    }
  }
}

@mixin interaction-focus-ring($width: rem(0)) {
  @include focus-ring($border-width: $width);

  &:focus {
    @include focus-ring($style: 'focused');
  }

  &:focus:not(:focus-visible) {
    @include interaction-focus-ring-suppress;
  }

  &:focus-visible {
    @include focus-ring($style: 'focused');
  }
}

So far this seems to have worked nicely. Curious what more the polyfill is affording you?

dleroux · 2020-12-09T21:08:36Z

That shouldn't work anywhere but chrome right now: https://caniuse.com/mdn-css_selectors_focus-visible

dfmcphee · 2020-12-09T21:12:03Z

Yep, exactly. That code would only work in browsers that support focus-visible whereas the polyfill would let you also use [data-focus-visible-added] as a selector to make that code work in all browsers.

beefchimi · 2020-12-09T21:12:42Z

@dleroux seems to work as intended in the browsers I've tested. You can play around in our Chroma instance if you like - but you'd kind of need to know what components this code is applied to.

Edit: I think the part that might not be obvious is the use of :not(:focus-visible). I picked up this technique from here:
https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

dfmcphee · 2020-12-09T21:38:39Z

Edit: I think the part that might not be obvious is the use of :not(:focus-visible). I picked up this technique from here:
https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

I was actually following that implementation as well when looking at this. This is only backwards compatible in the sense that you will still get focus styles in all browsers, not that they will only be applied with keyboard focus.

For example, take a look a this codepen in Chrome, Safari, and Firefox.

In Chrome where focus-visible is supported, clicking the example heading will not show the custom focus ring, but tabbing to it will. In Safari and Firefox the focus ring shows up both when clicking and tabbing.

* Adding focus-visible polyfill * Adding to UNRELEASED changelog * Removing global styles and fixing tooltip activator * Fixing test

dfmcphee force-pushed the focus-visible branch from 67ee8c4 to 7ba1d45 Compare December 9, 2020 18:16

dfmcphee changed the title ~~Adding focus-visible polyfill~~ Adding focus-visible styles with polyfill Dec 9, 2020

dfmcphee marked this pull request as ready for review December 9, 2020 18:19

alex-page reviewed Dec 9, 2020

View reviewed changes

alex-page approved these changes Dec 9, 2020

View reviewed changes

alex-page force-pushed the master branch from ee1f920 to 405548f Compare December 21, 2020 18:28

alex-page force-pushed the master branch 2 times, most recently from 4eab9e5 to 9e09ba7 Compare January 15, 2021 05:17

Base automatically changed from master to main January 21, 2021 15:38

kyledurand approved these changes Feb 2, 2021

View reviewed changes

Dominic McPhee added 3 commits February 3, 2021 11:14

Adding focus-visible polyfill

2a68b0d

Adding to UNRELEASED changelog

4f556ce

Removing global styles and fixing tooltip activator

b3da2f3

kyledurand force-pushed the focus-visible branch from 4055976 to b3da2f3 Compare February 3, 2021 16:20

Fixing test

043e1f8

kyledurand merged commit 79c5b78 into main Feb 3, 2021

kyledurand deleted the focus-visible branch February 3, 2021 18:30

dependabot bot mentioned this pull request Mar 18, 2021

Bump @shopify/polaris from 6.0.1 to 6.2.0 jonpulsifer/hub#81

Closed

dependabot bot mentioned this pull request Mar 18, 2021

Bump @shopify/polaris from 5.12.0 to 6.2.0 jonpulsifer/pulsifer.ca#101

Closed

sylvhama pushed a commit that referenced this pull request Mar 26, 2021

Adding focus-visible styles with polyfill (#3695)

1b95ee1

* Adding focus-visible polyfill * Adding to UNRELEASED changelog * Removing global styles and fixing tooltip activator * Fixing test

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding focus-visible styles with polyfill #3695

Adding focus-visible styles with polyfill #3695

dfmcphee commented Dec 9, 2020 •

edited

Loading

github-actions bot commented Dec 9, 2020 •

edited

Loading

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 3)

Files potentially affected (total: 5)

Files potentially affected (total: 0)

alex-page Dec 9, 2020

dfmcphee Dec 9, 2020

alex-page left a comment

dleroux commented Dec 9, 2020

dfmcphee commented Dec 9, 2020

dleroux commented Dec 9, 2020

dfmcphee commented Dec 9, 2020

dfmcphee commented Dec 9, 2020

alex-page commented Dec 9, 2020

beefchimi commented Dec 9, 2020 •

edited

Loading

dleroux commented Dec 9, 2020

dfmcphee commented Dec 9, 2020 •

edited

Loading

beefchimi commented Dec 9, 2020 •

edited

Loading

dfmcphee commented Dec 9, 2020

		<Link>Order #1001</Link>
		<TextStyle variation="strong">Order #1001</TextStyle>

Adding focus-visible styles with polyfill #3695

Adding focus-visible styles with polyfill #3695

Conversation

dfmcphee commented Dec 9, 2020 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

github-actions bot commented Dec 9, 2020 • edited Loading

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 0)

Files potentially affected (total: 3)

Files potentially affected (total: 5)

Files potentially affected (total: 0)

alex-page Dec 9, 2020

Choose a reason for hiding this comment

dfmcphee Dec 9, 2020

Choose a reason for hiding this comment

alex-page left a comment

Choose a reason for hiding this comment

dleroux commented Dec 9, 2020

dfmcphee commented Dec 9, 2020

dleroux commented Dec 9, 2020

dfmcphee commented Dec 9, 2020

dfmcphee commented Dec 9, 2020

alex-page commented Dec 9, 2020

beefchimi commented Dec 9, 2020 • edited Loading

dleroux commented Dec 9, 2020

dfmcphee commented Dec 9, 2020 • edited Loading

beefchimi commented Dec 9, 2020 • edited Loading

dfmcphee commented Dec 9, 2020

dfmcphee commented Dec 9, 2020 •

edited

Loading

github-actions bot commented Dec 9, 2020 •

edited

Loading

beefchimi commented Dec 9, 2020 •

edited

Loading

dfmcphee commented Dec 9, 2020 •

edited

Loading

beefchimi commented Dec 9, 2020 •

edited

Loading