fix(swatch): sync `aria-label` with changes in label, color, and mixed …

Rocss commented 1 month ago

…state

Right now sp-swatch has some accessibility bugs:

For mixed state, there is an accessibility error thrown because of the use of aria-checked="mixed" on an element with role=button.
On color change, the aria-label is not in sync with it and it has the old color value.

Description

Synced aria-label with changes in color, when there's no label provided
Removed the use of aria-checked="mixed", as the mixed state in this case is more of a value, I moved this information in the aria-label attribute.

Related issue(s)

https://github.com/adobe/spectrum-web-components/issues/4518

Motivation and context

Screen reader accessibility

How has this been tested?

[ ] Test case 1
1. Go here
2. Open the "Accessibility" add-on
3. We should see "0 Violations"
4. Inspect the element and observe aria-label="Mixed". This is the default accessible label in case the user does not provide one.
[ ] Test case 2
1. Go here
2. Change the color of the Swatch
3. Observe that the aria-label attribute is changed too to reflect the selected color

Screenshots (if appropriate)

Types of changes

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

[x] I have signed the Adobe Open Source CLA.
[x] My code follows the code style of this project.
[x] If my change required a change to the documentation, I have updated the documentation in this pull request.
[x] I have read the CONTRIBUTING document.
[x] I have added tests to cover my changes.
[ ] All new and existing tests passed.
[x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

github-actions[bot] commented 1 month ago

Branch preview

Visual regression test results

github-actions[bot] commented 1 month ago

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.99
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

[Lighthouse](https://github.com/GoogleChrome/lighthouse) scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but *note that the SEO scores on Netlify URLs are artifically constrained to 0.92.*

Transfer Size

Category	Latest	Main	Branch
Total	222.529 kB	210.913 kB	210.825 kB 🏆
Scripts	54.712 kB	48.571 kB	48.424 kB 🏆
Stylesheet	34.914 kB	30.434 kB 🏆	30.48 kB
Document	5.998 kB	5.267 kB	5.266 kB 🏆
Font	126.905 kB	126.641 kB 🏆	126.655 kB

Request Count

Category	Latest	Main	Branch
Total	45	45	45
Scripts	37	37	37
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

github-actions[bot] commented 1 month ago

Tachometer results

Chrome

## swatch [_permalink_](#user-content-swatch) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 407 kB | 13.43ms - 13.68ms | - | faster ✔
9% - 13%
1.31ms - 1.95ms | | branch | 395 kB | 14.90ms - 15.48ms | slower ❌
10% - 14%
1.31ms - 1.95ms | - |

Firefox

## swatch [_permalink_](#user-content-swatch) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 407 kB | 33.12ms - 36.32ms | - | unsure 🔍
-9% - +4%
-3.13ms - +1.33ms | | branch | 395 kB | 34.07ms - 37.17ms | unsure 🔍
-4% - +9%
-1.33ms - +3.13ms | - |

adobe / spectrum-web-components