Skip Link pattern

[bhoppers2008]

Skip Link Component Specification

1. Component Overview

The Skip Link component provides a way for users to quickly navigate to the main content of a webpage, bypassing repetitive navigation links. This is particularly useful for users who rely on keyboard navigation or screen readers.

2. Requirements

• Accessibility: The component must be fully accessible, adhering to WCAG 2.2 guidelines.
• Visibility: The skip link should be visible when focused and hidden otherwise.
• Keyboard Navigation: The skip link should be the first focusable element on the page.
• Customizability: The text and target of the skip link should be customizable.

3. Design Specifications

• Text: Default text should be "Skip to main content".
• Position: The link should be positioned at the top of the page, but off-screen by default.
• Focus State: When focused, the link should become visible and positioned at the top of the viewport.
• Styling: The link should have a clear visual indication when focused (e.g., a border or background color change).

[mark-tate]

Galao Goal: kickoff, complete by EOS, if we keep it small and we have capacity

[mark-tate]

@ivan-calderon moving this to next sprint, move back to this sprint if you are working on it and don't start unless we can complete EOS

[mark-tate]

Latte Goal: kickoff, complete by EOS, if we keep it small and we have capacity

[ivan-calderon]

Skip link pattern site page shared for review. Kickoff to be scheduled depending of capacity.

[jake-costa]

A11y review complete, some changes are needed, comments have been added to figma Skip link pattern site page.

[dplsek]

Discussed during SOS and concluded on a styling option based on accessibility recommendations.

@ivan-calderon updating design.

[mark-tate]

Lungo Goal: review and decide on whether it will be component ?

[ivan-calderon]

Updates under review. Figma file is including: a draft component, characteristics, accessibility info. Thanks @dplsek and @jake-costa for the feedback!

[mark-tate]

Macc Goal: review and get to a ready for dev

[origami-z]

Mocha: re-reviewer

[mark-tate]

@bhoppers2008

Mocha Goal: review and publish by EOY

[bhoppers2008]

Page has been reviewed and is ready to be published. Action to review Fernanda's PR and assess number of changes. @ivan-calderon

Figma to be reviewed today.

[ivan-calderon]

@joshwooding could you please confirm if skip link is going to be as a component in code due to the benefits of it? I remember you recommended to have this as a component. But we can provide a pattern page documentation too. TY!

[mark-tate]

Red Eye: can we pick this up in red Eye @Fercas123 ?

We believe it will be a component, we don't have a good way to do Popper components
A re-usable component that can be used for use-cases like skip link date picker (we created an overlay component) and ultimately mega-menu

[mark-tate]

aim to push to Labs by EOS...

[navkaur76]

11/12 - KO meeting. Skip link pattern to be published, but component set needs to be created in figma. Nav to oversee component branches in current + Next, Ivan to oversee component branch in the new Figma library.