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

[test][data grid] aria-labels missing from mui-x #15074

Closed
annawatson-wk opened this issue Oct 23, 2024 · 9 comments
Closed

[test][data grid] aria-labels missing from mui-x #15074

annawatson-wk opened this issue Oct 23, 2024 · 9 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! component: pickers This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ support: question Community support but can be turned into an improvement test v7.x migration

Comments

@annawatson-wk
Copy link

annawatson-wk commented Oct 23, 2024

Steps to reproduce

Steps:

  1. Open https://mui.com/x/react-data-grid/#mit-license-free-forever
  2. Inspect the column header component.
  3. Note there are no aria-labels on mui-x components.

Current behavior

MUI X components don't have aria-labels anymore.

SCR-20241024-beuc

https://mui.com/x/react-data-grid/#mit-license-free-forever

Expected behavior

MUI X components should have aria-labels.

SCR-20241024-beky

https://v6.mui.com/x/react-data-grid/#mit-version-free-forever

Context

We had a couple of unit tests fail accessibility-wise for columnheader when upgrading to the latest version of mui-x from 7.13.0. Looking at it, it appears as though all the aria-labels from Data Grid are gone. Browsing the mui website, it looks like Date Picker is also effected. Is this intentional?

Your environment

npx @mui/envinfo
System:
    OS: macOS 13.6.2
  Binaries:
    Node: 20.8.1 - ~/.asdf/installs/nodejs/20.8.1/bin/node
    npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 129.0.6668.71

Search keywords: aria-label aria label data grid pro date picker
Order ID: 82849

@annawatson-wk annawatson-wk added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 23, 2024
@github-actions github-actions bot added component: data grid This is the name of the generic UI component, not the React module! component: pickers This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ labels Oct 23, 2024
@annawatson-wk

This comment was marked as off-topic.

@oliviertassinari oliviertassinari added v7.x migration test and removed bug 🐛 Something doesn't work labels Oct 24, 2024
@oliviertassinari oliviertassinari changed the title [data grid] aria-labels missing from mui-x [test][data grid] aria-labels missing from mui-x Oct 24, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 24, 2024

The a11y tree look correct:

SCR-20241024-cucw

so it looks like this change is right, it's a simplification.

So it looks like your question is about how to migrate the tests. I guess you are looking to use:

screen.getByRole('columnheader', { name: /first name/i })

this should be invariant, meaning work in both MUI X v6 and v7, I have tested this with https://testing-playground.com/.

@oliviertassinari oliviertassinari added the support: question Community support but can be turned into an improvement label Oct 24, 2024
@KenanYusuf KenanYusuf added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 24, 2024
@annawatson-wk
Copy link
Author

Brilliant, that will work. We just wanted to make sure it was intentional.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Oct 24, 2024
@KenanYusuf
Copy link
Contributor

Glad to hear it @annawatson-wk - I'll close the issue but feel free to re-open if you have any follow up questions.

@KenanYusuf KenanYusuf removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 24, 2024

This comment was marked as outdated.

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 24, 2024

I think this was closed a bit prematurely.

We just wanted to make sure it was intentional.

@annawatson-wk Yes, it fixes a bug, see #14482.

We had a couple of unit tests fail accessibility-wise for columnheader when upgrading to the latest version of mui-x from 7.13.0.

Could you share how you changed your tests? This would hopefully help the next developers who migrate from v6 to v7. Thanks.

it looks like Date Picker is also effected

I don't know about this.

@KenanYusuf KenanYusuf reopened this Oct 24, 2024
@oliviertassinari oliviertassinari added the status: waiting for author Issue with insufficient information label Oct 24, 2024
@annawatson-wk
Copy link
Author

annawatson-wk commented Oct 24, 2024

accessibility-wise

This was probably a poor choice of words. We had a consumer unit testing aria-labels.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Oct 24, 2024
@oliviertassinari oliviertassinari removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 25, 2024
@oliviertassinari
Copy link
Member

@annawatson-wk Alright, if you have more details about the pickers aria-label change, or test change, we can continue to discuss this, otherwise, it looks like we can close.

Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@annawatson-wk How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! component: pickers This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ support: question Community support but can be turned into an improvement test v7.x migration
Projects
None yet
Development

No branches or pull requests

3 participants