chore(progress-bar): handles focus and keyboard input

Rajdeepc commented 1 month ago

Description

Updated tabindex=0 on firstUpdated lifecycle to attach a tab stop to the element so that it can be picked up by the screen readers.

Related issue(s)

-

Motivation and context

How has this been tested?

[x] Storybook
1. Go here
2. Click on the storybook frame
3. Press Tab
4. Check the ProgressBar is focused

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.
[ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
[ ] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[ ] All new and existing tests passed.
[ ] 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.121 kB	210.954 kB	210.847 kB 🏆
Scripts	54.10 kB	48.583 kB	48.473 kB 🏆
Stylesheet	35.028 kB	30.48 kB	30.478 kB 🏆
Document	5.977 kB	5.259 kB	5.255 kB 🏆
Font	127.016 kB	126.632 kB 🏆	126.641 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

## progress-bar [_permalink_](#user-content-progress-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 407 kB | 29.91ms - 31.03ms | - | faster ✔
0% - 5%
0.09ms - 1.58ms | | branch | 395 kB | 30.82ms - 31.80ms | slower ❌
0% - 5%
0.09ms - 1.58ms | - |

Firefox

## progress-bar [_permalink_](#user-content-progress-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 407 kB | 62.40ms - 66.28ms | - | unsure 🔍
-7% - +1%
-4.87ms - +0.67ms | | branch | 395 kB | 64.46ms - 68.42ms | unsure 🔍
-1% - +8%
-0.67ms - +4.87ms | - |

blunteshwar commented 1 month ago

Can you also add a relevant test for this.

blunteshwar commented 1 month ago

I noticed that some sections of this PR are not fully completed. Could you please fill out all the necessary details and ensure that everything is properly documented?

nikkimk commented 1 month ago

What would be the use case to make a progressbar focusable given that progressbars are not interactive, and that aria-busy and aria-live are better ways to communicate updates to the element?

Rajdeepc commented 1 month ago

Closing this since aria-live should take care of this! https://www.magentaa11y.com/checklist-web/progress/

adobe / spectrum-web-components