-
Notifications
You must be signed in to change notification settings - Fork 191
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(swatch): mixed-value state must be conveyed to screen readers using ARIA #3330
Changes from 12 commits
c627b87
7157405
97bbbdc
9361601
5915a28
970db2a
562a502
d835675
5646c0c
e1d0c2c
1848f63
91a85d1
257e22b
8a281fe
e851fd9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -223,12 +223,19 @@ export class Swatch extends SizedMixin(Focusable, { | |
); | ||
} | ||
if (changes.has('label')) { | ||
if (this.label) { | ||
if (this.color !== '') { | ||
this.setAttribute('aria-label', this.color); | ||
} else if (this.label !== this.color && this.label?.length) { | ||
this.setAttribute('aria-label', this.label); | ||
} else { | ||
this.removeAttribute('aria-label'); | ||
} | ||
} | ||
if (changes.has('mixedValue')) { | ||
if (this.mixedValue) { | ||
this.setAttribute('aria-checked', 'mixed'); | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hey Rajdeep! Just following up on our conversation earlier today. To add a label to the
This obviously doesn't handle situations where our value would be 'mixed' or 'nothing' (since There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @najikahalsema Thanks!! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just one thing--I'd remove the comments from the code! |
||
} | ||
|
||
protected override firstUpdated(changes: PropertyValues): void { | ||
|
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.
I think you placed this logic in the wrong order and it's what's causing the test failures in CI right now. Can you take a look at those?
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.
Should be good now except for the fact that few NumberFields tests are failing. Switching the order of if else did the trick!
Thanks