ampproject / ampproject/amphtml

Accordion's animate removes the outline

Open
#38,496 1 comment 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug WG: components
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.