[Skip to content] Fix tabIndex issue

[dleroux]

WHY are these changes introduced?

In this PR: #1785 We added focus to the <main> element by adding tabIndex={-1}. This broke the Polaris-rails popover. In rails clicking the popover sends the target and hides the popover if the target isn't inside a popover. Adding the tabIndex on the main element made it the target, therefore always closed the popover.

Fixes #1816

WHAT is this pull request doing?

Adding an <a> tag at the beginning of the content and focusing it instead.

How to 🎩

To test this properly it is best to do it web.

1. Start web
2. In polaris-react: yarn build-consumer web.
3. Tab to the skip to content link and click it. You should skip to the content. Also, use voice over to ensure the correct text is being read.

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

import * as React from 'react';
import {Page} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        {/* Add the code you want to test 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

[BPScott]

Tested in web locally and it works 🎉

[jgodson]

skipoToMainContentTargetNode extra o in here (skipo)