search

magento / pwa-studio

🛠Development tools to build, optimize and deploy Progressive Web Applications for Magento 2.
https://developer.adobe.com/commerce/pwa-studio/
Open Software License 3.0
1.07k stars 683 forks source link

[Issue] AC-2785::Custom dropdown controls lack appropriate name and state inf… #3821

Closed m2-assistant[bot] closed 2 years ago

m2-assistant[bot] commented 2 years ago

This issue is automatically created based on existing pull request: magento/pwa-studio#3816: AC-2785::Custom dropdown controls lack appropriate name and state inf…

…ormation.

Description

Custom dropdown controls lack appropriate name and state information.

Environment Adobe Magento - Venia

Context Windows; Chrome 88; JAWS 2021

Reproduction Steps [NODE][body>div:nth-of-type(1)>:nth-child(1)>:nth-child(2)]

  1. With JAWS operating, press Tab to move through the content.

Actual Behavior Buttons that trigger dropdowns do not provide information to indicate that there is an expandable dropdown associated or whether the dropdown is currently expanded. The name of these buttons do not identify the purpose of the control, but instead identifies the currently selected value. Examples include:

"Default Store View" "$ USD"

When controls do not provide name, role and/or state, screen reader users will not know their purpose and current state.

Expected Behavior Ensure that these controls provide accessible names and indicate their expanded or collapsed state.

Consider whether these controls can be implemented as listboxes. See the WAI-ARIA Authoring Practices design pattern for Listbox (https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox), referencing the Collapsible Dropdown Listbox Example (https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html).

Related Issue

Closes AC-2785.

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

supernova-at commented 2 years ago

@magento export issue to JIRA project PWA as Story

github-jira-sync-bot commented 2 years ago

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2803 is successfully created for this GitHub issue.