-
Notifications
You must be signed in to change notification settings - Fork 211
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(help-text): apply aria-live to ensure full help text is read to user #4210
Conversation
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
|
3e192e7
to
b45a997
Compare
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does a truthy this.isInternal
always specify that an id
will be present?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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):
|
b45a997
to
5fdd568
Compare
5fdd568
to
4d6a065
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It worked, but we should have some examples of how to use it accessibly in the docs.
@nikkimk Would you like to take this up and complete this? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More docs will be added with #4652 so lgtm
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks very clean now and helpful! Let me know when it will be ready for review. Thanks
Pull Request Test Coverage Report for Build 11405330661Details
💛 - Coveralls |
@Rajdeepc ready for review |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work!
…ser (#4210) * fix(help-text): apply aria-live to ensure full help text is read to user * docs(help-text): added accessible context to examples * docs(help-text): updated help-text docs to include accessibility information --------- Co-authored-by: Nikki Massaro <[email protected]> Co-authored-by: Nikki Massaro <[email protected]>
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 fieldPositive
Types of changes
Checklist