ECHOES-568 Migration Fixes #257
Conversation
hashicorp-vault-sonar-prod
bot
changed the title
✅ Deploy Preview for echoes-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
| label={label} | ||
| labelProps={{ | ||
| // We no longer use Mantine's InputLabel component. However, if we | ||
| // do not pass a `label` prop to the Select component, Mantine will | ||
| // render an `aria-label` on the OptionsDropdown component. This | ||
| // causes the input and the dropdown to have the same label, which | ||
| // is problematic for accessibility. | ||
| labelElement: Null, | ||
| }} |
There was a problem hiding this comment.
Looking at the DOM, I can see that the dropdown as an aria-labelledBy that now points to a nonexisting label id:
Should we actually add that id to our label? From what I can see on our previous implem this aria-labelledBy was correctly pointing to the mantine label, see:
There was a problem hiding this comment.
I think if we did that we would have the same issue, that 2 elements have the same label (the input and the dropdown). I'm a little confused how the the dropdown component is even getting that label id 🤔. It's just adding the -label suffix to the id here.
There was a problem hiding this comment.
It's probably inferring it from the parent element id we are passing
There was a problem hiding this comment.
In this example on MDN, the input and dropdown have different labels. The input as an aria-controls that points to the id of the drop-down menu.
However, on https://echoes-react.netlify.app/?path=/story/echoes-select-select--default, the input's aria-controls does not match the id of the drop-down element, but in your screenshot it does? 🤔
What I can take away from this:
- The input should have an
aria-controlsthat points to theidof the drop-down menu. - The input and drop-down should have different labels.
Neither of these seem correct in Mantine on my end.
There was a problem hiding this comment.
The aria-controls changes once you open the drop-down menu. But it is incorrect until the drop-dowm menu opens.
There was a problem hiding this comment.
Ok, so given what you are saying, we want to keep the labelElement: Null to avoid having duplicate labels.
There was a problem hiding this comment.
Regarding the aria-controls situation, this is weird. When looking at Mantine documentation, they actually don't provide the aria-controls when the dropdown isn't open.
There was a problem hiding this comment.
Ok, so given what you are saying, we want to keep the labelElement: Null to avoid having duplicate labels.
Yeah, I'm not seeing any way to provide a different label for the drop-down menu element in the source code. In that case do you think this change is acceptable?
ECHOES-568
There are a bunch of tests failing in the product because Mantine is adding the same label to the input element and option dropdown wrapper element.