Conversation
|
Visual regression reportCypress suite: ✅ Passing Visual diff: ✅ No changes.
Accessibility (axe): ✅ No violations. 📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches. Baselines come from the |
| beforeEach(async () => { | ||
| await commands.resetMouse() | ||
| }) | ||
|
|
There was a problem hiding this comment.
unrelated test fix. the mouse is now in a different position due to new tests, these tests were passing accidentally because the mouse was left at a 'good' spot by previous test
| get hasMessages() { | ||
| return this.props.messages && this.props.messages.length > 0 | ||
| } |
There was a problem hiding this comment.
This was a common pattern. Controls need to use aria-describedby for their messages, so they need to know whether there are any.
This is now much simpler since its a parameter for their children (see below)
| * id for the label element. Useful when the control is not a labelable | ||
| * element (e.g. a custom widget), and needs to reference the label via | ||
| * `aria-labelledby`. | ||
| */ | ||
| labelId?: string |
There was a problem hiding this comment.
This is no longer used anywhere. Kept it to not introduce a breaking change
| * Not used when rendering as a `fieldset` (group) | ||
| */ | ||
| id?: string | ||
| id: string |
There was a problem hiding this comment.
This became mandatory. While this is technically a breaking change, its an internal component that I dont expect that anyone uses. Also keeping this optional would be a source of nasty bugs
ab2e75e to
3e87b7a
Compare
3e87b7a to
5a79918
Compare
Previously FormFieldLayout wrapped the label text, the control, and the messages in one
`<label>`, so screen readers read the messages and any before/after content as part of the
control's accessible name. Only the label text sits in the `<label>` now, linked to the control
by `for`, and the messages reach the control through `aria-describedby` via the new
`{ describedBy }` children render function.
The wrapping label also focused the control when someone clicked an icon or the padding around
it. FormFieldLayout forwards those clicks by hand to keep that behavior.
Fixes INSTUI-5205
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The mouse keeps its position across test files. When an earlier file left it where ColorPreset renders its second row of indicators, that indicator's tooltip opened over the first row, and the click on the indicator above it timed out. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
5a79918 to
9cbd883
Compare
| /** | ||
| * id for the label. If empty, it's auto generated | ||
| * id for the label element. If empty, it's auto generated. | ||
| * useful if you use `aria-labelledby={labelId}` to label something with the | ||
| * label element. | ||
| */ | ||
| labelId?: string |
There was a problem hiding this comment.
This is actually no longer needed, I just did not want to take it out because it's be a breaking change. It was added recently, by #2730
This branch has not been deployed
1 participant
Summary
divand puts only the label text in a<label for={id}>, so messages and before/after content stay out of the control's accessible name (see the JIRA ticket and Slack discussions)aria-describedbyvia a new{ describedBy }children render function on FormField, FormFieldLayout, and FormFieldGroup. This means that TextInput, TextArea, NumberInput, RangeInput, DateInput, RadioInputGroup, and CheckboxGroup v2 use the render function instead of their own messages/label id wiringTest Plan
Fixes INSTUI-5205
🤖 Generated with Claude Code