-
-
Notifications
You must be signed in to change notification settings - Fork 32.8k
[core] Improve a11y for Collapse, ExpansionPanel and Grow #14598
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
[core] Improve a11y for Collapse, ExpansionPanel and Grow #14598
Conversation
| disabled={disabled} | ||
| component="div" | ||
| aria-expanded={expanded} | ||
| aria-expanded={Boolean(expanded)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the need for this change?
expanded: PropTypes.bool,There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it's passed as undefined it won't appear in the DOM not indicating that the element expands some content.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In practice, it should always be defined:
https://github.com/mui-org/material-ui/blob/64013d6c817b3c9bf2bd006aee2ac3f4a948a01f/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js#L134-L137
However, we can't used .isRequired because it depends on the clone element method.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are we arguing whether we should put this in? Why not be safe and always have it as a boolean. It's explicit, helps test. Could you elaborate what the downsides are here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What I'm saying is that we can be "smart" about it, "smart" in the sense that the logic assumes more context. I'm showing an alternative viable option. I'm not saying it's better. We know that in practice, the Boolean() will be equivalent to an identity function, so it's not a requirement.
It's explicit, helps test.
I believe the tests could always provide a boolean value if we want to match reality. We could also add a warning in the render method.
So now, what's best? I would go for reducing the entropy: add a runtime warning / throw if expanded is undefined. It's one less case to consider, no defensive checks etc. (It's not a really important matter, pick what you think is best)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You're right. I'm removing this. I think it might be a better idea to move those controlled props into context anyway. Gets rid of cloneElement, allows a fragment as a child and we can improve the DX by setting the default value of expanded to a boolean. That's for another PR though
|
lol… |
aria-hidden,visibilityis a better alternativearia-expandedinExpansionPanelSummary.aria-expanded={undefined}will not appear in the DOMAlso in this PR: It's not
vibilityorvisiblity. It'svisibility.