Datagrid: Single actionable header and Toggle more row content labels for the first row are not read by screen readers

[kalpeshhpatel]

Describe the bug

For NVDA screen reader, labels of action column and expand column is not read by screen readers.

How to reproduce

1. Go to: https://v2.clarity.design/datagrid/expandable-rows or https://v2.clarity.design/datagrid/single-action
2. Use NVDA screen reader to read the table structure.
3. Observe that screen reader doesn't identity role/label for row1 column1

Expected behavior

For row1 column1 screen reader should be able to detect Single actionable header for action column header and Toggle more row content for Expand column header

Versions

This issue is reproducible with the latest Clarity version.

[gnomeontherun]

@chlane can you review this?

[clane]

It looks like this is about accessible names for the sorting buttons in the headers and the expand > buttons for the expandable rows.

The accessible name for the sorting buttons is addressed in #4135.

The other issue kalpeshhpatel reported is about the datagrid-expandable-caret-button missing an accessible name. I reported this issue in issue 9 at http://cx-guidelines/clarityTesting/ and it was included in #3371.

When using either the Arrow keys or the Tab key to read the datagrid-expandable-caret-button, you hear the accessible name "expand" but this is not very specific, the accessible name should describe what is being is expanded and should be unique for every button.

See the relevant HTML below.

<button class="datagrid-expandable-caret-button ng-star-inserted" type="button"><clr-icon class="datagrid-expandable-caret-icon" shape="caret" dir="right" title="Expand" role="none"><svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img" aria-labelledby="_clr_icon_5"><path class="clr-i-outline clr-i-outline-path-1" d="M29.52,22.52,18,10.6,6.48,22.52a1.7,1.7,0,0,0,2.45,2.36L18,15.49l9.08,9.39a1.7,1.7,0,0,0,2.45-2.36Z"></path></svg><span class="is-off-screen" id="_clr_icon_5">Expand</span></clr-icon></button>
My recommendation is to provide Clarity consumer with a way to specify unique accessible names
for these buttons and document it.

[gnomeontherun]

Clarity cares deeply about accessibility, and we work with our accessibility team to identify and triage issues. We have an internal tracking system to identify and verify accessibility issues, which has captured this already. Some issues with Clarity Angular are difficult to solve without causing side effects or breaking changes, and we have to balance concerns with fixing issues and breaking changes. As we build out Clarity Core, we are able to address these root cause accessibility issues and recommend adopting the Clarity Core implementations as they become available. We are closing this issue as we have the issues tracked internally. Please follow our development and releases to see when we release relevant Clarity Core components to make this possible.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.