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.

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

[a11y]: IBM DataGrid Accessibility issues #6669

Open
2 tasks done
AustinGitHub opened this issue Jan 7, 2025 · 0 comments
Open
2 tasks done

[a11y]: IBM DataGrid Accessibility issues #6669

AustinGitHub opened this issue Jan 7, 2025 · 0 comments
Labels
status: needs triage 🕵️‍♀️ type: a11y ♿ Issues not following accessibility standards

Comments

@AustinGitHub
Copy link
Contributor

AustinGitHub commented Jan 7, 2025

Package

@carbon/ibm-products

Browser

Chrome

Operating System

MacOS

Package version

v2.51.0-rc.0

React version

18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

Using this tool
https://github.com/IBMa/equal-access?tab=readme-ov-file#usage

Expectation is for data grid to be compliant, our due date is by June 2025. Please let me know if they are already compliant and with what version.

WCAG 2.1 Violation

No response

Reproduction/example

NA

Steps to reproduce

Run the accessibility checker tool in the devtools against the data grid UI. This is the properties we have set on our component in case this is necessary to know.

const getDataGridState = (columns, data, initialState) => useDatagrid({
columns: columns,
data: data,
emptyStateTitle: emptyTableMsg,
emptyStateDescription: emptyTableSubtitle,
emptyStateSize: "lg",
onDataUpdate: setData,
toolbarBatchActionsDisplayMin: 7,
batchActions: true,
DatagridActions,
toolbarBatchActions: getBatchActions(props),
onRowSelect: (row) => dataGridHelper.updateRowsSelected(row),
onAllRowSelect: (rows) => {
dataGridHelper.updateRowsSelected(rows, true);
},
parentProps,
currentProps: props,
initialState,
rowActions: props?.newTransColumnMetaDataHelper?.getNewTransRowActions?.() || [],
endPlugins: [useDisableSelectRows],
shouldDisableSelectRow: () => props?.props?.newTransDataGridParms?.isSidePanelOpen,
},
useEditableCell,
useStickyColumn,
useSelectRows,
useFiltering,
useActionsColumn,
);

If you need to know how our inline editing properties are, message me on slack and I can send the file that we have on the setup for those.

We use Input field, dropdown select, checkbox, and number.

From what I see on the violations though it looks like it is primarily on button roles not having an associated label towards it. Another error that shows for me is this.

Interactive component with ARIA role 'grid' does not have a programmatically associated name

Image

Expected due date on our end for fixes are June. Thanks!

Code of Conduct

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs triage 🕵️‍♀️ type: a11y ♿ Issues not following accessibility standards
Projects
Status: Needs triage 🧐
Development

No branches or pull requests

1 participant