adobe / adobe/spectrum-web-components
[Bug]: focus ring was not being applied to the picker button when clicked
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] I agree to follow this project's code of conduct.
### Impacted component(s)
Picker
### Expected behavior
When a Picker is clicked, `focused` attribute would be applied to the `sp-picker` component and the component should show the focus ring.
When tabbed to the component the focused state and the focus ring applies correctly
### Actual behavior
When a Picker is clicked, `focused` attribute is not applied on `sp-picker`
### Screenshots
### What browsers are you seeing the problem in?
Firefox, Chrome, Safari, Microsoft Edge
### How can we reproduce this issue?
1. Go to https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/picker--default
2. Click on Picker to open
3. Check no blue ring is applied on the component
### Sample code or abstract reproduction which illustrates the problem
_No response_
### Severity
SEV 4
### Logs taken while reproducing problem
_No response_
### Would you like to track this issue in Jira?
- [ ] Yes, please tell me the ticket number!
Contributor guide
Research direction
Start with the Picker default story at the linked Storybook URL and reproduce the missing focus ring by clicking the component in Firefox, Chrome, Safari, or Edge. Then locate the Picker implementation and its existing focus behavior, and verify that clicking applies the focused attribute and displays the focus ring while tabbing continues to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100