Skip to content

fix(replays): make link copy button accessible and non-variable width#115598

Merged
JoshuaKGoldberg merged 1 commit into
masterfrom
replay-copy-button-spacing
May 19, 2026
Merged

fix(replays): make link copy button accessible and non-variable width#115598
JoshuaKGoldberg merged 1 commit into
masterfrom
replay-copy-button-spacing

Conversation

@JoshuaKGoldberg
Copy link
Copy Markdown
Member

@JoshuaKGoldberg JoshuaKGoldberg commented May 14, 2026

Fixes two issues with the replay link copy button:

  • Accessibility: adds focus-within for its hover presence so non-mouse (e.g. keyboard) users can see it
  • Width: keeps it in the page but with zero opacity, so it move the Update button when hovered

Also removes an extra <Flex> container around the flex container.

image

@JoshuaKGoldberg JoshuaKGoldberg changed the title Replay copy button spacing fix(replays): make link copy button accessible and non-variable width May 14, 2026
@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 14, 2026
height: 34px;
`;

const HoverArea = styled(Flex)``;
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Question] Do we, have a better way of doing this? Note the need to ${HoverArea} a few lines later.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this is a legacy button setup before scraps 🤔

Wonder if we could use something like a transparent button here?

Tho maybe i'm not fully understanding why we're overriding the opacity like this.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a transparent button variant already :c

I'll ask in design-engineering, agreed it does feel kind of legacy/spooky...

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Booooo :/

@github-actions
Copy link
Copy Markdown
Contributor

📊 Type Coverage Diff

✅ No new type safety issues introduced. Coverage: 93.52%

@JoshuaKGoldberg JoshuaKGoldberg marked this pull request as ready for review May 14, 2026 22:59
@JoshuaKGoldberg JoshuaKGoldberg requested a review from a team as a code owner May 14, 2026 22:59
height: 34px;
`;

const HoverArea = styled(Flex)``;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this is a legacy button setup before scraps 🤔

Wonder if we could use something like a transparent button here?

Tho maybe i'm not fully understanding why we're overriding the opacity like this.

@JoshuaKGoldberg JoshuaKGoldberg merged commit 2994277 into master May 19, 2026
77 checks passed
@JoshuaKGoldberg JoshuaKGoldberg deleted the replay-copy-button-spacing branch May 19, 2026 12:26
@JoshuaKGoldberg
Copy link
Copy Markdown
Member Author

Fixed REPLAY-916 for now. I have the ask out in design-eng about copy and will probably do a followup cleanup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants