[Bug]: sp-action-group sets z-index on focused button

[dialupdev]

Code of conduct

• [x] I agree to follow this project's code of conduct.

Impacted component(s)

sp-action-group

Library version

1.7.0

Expected behavior

Any sp-action-button components within an sp-action-group should not have their z-index modified.

Actual behavior

Focused sp-action-button components within an sp-action-group have a modified z-index of 3.

Screenshots

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to https://stackblitz.com/edit/vitejs-vite-a9znncub
2. Use keyboard navigation to focus one of the buttons
3. Scroll down
4. Observe that the focused button overlaps the sticky header

Sample code or abstract reproduction which illustrates the problem

I've found the problematic code here: https://github.com/adobe/spectrum-web-components/blob/main/packages/action-group/src/spectrum-action-group.css#L43

The fix is simple - remove this line. But I wanted to open this issue first since I don't understand why the code is there in the first place.

Severity

None

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• [ ] Yes, please tell me the ticket number!

[rise-erpelding]

We should be able to remove the z-index in that line mentioned!

The reason why the z-indexes are applied to the action buttons in the action group is because they're needed for the compact variant. In the compact variant, the action buttons overlap each other and share borders, so we need that stacking order in the compact variant to keep the focus ring on top, otherwise it might look something like this: