fix(fluid-form-field): associate errors and help text with the input [sc-218609] - #194
Open
mnutt wants to merge 1 commit into
Open
fix(fluid-form-field): associate errors and help text with the input [sc-218609]#194mnutt wants to merge 1 commit into
mnutt wants to merge 1 commit into
Conversation
The field associated its label but rendered help text, errors and warnings with no aria-describedby and no aria-invalid, so a rejected field conveyed the reason by red text alone and a screen reader user reaching it heard only the label. Give each description an id, point the input at whichever exist, and mark the input invalid when there are errors. describedBy is undefined when there is nothing to describe so the reference is never left dangling, and warnings do not set aria-invalid because a warning is not a rejection.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
FluidFormFieldis the canonical form component across our Ember apps. It already associates the label with the input (<label for={{this.id}}>), but it rendered help text, error messages, and warning messages with noaria-describedbyand noaria-invalid.The result: when a field is rejected, the reason is conveyed only by red text and a red border. A screen reader user tabbing to the field hears the label and nothing else — they are told to fix an error they were never given. That fails WCAG 3.3.1 Error Identification.
Because this is upstream in
@movable/fluid, fixing it here fixes every consuming app at once, the same way thearia-modalfix in #190 did.Fix
FluidFormFieldnow derives an id for each description it renders (-help-text,-error-messages,-warning-messages) and adescribedBygetter that joins only the ones actually present, in visual order. That is threaded to the yielded input alongside the existinghasError, and the controls render:aria-describedby— on the<input>and on theFluidDateInputcalendar triggeraria-invalid="true"— driven by the existinghasError, no new plumbing neededBoth sit before
...attributes, so consumers can still override them.Two deliberate details:
describedByisundefinedwhen there is nothing to describe, so a field with no messages emits noaria-describedbyrather than pointing at an element that was never rendered — the same dangling-reference bug thearia-labelledbyhalf of fix(a11y): aria-modal, keyboard-operable ExpandingList, and focus rings [sc-217428] #190 addressed.aria-invalidkeys off errors only, not warnings. A warning is not a rejection, and marking the field invalid would misreport it.Covers all three render paths:
<f.Text />, block mode (<f.Text as |t|><t.input /></f.Text>, used for icons and add-ons), and<f.Date />.Out of scope
No
role="alert"or live region on the error list. Errors are announced when focus reaches the field, but not at the moment they appear after a failed submit. That is a real remaining gap, but it is a different change — it risks double-announcement when combined witharia-describedby— and it belongs with the canvas-side work onModalError, page-level banners, andvalidation-field.That canvas remainder (~45 ad-hoc error sites) is only worth scoping once this lands, since
FluidFormFieldwill absorb the well-structured forms and leave a smaller, mixed set behind.Testing
setting the initial focusin fluid-modal) / 0 faillint-hbsandlint-jscleanReviewer notes
No API change for consumers —
FluidFormFieldcallers get the wiring for free.@describedByis new onFluidTextInput,FluidTextInput::Input, andFluidDateInput, but it is additive and optional.