Add a skip navigation link option that can be used with the table of contents component

[HaSistrunk]

Is your feature request related to a problem? Please describe.

In some of our sites, it makes sense to include the table of contents in <main> as part of the unique main contents of the page. However, for a long table of contents it is a usability issue for keyboard users to tab through all the TOC links to move to the rest of the content.

Describe the solution you'd like

Add a "skip navigation" link that appears on focus before the table of contents, similar to the "Skip to main content" skip link.

Describe alternatives you've considered

We could always keep the toc out of <main>, but the h1 should be in <main>, so this complicates layout for some of our sites like rockarch.org and docs.rockarch.org.

Additional context

The Docs site currently has a skip navigation link on its table of contents.

[helrond]

Clarification: The proposal here is to add an additional story to the Table of Contents component demonstrating the skip navigation link, correct? Or is this skip navigation link a separate component?

[HaSistrunk]

Clarification: The proposal here is to add an additional story to the Table of Contents component demonstrating the skip navigation link, correct? Or is this skip navigation link a separate component?

To add a story to the existing table of contents component. For a long table of contents that is repeated on multiple pages like we might find in the Docs Site, we'll want a "skip navigation links" option to improve keyboard navigation accessibility so someone doesn't have to wade through all of that on each page if they don't want to. https://webaim.org/techniques/skipnav/