Skip to content

fix(link): fixes keyboard focus shift by changing padding to outline-offset#3861

Merged
cdransf merged 1 commit into
spectrum-twofrom
cdransf/s2-link-focus-fix
May 28, 2025
Merged

fix(link): fixes keyboard focus shift by changing padding to outline-offset#3861
cdransf merged 1 commit into
spectrum-twofrom
cdransf/s2-link-focus-fix

Conversation

@cdransf
Copy link
Copy Markdown
Member

@cdransf cdransf commented May 28, 2025

Description

The previous implementation with padding would cause the component to shift when focused using the keyboard. Replacing padding with outline-offset resolves this issue.

How and where has this been tested?

Verified locally in Storybook.

Validation steps

  1. Open the deployment link for this PR.
  2. Navigate to the link component docs page.
  3. Focus the link component using your keyboard.
  4. Verify that the focused link state no longer causes a layout shift.

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

@cdransf cdransf self-assigned this May 28, 2025
@cdransf cdransf added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels May 28, 2025
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 28, 2025

🦋 Changeset detected

Latest commit: 67f7e72

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@spectrum-css/link Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 28, 2025

🚀 Deployed on https://pr-3861--spectrum-css.netlify.app

@github-actions
Copy link
Copy Markdown
Contributor

File metrics

Summary

Total size: 1.42 MB*

Package Size Minified Gzipped
link 5.04 KB 4.79 KB 1.14 KB

link

Filename Head Minified Gzipped Compared to base
index.css 5.04 KB 4.79 KB 1.14 KB 🔴 ⬆ 0.01 KB
metadata.json 2.67 KB - - -
* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

Copy link
Copy Markdown
Contributor

@aramos-adobe aramos-adobe left a comment

Choose a reason for hiding this comment

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

Tested it on other components:

  • Accordion
  • Inline Alert
  • Contextual Help
  • Well

No more layout shifts ⭐️ great use of outline-offset

Copy link
Copy Markdown
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

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

Thanks for tracking this down! The 4 components Aziz mentioned were the only ones (besides the Link docs page) that seemed to use the link component, so I tested those as well.

@@ -0,0 +1,5 @@
---
"@spectrum-css/link": minor
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Personally, I'd probably just call this a patch, since we categorized it as bug. I'll leave it up to you though.

@cdransf cdransf merged commit 911a7cf into spectrum-two May 28, 2025
20 of 22 checks passed
@cdransf cdransf deleted the cdransf/s2-link-focus-fix branch May 28, 2025 22:02
@castastrophe castastrophe mentioned this pull request Aug 6, 2025
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready-for-review size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. skip_vrt Add to a PR to skip running VRT (but still pass the action)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants