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

Product: Make tooltips visible to screen readers #2212

Merged
merged 1 commit into from
Jan 18, 2024

Conversation

masonmcelvain
Copy link
Contributor

Closes https://github.com/iFixit/ifixit/issues/51384

Makes the shipping restriction and returns notice visible to screen readers. Also adds aria label text to each.

This is similar to what we do for the prop 65 warning.

Chakra's docs recommend that the popover trigger be focusable, hence the use of IconButton. https://chakra-ui.com/docs/components/popover/usage#basic-usage

QA

Visit the Vercel preview and make sure that the shipping restrictions and returns info buttons are not skipped by screen readers.

Makes the shipping restriction and returns notice visible to screen readers. Also adds aria label text to each.

This is similar to what we do for the prop 65 warning

Chakra's docs recommend that the popover trigger be focusable, hence the use of IconButton.
https://chakra-ui.com/docs/components/popover/usage#basic-usage
Copy link

vercel bot commented Jan 18, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-commerce ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 18, 2024 5:40pm
react-commerce-prod ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 18, 2024 5:40pm

@masonmcelvain masonmcelvain changed the title fix: make tooltips visible to screen readers Make tooltips visible to screen readers Jan 18, 2024
@masonmcelvain masonmcelvain changed the title Make tooltips visible to screen readers Product: Make tooltips visible to screen readers Jan 18, 2024
@ghost
Copy link

ghost commented Jan 18, 2024

👇 Click on the image for a new way to code review

Review these changes using an interactive CodeSee Map

Legend

CodeSee Map legend

Copy link
Contributor

📦 Next.js Bundle Analysis for @ifixit/commerce-frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

@jordycosta
Copy link
Member

jordycosta commented Jan 18, 2024

QA 🟢

The shipping restriction and 30 day returns ℹ️ button tooltips are being read by screen readers 👍

@jordycosta jordycosta removed the QAing Under QA team review label Jan 18, 2024
Copy link
Member

@davidrans davidrans left a comment

Choose a reason for hiding this comment

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

CR ☕

@davidrans davidrans merged commit 4384ca4 into main Jan 18, 2024
15 checks passed
@davidrans davidrans deleted the ada-product-return-info branch January 18, 2024 19:38
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.

3 participants