[VisuallyHidden] Updating Visually Hidden CSS

[sophschneider]

WHY are these changes introduced?

The visually hidden styles in polaris uses top which unnecessarily pushes hidden content to the top. it also uses the deprecated clip style. This PR updates the styles to use the GovUK design system visually hidden styles discussed here. The styles have been tested extensively as seen here. I tested the styles myself on mac Voice Over.

VO demo of old styles: https://videobin.shopify.io/v/1XbjO4
VO demo of new styles: https://videobin.shopify.io/v/bbj2Aj

old styles, note the top attribute, this can be much more drastic if the container is tall:

new styles:

WHAT is this pull request doing?

updates styles for visually hidden

Playground code

export function Playground() {
  const headings = ['hello', 'world', 'aria hidden'].map((heading) => {
    if (heading === 'aria hidden') {
      const accessibilityLabel = `I am visually hidden`;

      return (
        <>
          <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
          <div aria-hidden>I am aria hidden</div>
        </>
      );
    }

    return heading;
  });

  return (
    <Page title="Playground">
      <Card>
        <DataTable
          columnContentTypes={['text', 'text', 'text']}
          headings={headings}
          rows={[]}
          verticalAlign="middle"
        />
      </Card>
    </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, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	166.08 KB (0%)
esm	96.64 KB (0%)
esnext	143.53 KB (+0.04% 🔺)
css	34.6 KB (+0.23% 🔺)

[alex-page]

Adding some context from Slack to this issue. This is the approach I am most familiar with:

clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap; 
width: 1px;

top and left values should be removed. clip is depreacted. I would love to know if you have any opinions @sophschneider. I read this great blog post recently diving deep into this problem. I also appreciated the conversation in the HTML5 boilerplate.

[sophschneider]

@alex-page read the blog and thread, they were both super interesting and helpful! I'm going to use your snippet and test it on a bunch of browsers and screen readers, I might add in or take out some styles from the threads if I run into the same problems they did (announcing order, weird focus ring, etc.)

[kyledurand]

Looks good just make sure to reenable the no-important lint rule and then 🚢

[emma-boardman]

👋 Hi!

We've run into a couple of bugs in online-store-web as a result of this change. In one instance, we were able to create a workaround:

• https://github.com/Shopify/online-store-web/pull/12220/files#r807737459
• [Form] Reorder form markup to prevent VisuallyHidden bug #5181

However, the bug also occurs on the ThemesIndex (video included below), and there are too many components using VisuallyHidden to override that CSS on a case-by-case.

Would there be any strong objections to me re-adding top:0 and releasing a v8 fix?

cc @sophschneider, @alex-page , @alexandcote

GitIntegrationSheet bug:

Screen.Recording.2022-02-18.at.10.59.46.mov

[sophschneider]

hi @emma-boardman! no objections from me but it is kind of weird that VisuallyHidden is being used for visual styling even if it is accidental, ideally it wouldn't change things visually at all