bigskysoftware / bigskysoftware/missing
Styling `:focus-within` on `<details>`
Open
Beginner friendly
visual
- Dominant language
- CSS
- Stars
- 798
- Forks
- 29
- PR merge metrics
- No merged PRs in 30d
Description
Currently tabbing to a `` does not show the usual `:focus-within` outline (technically, tabbing to the ``)
This could be fixed with
```
details:has(summary:focus-within) {
border-color: var(--accent);
outline: .2em solid var(--accent);
}
```
Contributor guide
Research direction
Use the issue's details:has(summary:focus-within) selector as the entry point and locate the existing and styles. Test keyboard focus on a in a browser, then confirm that the details element shows the accent border and outline while its summary is focused.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100