[docs-infra] Fix missing button aria-label #40394
Conversation
oliviertassinari
added
bug 🐛
Netlify deploy previewhttps://deploy-preview-40394--material-ui.netlify.app/ Bundle size report |
oliviertassinari
force-pushed
the
fix-aria-label
branch
from
87a9dd7
to
ad08576
Compare
oliviertassinari
force-pushed
the
fix-aria-label
branch
from
ad08576
to
4f42e4b
Compare
| @@ -228,6 +227,7 @@ function ApiItem(props: ApiItemProps) { | |||
| <IconButton | |||
| onClick={() => setIsExtended((prev) => !prev)} | |||
| className="MuiApi-expend-button" | |||
| aria-label={isExtended ? 'Collapse' : 'Expand'} | |||
There was a problem hiding this comment.
The fix.
The rest is to sync the code with the baseline convention.
| export const getHash = ({ componentName, className }: HashParams) => | ||
| `${componentName ? `${componentName}-` : ''}classes-${className}`; | ||
| export function getHash({ componentName, className }: HashParams) { | ||
| return `${componentName ? `${componentName}-` : ''}classes-${className}`; |
There was a problem hiding this comment.
I'm not sure about this logic.
It feels weird when reading https://mui.com/material-ui/api/dialog/#Dialog-classes-paper.
I think https://mui.com/material-ui/api/dialog/#.MuiDialog-paper would be for the best DX.
There was a problem hiding this comment.
I wrote it with the goal of having unique id in mind. So I went with the strategy:
id = [componentName]-[listType]-[lineName]
The extreme case is the base API pages where multiple components are documented in a single web page. Here for example are two instance of .Mui-expanded in the same page:
https://mui.com/base-ui/react-menu/components-api/#MenuButton-classes-expanded
https://mui.com/base-ui/react-menu/components-api/#Menu-classes-expanded
Make me realise the navigation is broken for css classes
There was a problem hiding this comment.
Ah right, I forgot about these global class names 🤦♂️, they are not unique.
Make me realise the navigation is broken for css classes
I saw the same thing, fixed in #40395
oliviertassinari
changed the title
| export const getHash = ({ componentName, className }: HashParams) => | ||
| `${componentName ? `${componentName}-` : ''}classes-${className}`; | ||
| export function getHash({ componentName, className }: HashParams) { | ||
| return `${componentName ? `${componentName}-` : ''}classes-${className}`; |
There was a problem hiding this comment.
I wrote it with the goal of having unique id in mind. So I went with the strategy:
id = [componentName]-[listType]-[lineName]
The extreme case is the base API pages where multiple components are documented in a single web page. Here for example are two instance of .Mui-expanded in the same page:
https://mui.com/base-ui/react-menu/components-api/#MenuButton-classes-expanded
https://mui.com/base-ui/react-menu/components-api/#Menu-classes-expanded
Make me realise the navigation is broken for css classes
Fix a small issue reported in https://pagespeed.web.dev/analysis/https-mui-com-base-ui-react-popper-components-api/enf7e9ejj5?form_factor=desktop