Fix description text not read on hover by NVDA and other FormFieldLayout bugs#1863
Fix description text not read on hover by NVDA and other FormFieldLayout bugs#1863
FormFieldLayout bugs#1863Conversation
|
matyasf
changed the title
matyasf
changed the title
matyasf
force-pushed
the
fix_form_aria
branch
from
fd7ef01 to
6315fcb
Compare
| </FormFieldLayout> | ||
| ) | ||
|
|
||
| cy.get('span[class$="-formFieldLabel"]') |
There was a problem hiding this comment.
For tests likely this will be most of the change
| <FormField id="_foo123" label="Opacity" width="200px"> | ||
| <input style={{display: 'block', width: '100%'}} id="_foo123"/> | ||
| </FormField> | ||
| <div> |
There was a problem hiding this comment.
I've added here a more complex example that we can use to test this PR
| label={this.props.label} | ||
| vAlign={this.props.vAlign} | ||
| as="label" | ||
| htmlFor={this.props.id} |
There was a problem hiding this comment.
This is not needed because the labels child is the control, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#defining_an_implicit_label
There was a problem hiding this comment.
EDIT 2 weeks later: we should not do this, it will bring the last leaf on the focus causing issues with e.g. multiple select
matyasf
changed the title
Focusable bugs
matyasf
force-pushed
the
fix_form_aria
branch
from
056d025 to
2afd55e
Compare
matyasf
changed the title
Focusable bugsFormFieldLayout bugs
matyasf
force-pushed
the
fix_form_aria
branch
from
166c30a to
b2423e1
Compare
ToMESSKa
left a comment
ToMESSKa
left a comment
There was a problem hiding this comment.
DateTimeInput error messages are not read by VoiceOver for me
This is a tricky one. it worked in the old code because it had a hidden I tried to implement a nice, no-hacks solution here. That is to use I'll show this to our a11y engineers and let them decide |
matyasf
force-pushed
the
fix_form_aria
branch
from
cbd19a9 to
e4e9b9a
Compare
…yout issues This commit fixes the following: - Form labels not read in NVDA hover - FormFieldMessage was right aligned in inline layouts - When layout=inline and inline=true the messages are now not spanning the whole bottom area - When using the new error type and its a group the errors will be above the controls as per design requirements Fixes INSTUI-4444
matyasf
force-pushed
the
fix_form_aria
branch
from
e4e9b9a to
5268a79
Compare
3 participants
The issue was that NVDA hover mode was not reading form labels because they were set to
aria-hidden.This was needed because screen readers only read the
<legend>tag if its the first child of the<fieldset>, so the visible label was added witharia-hiddenand another inivisible one was added as a first child.This PR refactors mainly the
FormFieldLayoutcomponent, so it uses now CSSgrid, so its possible to have the<legend>as the first child of the<fieldset>.To test:
Visual bugs fixed:
formFieldMessagewas right aligned in inline layouts (see https://instructure.design/pr-preview/pr-1863/#FormField )layout=inlineandinline=truethe messages were spanning the whole bottom area. I assumed that this is a bug, now they look like other messages and are displayed only under the controlCloses: INSTUI-4444