Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(skip-links): add skip link and main id to missing pages #360

Conversation

billhimmelsbach
Copy link
Contributor

Currently we don't have skip links that aid in making our content accessible to those using tab navigation.

Closes: #359

Changes

  • adds skip link to App.tsx
  • adds missing id="main" to pages that still need it

How to test this PR

  1. Can you press tab then enter to skip to the main content of a page in the tab order? (Try pressing tab again to confirm.

Screenshots

Screenshot 2024-04-02 at 3 35 55 AM

Notes

@billhimmelsbach billhimmelsbach merged commit 61c5a3f into 356-accessibility-improvements-main-icons-headings Apr 2, 2024
billhimmelsbach added a commit that referenced this pull request Apr 2, 2024
**Note: same as #360, but now
merging on main**

Currently we don't have skip links that aid in making our content
accessible to those using tab navigation.

Closes: #359 

## Changes

- adds skip link to App.tsx
- adds missing `id="main"` to pages that still need it

## How to test this PR

1. Can you press `tab` then `enter` to skip to the main content of a
page in the tab order? (Try pressing `tab` again to confirm.

## Screenshots
<img width="533" alt="Screenshot 2024-04-02 at 3 35 55 AM"
src="https://github.com/cfpb/sbl-frontend/assets/19983248/fb528a31-ad7e-4dc7-b941-dd9f8f786781">


## Notes

- the skip link could be a little fancier with its CSS transition like
on cf.gov, but we're prioritizing [just the accessibility
first](cfpb/design-system-react#330)
- works in conjunction with
cfpb/design-system-react#330 for the focus ring
@billhimmelsbach billhimmelsbach deleted the 359-add-skip-links branch May 31, 2024 14:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants