carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
92 stars 136 forks source link

<a11y>Multiple "region" landmarks with the same parent region are not distinguished from one another because they have the same "data table toolbar" label #4057

Open xubinnb opened 8 months ago

xubinnb commented 8 months ago

===== ENVIRONMENT ===== Browser: Version 105.0.5195.125 (Official Build) (arm64) Automatically update Chrome for all users Learn more Test Tool Type: IBM Accessbility Checker

===== DEFECT DESCRIPTION =====
 Problem 1: Multiple "region" landmarks with the same parent region are not distinguished from one another because they have the same "data table toolbar" label Problem 2: Multiple elements with "region" role do not have unique labels

=====STEPS TO REPRODUCE ===== Go to https://dev.console.test.cloud.ibm.com/projects Click 'Create' Input the name and description to create a new project Go to 'Management' tab Go to 'Environment' tab Click 'Add'

Use IBM Equal Access Accessibility Checker to scan

===== EXPECTED RESULT ===== IBM 1.3.1 Info and relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

IBM 2.4.1 Bypass Blocks A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

===== SCREEN CAPTURE =====

image
### Tasks
- [ ] Add `toolbarAriaLabel` to `useDatagrid`
elycheea commented 7 months ago

You should be able to set this on the Toolbar. This comes from the Carbon component. https://v7-react.carbondesignsystem.com/?path=/docs/components-datatable-toolbar--overview

https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/DataTable/TableToolbar.tsx#L26

flannanl commented 7 months ago

@elycheea We cannot set it. You render the TableToolbar component here: https://github.com/carbon-design-system/ibm-products/blob/main_v1/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js#L191. Yes, the DataTableToolbar allows you to supply a custom aria-label, but you don't set it in your render and you don't have a way to allow us to pass you a label to set it there.

xubinnb commented 7 months ago

@elycheea Is this possible to reopen this issue? As I can not reopen in my side.