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

List - fix accessibility issues with List examples #4414

Merged
merged 6 commits into from
Nov 19, 2024
Merged

Conversation

jcfilben
Copy link
Collaborator

@jcfilben jcfilben commented Nov 15, 2024

Deploy Preview

What does this PR do?

Fixes accessibility issues that were flagged by the storybook automated accessibility tool in the List examples

Where should the reviewer start?

What testing has been done on this PR?

Storybook testing

In addition to the feature you are implementing, have you checked the following:

General UX Checks

  • Small, medium, and large screen sizes
  • Cross-browsers (FireFox, Chrome, and Safari)
  • Light & dark modes
  • All hyperlinks route properly

Accessibility Checks

  • Keyboard interactions
  • Screen reader experience
  • Run WAVE accessibility plugin (Chrome)

Code Quality Checks

  • Console is free of warnings and errors
  • Passes E2E commit checks
  • Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Closes #4366

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

no

Is this change backwards compatible or is it a breaking change?

backwards compatible

Copy link

netlify bot commented Nov 15, 2024

Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name Link
🔨 Latest commit 5fe308c
🔍 Latest deploy log https://app.netlify.com/sites/unrivaled-bublanina-3a9bae/deploys/673cb1fa82825c0008989b3a
😎 Deploy Preview https://deploy-preview-4414--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@jcfilben jcfilben requested a review from britt6612 November 15, 2024 22:48
@@ -48,6 +48,7 @@ const data = [
export const ListImageIdentifierExample = () => (
<Box width={{ max: 'xxlarge' }} margin="auto" fill>
<List
aria-label="Locations of people and image of location"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image showing the locations where people are currently situated

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that makes more sense, I'll make that change

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated aria-label

@britt6612
Copy link
Collaborator

just one comment and fix yarn file then looks good

@jcfilben jcfilben requested a review from britt6612 November 19, 2024 17:05
@britt6612 britt6612 merged commit df548b1 into master Nov 19, 2024
11 of 12 checks passed
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.

DS storybook - Lists/Order story has accessibility violations
2 participants