BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt… #3988
Conversation
…ons lack accessible name)
…ons lack accessible name)
|
…ons lack accessible name)
|
@magento create issue from PR |
…lack accessible name)
…lack accessible name)
There was a problem hiding this comment.
Thanks @RaghavendraTirumalasetti ! - A few comments on adding translations to strings, and editing the default value for slider settings. Also, please resolve merge conflicts.
packages/venia-ui/lib/components/OrderHistoryPage/resetButton.js
Outdated
Show resolved
Hide resolved
m2-community-project
bot
added
Progress: changes requested
and removed
Progress: ready for review
labels
anthoula
added
the
version: Patch
|
✅ Slider dots to arrows change is approved by UX & Product |
…lack accessible name)
…lack accessible name)
…lack accessible name)
…lack accessible name)
…lack accessible name)
There was a problem hiding this comment.
Thanks @RaghavendraTirumalasetti - Just a few small additional changes please.
packages/pagebuilder/lib/ContentTypes/Slider/__tests__/slider.spec.js
Outdated
Show resolved
Hide resolved
packages/venia-ui/lib/components/OrderHistoryPage/resetButton.js
Outdated
Show resolved
Hide resolved
…spec.js Co-authored-by: Anthoula Wojczak <anthoula@users.noreply.github.com>
…ons lack accessible name)
…pattern: Icon butt… - Revert snapshot
|
run cypress |
|
Successfully started codebuild job for |
|
run lighthouse-desktop |
|
Successfully started codebuild job for |
|
run lighthouse-mobile |
|
Successfully started codebuild job for |
|
run cypress |
|
Successfully started codebuild job for |
|
run lighthouse-desktop |
|
Successfully started codebuild job for |
|
run lighthouse-mobile |
|
Successfully started codebuild job for |
|
QA Approved |
…ons lack accessible name)
Description
Reproduction Steps
Locations (representative sample):
Global Header
Landing Page
Search Results
Product Detail Page
Shopping Bag Mini Cart
Shopping Bag
Account - Order History
Actual Behavior
There are icon buttons that do not provide accessible descriptive name. Examples include:
Module 01 - Global Header:
Close button on expanded mobile navigation
Module 02 - Landing Page:
Dot icon buttons for homepage hero carousel
"Slider" buttons of "Top Sellers" carousel
Module 03 - Search Results page:
Close button on filters menu
Module 04 - Product Detail page:
Product Image buttons
At 200% browser zoom, product image gallery controls including previous and next arrow buttons and pagination dot buttons.
Module 05a - Shopping Bag mini cart:
Delete buttons
Module 05b - Shopping Bag:
Options three dots/"kebab" icon buttons
Module 06c - Checkout - Confirmation / Create an Account:
Eye icon button
Module 08 - Account - Order History:
Search button
Close button on search field
Accordion buttons
When controls do not provide accessible names, screen reader users will not know their purpose.
Expected Behavior
Ensure that all buttons communicate descriptive accessible names.
Provide a meaningful name for the control that communicates the purpose of the control. Note - Do not include the role as part of the accessible name, which can lead screen readers to announce controls in confusing ways, such as "Click Here button, button". For icon buttons, an accessible name can be provided with visually-hidden text or with an aria-label attribute.
Related Issue
Closes https://jira.corp.adobe.com/browse/AC-2481
Acceptance
Verification Stakeholders
Specification
Verification Steps
Test scenario(s) for direct fix/feature
Test scenario(s) for any existing impacted features/areas
Test scenario(s) for any Magento Backend Supported Configurations
Is Browser/Device testing needed?
Any ad-hoc/edge case scenarios that need to be considered?
Screenshots / Screen Captures (if appropriate)
Breaking Changes (if any)
Checklist
Resolved issues: