fix(help-text): apply aria-live to ensure full help text is read to user #4210
Conversation
This file contains 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
Lighthouse scores
What is this?Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on Transfer Size
Request Count
|
Tachometer resultsChromecolor-field permalinkbasic-test
combobox permalinkbasic-test
light-dom-test permalink
field-group permalinkbasic-test
help-text permalinkbasic-test
number-field permalinkbasic-test
radio permalinktest-basic
search permalinktest-basic
slider permalinktest-basic
textfield permalinktest-basic
Firefoxcolor-field permalinkbasic-test
combobox permalinkbasic-test
light-dom-test permalink
field-group permalinkbasic-test
help-text permalinkbasic-test
number-field permalinkbasic-test
radio permalinktest-basic
search permalinktest-basic
slider permalinktest-basic
textfield permalinktest-basic
|
Westbrook
force-pushed
the
assertive-help-text
branch
from
3e192e7
to
b45a997
Compare
Rajdeepc
reviewed
Mar 25, 2024
| @@ -43,7 +43,10 @@ export class HelpTextManager { | |||
| // `pass-through-help-text-${this.instanceCount}` makes the slot effectively unreachable from | |||
| // the outside allowing the `help-text` slot to be preferred while `negative === false`. | |||
| return html` | |||
| <div id=${ifDefined(this.isInternal ? this.id : undefined)}> | |||
| <div | |||
| id=${ifDefined(this.isInternal ? this.id : undefined)} | |||
There was a problem hiding this comment.
Does a truthy this.isInternal always specify that an id will be present?
There was a problem hiding this comment.
Yes it does. And, while it's technically possible that a custom element consumer would unset the value of ID, but that would be highly irregular. Without negative intent, the id as set in the constructor (note that this is a helper class and not a custom element class) would always be available for use here.
As this isn't new functionality, if there's a concern we want to address here, it would be better to track it in an issue for a later update.
|
Should I expect "Tell us how you are feeling today" and/or "Please be positive?" I get neither - instead, VoiceOver gives me (after entering "Test" into the field):
|
Westbrook
force-pushed
the
assertive-help-text
branch
from
b45a997
to
5fdd568
Compare
Westbrook
force-pushed
the
assertive-help-text
branch
from
5fdd568
to
4d6a065
Compare
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.
Description
Use
aria-live="assertive"to ensure the Help Text content (when changing) has higher screen reader priority than Textfield input.Related issue(s)
How has this been tested?
Stay "Positive"text fieldPositiveTypes of changes
Checklist