search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
290 stars 75 forks source link

Action slots on non-collapsible blocks have mechanism to tie back to heading for unique identifier #8037

Closed FelFly closed 5 months ago

FelFly commented 1 year ago

Check existing issues

Summary

Per the Link Purpose guideline 2.4.4., I'm trying to avoid having multiple calcite-action buttons labeled the same exact thing, but given the actions are the same in several consecutive blocks and only the heading changes, I'd like to tie the actions to the heading via aria-labelledby for context.

Actual Behavior

When I try to use aria-labelledby on the action slots in a non-collapsible block with a reference ID set on the heading of the block, I don't hear any type of relationship in NVDA or VoiceOver (it does work fine in JAWS). https://codepen.io/FelFly/pen/poxVNBv

Expected Behavior

What I'd hope to hear is the title associated with the action slots, so for the remove buttons, I'd hear "remove, button, raccoons eating twizzlers" and "remove, button, all the puppies," which would help differentiate the buttons and provide more context when accessed from form shortcut menus for screen readers.

Kitty says this was fixed for collapsible blocks: https://github.com/Esri/calcite-design-system/pull/7652, so this issue is simply to extend the fix to non-collapsible blocks.

Reproduction Sample

https://codepen.io/FelFly/pen/poxVNBv

Reproduction Steps

  1. In NVDA on Firefox, navigate into block

  2. Navigate to the action links (open in new tab, remove) via tab for each of the two blocks

  3. In VoiceOver, navigate into block (Ctrl+Option+right-arrow)

  4. Navigate to action links (open in new tab, remove) via Ctrl+Option+right-arrow for each of the two blocks

Reproduction Version

1.9.2

Working W3C Example/Tutorial

No response

Relevant Info

NVDA tested on Firefox in Windows 10 in Parallels, VoiceOver tested with Chrome (something about my codepen kept crashing Safari) on Mac Ventura 13.6.

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

Esri team

ArcGIS Hub

github-actions[bot] commented 5 months ago

Installed and assigned for verification.

geospatialem commented 5 months ago

Verified in 2.10.0-next.1 with https://codepen.io/FelFly/pen/poxVNBv and JAWS.

However, Calcite is unable to provide support to NVDA, where NVDA and the shadow DOM conflict with aria-named attributes similar to what is outline in this post.