bigskysoftware / bigskysoftware/missing

Styling `:focus-within` on `<details>`

Open Beginner friendly
#171 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.