SkipToContent updates needed based on updates in react

[jgiardino]

Updates were recently included in patternfly/patternfly-react#2519 by @seanforyou23 for the SkipToContent link works, regarding how the target is defined (i.e. targeting the main region instead of an anchor link).

This issue is to include these same updates in core as well. Specifically:

• Update the documentation for the SkipToContent link regarding how the target is defined, and maybe include a note that this same target is also useful for Single Page Apps for shifting focus after navigation, or maybe just link to the Page component and provide these details there...
• Update the Page component and documentation to include the updated target method and explain the purpose of the id
  • The main region should include all of these attributes: <main role="main" id={mainContainerId} class="pf-c-page__main" tabindex="-1">
  • I think id would be optional, or only required for SPAs ( 👈 @seanforyou23 🤷‍♀ )
  • tabindex="-1" should be required to support both the SkipToContent component, and also setting focus after navigation if the site is a SPA.
• Update all the page component or demo examples that have this target defined to use the new method.

@seanforyou23 please correct me if I captured this incorrectly, but this is my understanding of why these changes are important plus some background info:

• The SkipToContent component primarily benefits sighted users who use a keyboard to navigate the UI. It allows the keyboard-only user to skip over interactive contents in the masthead and navigation to get to the main region much faster.
  • This update doesn't really affect the experience for this user (unless I'm missing something)
  • NOTE something worth testing is whether this link works for screen reader users, and therefore whether there's any benefit in exposing it to screen readers.
• The aspect of these updates that benefit screen reader users is how the target is defined. The target is used by the SkipToContent link to place focus in the main region. But the same target is also reused in the context of a Single Page App, because it allows us to shift focus to the main region when selecting a page in the navigation.
  • The primary difference between the experience when using an anchor link inside the main region vs the main region itself is that the anchor link doesn't announce anything to the screen reader user when it receives focus. But when the main region receives focus, the screen reader will start to announce the contents within the main region. This lets the user know that their action to navigate to a new page was successful.
  • This experience is slightly different than in traditional web sites (i.e. each page is a separate html file that fully loads on navigation), the focus would instead start at the beginning of the page. In this case, the user knows their navigation action successfully completed when they hear the title of the page that loaded.
  • Even though the experience we're implementing for SPAs is different than with traditional web pages, this is the recommendation provided in Deque documentation.

WebAIM has a great article about all things keyboard interaction (what keys can be used, links to other resources like the "skip to main" link, etc...)

[jgiardino]

I marked this as P1 because it's out of alignment with react (at least once patternfly/patternfly-react#2519 is merged)

[jgiardino]

🤦‍♀ #2058