search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.31k forks source link

[data grid] Accessibility - Generated DataGrid column headers do not contain role attribute with aria-label #4771

Open Hannah-Frost opened 2 years ago

Hannah-Frost commented 2 years ago

Duplicates

Latest version

Current behavior 😯

When scanning for accessibility issues using axe devtools, DataGrid column headers generate the follow issue: aria-label attribute is not well supported on a div with no valid role attribute.

It is expecting the generated element

<div class="MuiDataGrid-columnHeaderTitle css-1jbbcbn-MuiDataGrid-columnHeaderTitle" aria-label="Foo" data-mui-internal-clone-element="true">Foo</div>```
to have the role columnHeader within the same div as the aria-label.

Although the role is declared in a parent div, it may allow for better accessibility to keep it within the same div as the aria-label? Could this instead be an issue with the scanning tool rather than the DataGrid?

Expected behavior 🤔

The DataGrid should not generate any accessibility issues in the column headers.

Steps to reproduce 🕹

Steps:

  1. Install the axe-devtools extension in a chrome browser.
  2. Scan the page with the DataGrid on.
  3. Flagged issue Ensures ARIA attributes are allowed for an element's role will appear.

Context 🔦

Trying to create a more accessible site. These generated issues from the DataGrid prevent an issue-free accessibility scan.

Your environment 🌎

`npx @mui/envinfo` ``` Chrome Browser System: OS: macOS 11.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 62.06 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.9.1 - /usr/local/bin/node npm: 7.21.1 - /usr/local/bin/npm Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod Homebrew: 3.4.1 - /usr/local/bin/brew pip3: 19.2.3 - /usr/bin/pip3 RubyGems: 3.0.3 - /usr/bin/gem Utilities: Make: 3.81 - /usr/bin/make GCC: 4.2.1 - /usr/bin/gcc Git: 2.30.1 - /usr/bin/git Clang: 12.0.5 - /usr/bin/clang Servers: Apache: 2.4.48 - /usr/sbin/apachectl SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 IDEs: Nano: 2.0.6 - /usr/bin/nano Vim: 8.2 - /usr/bin/vim Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Go: 1.17.8 - /usr/local/bin/go Perl: 5.30.2 - /usr/bin/perl PHP: 7.3.29 - /usr/bin/php Python: 2.7.16 - /usr/bin/python Python3: 3.8.2 - /usr/bin/python3 Ruby: 2.6.3 - /usr/bin/ruby Databases: SQLite: 3.32.3 - /usr/bin/sqlite3 Browsers: Chrome: 100.0.4896.127 Safari: 14.1.2 ```
alexfauquette commented 2 years ago

The aria-label is added because we are using a <Tooltip /> to display description.

SInce their is a lot of element in the header, it could be nice to add a aria-label on the same level as role="columnheader" containing by priority the description, the headerName, or the field

@m4theushw do you know some specific a11y? I did not found any recommendation saying that role and aria-label should be on same level

m4theushw commented 2 years ago

I only found https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr?application=AxeChrome

The error makes sense. The div with the title doesn't have role, so aria-label is not allowed in it. We could fix this by wrapping the entire column header with the Tooltip. Since we don't have slots for headers I don't think it's a breaking change.