SkipNav Component

[nnnnat]

SkipNav

Overview / Summary

Summary description of UI component

A "skip-nav" also know as skip-links or bypass block is a hidden UI element at the top of a web page that give users navigating with a keyboard the ability to bypass or skip sections of the interface that might not be important to the user at that time. Here is a short video that does a great job explaining what and how it works.
https://www.youtube.com/watch?v=PrPPz8KbWmU

Rationale for why this component is necessary

Providing a way to "bypass" repeating UI elements is essential for WCAG 2.0 compliance.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html

Expected use cases

A user using keyboard navigation presses the "tab" key, when the browser focus changes to the webpage the SkipNav should become visible with links to different points of interest on the page (i.e. "main content", "search", "settings", etc). The SkipNav should always be the first thing that comes into focus when navigating via keyboard.

Images / Designs of UI component in context

@cassytaylor & @rymorgan when the skip nav comes into focus it's best practice to make it visible at that point.
Here are a few examples of different styles.
https://www.bjsrestaurants.com/
https://amazon.com
https://target.com

React State

This might need local state to determine if it's visible or not, but I feel it would be possible to hide/show this component using just CSS & :focus and keep this a pure function.

Data Fetching

N/A

State Store

N/A

Routing / Query String

N/A

Render Criteria

I see this component working very similarly to this one from grommet UI (docs). Taking an array of skip links with a default of "Main Content", here is a pseudo example

Breakpoints

Desktop, Tablet, Mobile

This should work the same regardless of device.

UI States

Normal

Hidden

Empty

Always have "main content" as a default so will never be empty.

Loading / retrieving data

N/A

Processing / Waiting for response

N/A

Error

N/A

Active (e.g. button is depressed)

N/A

Disabled

N/A

Focus

Visible at the top of the page.