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

CalciteButton: aria-expanded not being read by screenreader #6033

Closed
phenderson00 opened this issue Dec 14, 2022 · 4 comments
Closed

CalciteButton: aria-expanded not being read by screenreader #6033

phenderson00 opened this issue Dec 14, 2022 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. c-button Issues that pertain to the calcite-button component enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library Professional Services - Midwest Delivery Center Issues logged by Professional Services - Midwest Delivery Center team members.
Milestone
2023 September Pr...

Comments

@phenderson00
Copy link

phenderson00 commented Dec 14, 2022 •
edited
Loading

Summary

Screenreader does not indicate to user that button is expandable despite aria-expanded being properly set on the calcite-button component.

Actual Behavior

We are using a calcite-popover with a calcite-button as its reference element. When the button gets focus, the button label and "button" are read by the screenreader but "expandable" is not read aloud. I can see in the Dev Tools that the aria-expanded state is being correctly updated on the button.

Expected Behavior

The expectation is that after reading the button label and "button", the screenreader will read "expandable" (or something to that effect) to indicate to the user that clicking the button will reveal more content, a calcite-popover in this case.

Reproduction Sample

https://codesandbox.io/s/calcite-button-aria-expanded-not-read-by-screenreader-oh4y6s?file=/src/App.js

Reproduction Steps

  1. Turn on screenreader
  2. Tab until focus arrives at button
  3. Hear "Any age groups, button" be read

Reproduction Version

0.35.0

Working W3C Example/Tutorial

No response

Relevant Info

Windows 10, Chrome 108.0.5359.99, Narrator, JAWS

Regression?

No response

Esri team

Professional Services - Midwest Delivery Center
@phenderson00 phenderson00 added 0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. p - high Issue should be addressed in the current milestone, impacts component or core functionality labels Dec 14, 2022
@github-actions github-actions bot added the Professional Services - Midwest Delivery Center Issues logged by Professional Services - Midwest Delivery Center team members. label Dec 14, 2022
@brittneytewks brittneytewks added needs triage Planning workflow - pending design/dev review. and removed needs triage Planning workflow - pending design/dev review. labels Feb 27, 2023
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. and removed p - high Issue should be addressed in the current milestone, impacts component or core functionality labels Feb 28, 2023
@geospatialem geospatialem added this to the Freezer milestone Feb 28, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Feb 28, 2023
@phenderson00
Copy link
Author

Hello! Checking in to see if there are any updates on this bug?

@geospatialem
Copy link
Member

geospatialem commented Apr 13, 2023 •
edited
Loading

@phenderson00 Thanks for re-pinging this! This request seems to be more in line of an enhancement, but in line with the native button functionality.

We'll take a look at an upcoming milestone to determine next steps. cc @brittneytewks

Some findings below during triage/next steps:

  • The native button functionality will announce "expand" or "collapse" to AT when aria-expanded is toggled and coupled with an aria-controls attribute associated with the content's id.
  • A Codepen sample for context

@geospatialem geospatialem added enhancement Issues tied to a new feature or request. and removed bug Bug reports for broken functionality. Issues should include a reproduction of the bug. labels Apr 13, 2023
@geospatialem geospatialem removed this from the Freezer milestone Apr 13, 2023
@geospatialem geospatialem added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Apr 13, 2023
@geospatialem geospatialem added this to the 2023 August Priorities milestone Jun 22, 2023
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 22, 2023
@driskull driskull changed the title aria-expanded not being read by screenreader CalciteButton: aria-expanded not being read by screenreader Aug 1, 2023
@anveshmekala anveshmekala self-assigned this Aug 23, 2023
@anveshmekala anveshmekala added the 1 - assigned Issues that are assigned to a sprint and a team member. label Aug 31, 2023
@anveshmekala anveshmekala removed the 0 - new New issues that need assignment. label Aug 31, 2023
@anveshmekala anveshmekala mentioned this issue Sep 1, 2023
Merged
@anveshmekala anveshmekala added 2 - in development Issues that are actively being worked on. c-button Issues that pertain to the calcite-button component and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 6, 2023
anveshmekala added a commit that referenced this issue Sep 29, 2023
@anveshmekala
fix(button): provides context for AT users when used as reference ele…
50cb3a6 
…ment for collapsible content (#7658)

**Related Issue:** #6033 

## Summary

Provides context of expanded for AT users when `calcite-button` is used
as reference element for collapsible content.
@anveshmekala anveshmekala added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Sep 29, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Oct 2, 2023
@geospatialem
Copy link
Member

Verified in 1.9.0-next.16 with JAWS and NVDA in https://codepen.io/geospatialem/pen/xxmagmG

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. c-button Issues that pertain to the calcite-button component enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library Professional Services - Midwest Delivery Center Issues logged by Professional Services - Midwest Delivery Center team members.
Projects
None yet
Milestone
2023 September Priorities - Main release
Development

No branches or pull requests
5 participants
@alisonailea @geospatialem @phenderson00 @anveshmekala @brittneytewks