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.

Sign up for GitHub

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

Jump to bottom

BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt… #3988

Merged
merged 26 commits into from
Dec 2, 2022
Merged

BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt… #3988

merged 26 commits into from
Dec 2, 2022

Conversation

RaghavendraTirumalasetti
Copy link
Contributor

@RaghavendraTirumalasetti RaghavendraTirumalasetti commented Oct 20, 2022 •
edited by m2-assistant bot

…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

  • Checkout - Confirmation / Create an Account
    Account - Order History
  1. With JAWS operating, press Tab to move through the content to move focus to one of the identified controls.

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

  • I have added tests to cover my changes, if necessary.
  • I have added translations for new strings, if necessary.
  • I have updated the documentation accordingly, if necessary.

Resolved issues:

  1. resolves [Issue] BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt… #3998: BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt…

@m2-community-project m2-community-project bot added this to Ready for Review in Pull Request Progress Oct 20, 2022
@pwa-studio-bot
Copy link
Collaborator

pwa-studio-bot commented Oct 20, 2022 •
edited

Messages
📖

Associated JIRA tickets: AC-2481.
📖 DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
📖

Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against 62bd0b0

@anthoula
Copy link
Contributor

@magento create issue from PR

@m2-assistant m2-assistant bot mentioned this pull request Oct 28, 2022
Closed
anthoula
anthoula requested changes Nov 9, 2022
View reviewed changes
Copy link
Contributor

@anthoula anthoula left a comment •
edited

Choose a reason for hiding this comment

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

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/LegacyMiniCart/kebab.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/MiniCart/ProductList/item.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/OrderHistoryPage/resetButton.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/Password/password.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/SearchBar/searchBar.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/Trigger/trigger.js Outdated Show resolved Hide resolved
packages/pagebuilder/lib/ContentTypes/Slider/slider.js Outdated Show resolved Hide resolved
@m2-community-project m2-community-project bot moved this from Ready for Review to Changes Requested in Pull Request Progress Nov 9, 2022
@anthoula anthoula added the version: Patch This changeset includes backwards compatible bug fixes. label Nov 9, 2022
@anthoula
Copy link
Contributor

anthoula commented Nov 10, 2022 •
edited

✅ Slider dots to arrows change is approved by UX & Product

anthoula
anthoula requested changes Nov 16, 2022
View reviewed changes
Copy link
Contributor

@anthoula anthoula left a comment

Choose a reason for hiding this comment

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

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/SearchBar/searchBar.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/Trigger/trigger.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/Trigger/trigger.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/Password/password.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/Password/password.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/MiniCart/ProductList/item.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/MiniCart/ProductList/item.js Outdated Show resolved Hide resolved
packages/venia-ui/lib/components/OrderHistoryPage/resetButton.js Outdated Show resolved Hide resolved
@m2-community-project m2-community-project bot moved this from Reviewer Approved to Review in Progress in Pull Request Progress Dec 1, 2022
@dpatil-magento
Copy link
Contributor

run cypress

@pwa-test-bot
Copy link

pwa-test-bot bot commented Dec 1, 2022

Successfully started codebuild job for cypress

@dpatil-magento
Copy link
Contributor

run lighthouse-desktop

@pwa-test-bot
Copy link

pwa-test-bot bot commented Dec 1, 2022

Successfully started codebuild job for lighthouse-desktop

@dpatil-magento
Copy link
Contributor

run lighthouse-mobile

@pwa-test-bot
Copy link

pwa-test-bot bot commented Dec 1, 2022

Successfully started codebuild job for lighthouse-mobile

@dpatil-magento
Copy link
Contributor

run cypress

@pwa-test-bot
Copy link

pwa-test-bot bot commented Dec 2, 2022

Successfully started codebuild job for cypress

@dpatil-magento
Copy link
Contributor

run lighthouse-desktop

@pwa-test-bot
Copy link

pwa-test-bot bot commented Dec 2, 2022

Successfully started codebuild job for lighthouse-desktop

@dpatil-magento
Copy link
Contributor

run lighthouse-mobile

@pwa-test-bot
Copy link

pwa-test-bot bot commented Dec 2, 2022

Successfully started codebuild job for lighthouse-mobile

@m2-community-project m2-community-project bot moved this from Review in Progress to Reviewer Approved in Pull Request Progress Dec 2, 2022
@dpatil-magento
Copy link
Contributor

QA Approved

@dpatil-magento dpatil-magento merged commit 5264e6c into magento:develop Dec 2, 2022
@m2-community-project m2-community-project bot moved this from Reviewer Approved to Done in Pull Request Progress Dec 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@anthoula anthoula anthoula approved these changes

@dpatil-magento dpatil-magento dpatil-magento approved these changes

@jcalcaben jcalcaben jcalcaben left review comments

Assignees

@anthoula anthoula

@jcalcaben jcalcaben

@dpatil-magento dpatil-magento

Labels
pkg:extensions pkg:pagebuilder pkg:peregrine pkg:venia-ui Progress: done version: Patch This changeset includes backwards compatible bug fixes.
Projects
Pull Request Progress
Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Issue] BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt…
6 participants
@RaghavendraTirumalasetti @pwa-studio-bot @anthoula @dpatil-magento @jcalcaben @glo82145