ampproject / ampproject/amphtml
Accordion's animate removes the outline
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
.focusOutline:focus-visible {
outline: 3px solid green;
outline-offset:5px;
z-index:99;
}
I have added Outline:focus-visible and animate to the accordion. During the animation/transition the outline outside of the accordion disappears.
https://codepen.io/wilson-ruan/pen/yLjwyNO
### Reproduction Steps
Keyboard tab into the header and hit enter.
### Relevant Logs
```shell
.focusOutline:focus-visible {
outline: 3px solid green;
outline-offset:5px;
z-index:99;
}
```
### Browser(s) Affected
_No response_
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start with the linked CodePen reproduction and inspect the accordion's focus and animation behavior. Reproduce it by keyboard-tabbing to the header and pressing Enter, then trace the related accordion implementation and tests if available. Done means the focus-visible outline remains visible outside the accordion throughout the animation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100