spectrum-web-components
spectrum-web-components copied to clipboard
adobe
fix(help-text): apply aria-live to ensure full help text is read to user
Description
Use aria-live="assertive" to ensure the Help Text content (when changing) has higher screen reader priority than Textfield input.
Related issue(s)
- fixes #3377
How has this been tested?
- [ ] Test case 1
- Go here
- Turn on your screen reader
- Focus the
Stay "Positive"text field - Type or delete anything and then keep typing
- Ensure that the screen reader reads ALL of the updated help text when moving on and off of the value
Positive
Types of changes
- [x] Bug fix (non-breaking change which fixes an issue)
Checklist
- [x] I have signed the Adobe Open Source CLA.
- [x] My code follows the code style of this project.
- [ ] 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.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
- [x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Branch preview
Visual regression test results
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- High Contrast Mode | Medium | LTR
- Spectrum | Lightest | Medium | LTR
- Spectrum | Lightest | Medium | RTL
- Spectrum | Lightest | Large | LTR
- Spectrum | Lightest | Large | RTL
- Spectrum | Light | Medium | LTR
- Spectrum | Light | Medium | RTL
- Spectrum | Light | Large | LTR
- Spectrum | Light | Large | RTL
- Spectrum | Dark | Medium | LTR
- Spectrum | Dark | Medium | RTL
- Spectrum | Dark | Large | LTR
- Spectrum | Dark | Large | RTL
- Spectrum | Darkest | Medium | LTR
- Spectrum | Darkest | Medium | RTL
- Spectrum | Darkest | Large | LTR
- Spectrum | Darkest | Large | RTL
- Express | Lightest | Medium | LTR
- Express | Lightest | Medium | RTL
- Express | Lightest | Large | LTR
- Express | Lightest | Large | RTL
- Express | Light | Medium | LTR
- Express | Light | Medium | RTL
- Express | Light | Large | LTR
- Express | Light | Large | RTL
- Express | Dark | Medium | LTR
- Express | Dark | Medium | RTL
- Express | Dark | Large | LTR
- Express | Dark | Large | RTL
- Express | Darkest | Medium | LTR
- Express | Darkest | Medium | RTL
- Express | Darkest | Large | LTR
- Express | Darkest | Large | RTL
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Light | Medium | RTL
- Spectrum-two | Light | Large | LTR
- Spectrum-two | Light | Large | RTL
- Spectrum-two | Dark | Medium | LTR
- Spectrum-two | Dark | Medium | RTL
- Spectrum-two | Dark | Large | LTR
- Spectrum-two | Dark | Large | RTL
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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 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.627 kB | 211.707 kB 🏆 | 212.242 kB |
| Scripts | 55.04 kB | 49.619 kB 🏆 | 49.857 kB |
| Stylesheet | 34.654 kB | 30.097 kB 🏆 | 30.356 kB |
| Document | 6.143 kB | 5.385 kB | 5.335 kB 🏆 |
| Font | 126.79 kB | 126.606 kB 🏆 | 126.694 kB |
Request Count
| Category | Latest | Main | Branch |
|---|---|---|---|
| Total | 48 | 48 | 48 |
| Scripts | 40 | 40 | 40 |
| Stylesheet | 5 | 5 | 5 |
| Document | 1 | 1 | 1 |
| Font | 2 | 2 | 2 |
Tachometer results
Chrome
color-field permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 500 kB | 41.22ms - 42.93ms | - | faster ✔ 2% - 9% 0.91ms - 3.87ms |
| branch | 477 kB | 43.25ms - 45.67ms | slower ❌ 2% - 9% 0.91ms - 3.87ms |
- |
combobox permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 728 kB | 34.88ms - 35.41ms | - | faster ✔ 5% - 7% 1.93ms - 2.67ms |
| branch | 704 kB | 37.18ms - 37.71ms | slower ❌ 5% - 8% 1.93ms - 2.67ms |
- |
light-dom-test permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 728 kB | 378.17ms - 384.46ms | - | faster ✔ 3% - 5% 11.23ms - 20.20ms |
| branch | 704 kB | 393.83ms - 400.23ms | slower ❌ 3% - 5% 11.23ms - 20.20ms |
- |
field-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 434 kB | 43.01ms - 44.01ms | - | faster ✔ 2% - 7% 0.95ms - 3.16ms |
| branch | 411 kB | 44.58ms - 46.55ms | slower ❌ 2% - 7% 0.95ms - 3.16ms |
- |
help-text permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 399 kB | 9.90ms - 10.04ms | - | faster ✔ 2% - 7% 0.24ms - 0.73ms |
| branch | 377 kB | 10.22ms - 10.69ms | slower ❌ 2% - 7% 0.24ms - 0.73ms |
- |
number-field permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 537 kB | 64.69ms - 66.48ms | - | faster ✔ 10% - 13% 6.96ms - 9.65ms |
| branch | 514 kB | 72.89ms - 74.89ms | slower ❌ 10% - 15% 6.96ms - 9.65ms |
- |
radio permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 419 kB | 34.50ms - 35.44ms | - | faster ✔ 2% - 6% 0.85ms - 2.16ms |
| branch | 396 kB | 36.02ms - 36.92ms | slower ❌ 2% - 6% 0.85ms - 2.16ms |
- |
search permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 38.59ms - 39.27ms | - | faster ✔ 4% - 7% 1.66ms - 2.70ms |
| branch | 462 kB | 40.71ms - 41.51ms | slower ❌ 4% - 7% 1.66ms - 2.70ms |
- |
slider permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 493 kB | 75.58ms - 77.42ms | - | faster ✔ 3% - 7% 1.96ms - 5.31ms |
| branch | 470 kB | 78.73ms - 81.53ms | slower ❌ 3% - 7% 1.96ms - 5.31ms |
- |
textfield permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 445 kB | 24.04ms - 24.67ms | - | faster ✔ 8% - 12% 2.22ms - 3.23ms |
| branch | 423 kB | 26.68ms - 27.48ms | slower ❌ 9% - 13% 2.22ms - 3.23ms |
- |
Firefox
color-field permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 508 kB | 80.92ms - 84.00ms | - | unsure 🔍 -4% - +1% -3.09ms - +0.73ms |
| branch | 485 kB | 82.50ms - 84.78ms | unsure 🔍 -1% - +4% -0.73ms - +3.09ms |
- |
combobox permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 728 kB | 61.09ms - 62.15ms | - | faster ✔ 2% - 5% 1.53ms - 3.47ms |
| branch | 704 kB | 63.31ms - 64.93ms | slower ❌ 2% - 6% 1.53ms - 3.47ms |
- |
light-dom-test permalink
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 728 kB | 779.72ms - 800.16ms | - | slower ❌ 4% - 9% 32.38ms - 64.02ms |
| branch | 704 kB | 729.67ms - 753.81ms | faster ✔ 4% - 8% 32.38ms - 64.02ms |
- |
field-group permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 434 kB | 102.38ms - 110.98ms | - | unsure 🔍 -8% - +3% -8.81ms - +3.53ms |
| branch | 411 kB | 104.89ms - 113.75ms | unsure 🔍 -3% - +8% -3.53ms - +8.81ms |
- |
help-text permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 399 kB | 22.12ms - 23.68ms | - | unsure 🔍 -8% - +3% -1.95ms - +0.71ms |
| branch | 377 kB | 22.44ms - 24.60ms | unsure 🔍 -3% - +9% -0.71ms - +1.95ms |
- |
number-field permalink
basic-test
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 537 kB | 152.73ms - 158.99ms | - | faster ✔ 6% - 11% 10.72ms - 19.80ms |
| branch | 514 kB | 167.83ms - 174.41ms | slower ❌ 7% - 13% 10.72ms - 19.80ms |
- |
radio permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 419 kB | 78.71ms - 83.97ms | - | unsure 🔍 -6% - +3% -5.41ms - +2.25ms |
| branch | 396 kB | 80.13ms - 85.71ms | unsure 🔍 -3% - +7% -2.25ms - +5.41ms |
- |
search permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 485 kB | 81.56ms - 86.40ms | - | faster ✔ 2% - 10% 1.53ms - 9.31ms |
| branch | 462 kB | 86.36ms - 92.44ms | slower ❌ 2% - 11% 1.53ms - 9.31ms |
- |
slider permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 493 kB | 163.08ms - 172.20ms | - | unsure 🔍 -6% - +2% -9.60ms - +2.64ms |
| branch | 470 kB | 167.03ms - 175.21ms | unsure 🔍 -2% - +6% -2.64ms - +9.60ms |
- |
textfield permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 445 kB | 48.43ms - 52.21ms | - | faster ✔ 5% - 16% 2.58ms - 9.42ms |
| branch | 423 kB | 53.47ms - 59.17ms | slower ❌ 5% - 19% 2.58ms - 9.42ms |
- |
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):
- Test
- More content available, You are currently on a text field.
- (Tab off, then on)
- Test, text contents selected, invalid data, edit.
