Summary
Create `` to implement the PatternFly v6 Skip to content component.
Visually hidden link that becomes visible on focus, allowing keyboard users to skip navigation and jump to main content.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
| Red Hat |
`` |
Exists |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` SkipToContent
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- React `href` - anchor pointing to main content `id` (e.g. `"#main-content"`); required
- Renders as a `` with `href`; visually hidden until focused (CSS clip/transform trick)
- MUST be the first focusable element in the page - place it before all navigation
- On focus: element becomes visible, positioned absolutely in top-left corner
- Click/Enter: follows the href anchor, moving focus to main content
- No complex state; pure CSS show-on-focus with single `` element
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Skip to content component.
Visually hidden link that becomes visible on focus, allowing keyboard users to skip navigation and jump to main content.
Prior Art
Requirements
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship