feat(input-file): add status messages for screenreader users#2682
feat(input-file): add status messages for screenreader users#2682gerjanvangeest wants to merge 1 commit intomasterfrom
Conversation
gerjanvangeest
requested review from
Knorgias,
narzac,
okadurin,
ryubro and
tlouisse
as code owners
🦋 Changeset detectedLatest commit: bf93cff The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| if (outputElement) { | ||
| this.timer = setTimeout(() => { | ||
| if (outputElement.parentNode) { | ||
| this._statusMessage = nothing; |
There was a problem hiding this comment.
I know this component doesn't really comply with our form-controls, but did we explore the possibility of connecting it with the feedback mechanism we have in the ValidateMixin?
There was a problem hiding this comment.
The InputFile has validation messaging in place. This serves only of a different goal.
These are messages for screen readers, to inform them about the status. Therefore we use the output element (which works like an automatic aria-live region), place the messages and remove them again afterwards.
The same thing we do inside the input-stepper.
There was a problem hiding this comment.
The ValidateMixin handles all types of vaidations/feedback (error,warning,success,info etc.).
- from a consumer perspective, it allows control of the UX (supply visibility conditions)
- instead of having aria-live functionality, it's a bit more nuanced: https://github.com/ing-bank/lion/blob/master/packages/ui/components/form-core/test/FormControlMixin.test.js#L310
- in order for aria-live functionality to work, we need to create an idref in the same dom (the input is in light dom now, the output is in shadow dom). Current code will not work
gerjanvangeest
force-pushed
the
feat/input-file-statusMessage
branch
from
42ca3a2 to
bf93cff
Compare
3 participants
What I did