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.

Sign up for GitHub

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

Jump to bottom

[Select] Fix aria-describedby attribute #24027

Merged
merged 5 commits into from Dec 17, 2020
Merged

[Select] Fix aria-describedby attribute #24027

merged 5 commits into from Dec 17, 2020

Conversation

HVish
Copy link
Contributor

@HVish HVish commented Dec 16, 2020 •
edited

Closes: #24019

@mui-pr-bot
Copy link

mui-pr-bot commented Dec 16, 2020 •
edited

Details of bundle changes

Generated by 🚫 dangerJS against 0b113ca

@oliviertassinari oliviertassinari changed the title [select] add aria-describedby attribute [Select] Fix aria-describedby attribute Dec 16, 2020
@oliviertassinari oliviertassinari added accessibility a11y component: select This is the name of the generic UI component, not the React module! labels Dec 16, 2020
@github-actions github-actions bot mentioned this pull request Dec 16, 2020
Closed
eps1lon
eps1lon previously requested changes Dec 16, 2020
View reviewed changes
Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

Could you add a test for it? We have existing matchers for checking that the accessible description is wired up correctly: toHaveAccessibleDescription(). I think right now you would have to query the Select with byRole('button') since we're implementing the 1.1 pattern.

@eps1lon
Copy link
Member

eps1lon commented Dec 16, 2020

@oliviertassinari We should probably revisit where we spread the other props. Since that element is just an implementation detail for getting form validation right we might want to hide it from the API surface.

@HVish
Copy link
Contributor Author

HVish commented Dec 16, 2020

@eps1lon Sure, I can add a test for it but I don't think toHaveAccessibleDescription() would be useful to test aria-describedby prop as it checks for title attribute.

@HVish
Copy link
Contributor Author

HVish commented Dec 16, 2020

@eps1lon May be we can use getDescriptionOf()?

@eps1lon
Copy link
Member

eps1lon commented Dec 16, 2020

Sure, I can add a test for it but I don't think toHaveAccessibleDescription() would be useful to test aria-describedby prop as it checks for title attribute.

Why would that not be useful here?

@HVish
Copy link
Contributor Author

HVish commented Dec 17, 2020

Sorry, I got confused. I thought it checks only for title attribute. I went through following code and realised it is useful.

https://github.com/eps1lon/dom-accessibility-api/blob/e4a5aab71be7548a90a7928ec8fbae71dd8a81df/sources/accessible-description.ts#L13-L24

@oliviertassinari oliviertassinari merged commit 19af571 into mui:next Dec 17, 2020
@oliviertassinari
Copy link
Member

@HVish It's a great first pull request on Material-UI 👌🏻. Thank you for working on it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

@eps1lon eps1lon eps1lon approved these changes

Assignees
No one assigned
Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Select] Prop aria-describedby is passed down to hidden input element
4 participants
@HVish @mui-pr-bot @eps1lon @oliviertassinari