[Frame] Skip to content target / ref

[philmongeon]

WHY are these changes introduced?

I discovered a problem working on a project for experts.shopify.com.

We were planning on using a <Toast /> component for some user feedback but the <Toast /> component relies on the <Frame /> component to function.

The <Frame /> component adds a skip to content link for a11y purposes that is not configurable and does not work the way we need it to work.

We already have a skip to content link of our own that places the user past our main navigation to the top of the content area. When we add the frame component to the app we end up with 2 skip to content links (ours that does the thing we want and the one created by the frame that does not function correctly).

Making the skip to content link configurable will allow us to use the Polaris components that rely on the frame component while still providing an accessible skip to content link.

WHAT is this pull request doing?

Adds a new prop to the <Frame /> component.

/** The RefObject you wish to be focused when clicking the skip to content link */
skipToContentTarget?: React.RefObject<HTMLAnchorElement>;

We add a RefObject so that on click we can focus the provided RefObject and focus the user in the correct place.

[GIF] Skipping to the target element

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

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

export function Playground() {
  const targetId = 'SkipToContentTarget';
  const targetRef = React.createRef<HTMLAnchorElement>();

  const skipToMainContentTarget = (
    // eslint-disable-next-line jsx-a11y/anchor-is-valid
    <a id={targetId} ref={targetRef} tabIndex={-1}>
      Focus target
    </a>
  );

  return (
    <Page title="Playground">
      <Frame skipToContentTargetId={targetId} skipToContentTarget={targetRef}>
        {skipToMainContentTarget}
      </Frame>
    </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

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[dleroux]

🎩 works great! I like that this was brought down to 1 prop. Changelog needs an update but apart from that ✅ . Ping me when the that is ready. Thank you for doing this!

[philmongeon]

This works but not in the way I would expect. A bit or weirdness is happening with passing the ref and using it as a ternary to render things. I’ll take a look at fixing it when I have some more time and I’ll ping you then. Thanks !

[philmongeon]

@dleroux updated and added changes to readme and 🎩 the styleguide

[alex-page]

I tophatted this in chroma -> frame in mac os, firefox nightly.

[dleroux]

Thanks for doing this! 🎩 and works great! 🐑 🇮🇹

[ghost]

🎉 Thanks for your contribution to Polaris React!