spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard
verified publisher icon adobe

[Bug]: SWC Link Component Not Keyboard Navigable in Safari

Open Rajdeepc opened this issue 6 months ago • 3 comments

Code of conduct

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

Impacted component(s)

Link

Expected behavior

Links should be focusable and keyboard accessible in all browsers

Actual behavior

Links are skipped in tab order and cannot be activated with keyboard

Environment

  • Browser: Safari (desktop and iOS)
  • OS: macOS, iOS
  • SWC Version: Latest
  • External Keyboard: Required for iOS testing

Additional Context

  • This issue specifically affects Safari/WebKit browsers
  • Chrome, Firefox, and Edge work correctly
  • The issue is more pronounced on iOS Safari with external keyboards
  • Native HTML elements work fine in the same environment

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

  1. Open Safari (desktop or iOS)
  2. Navigate to a page with SWC Link components (e.g., https://opensource.adobe.com/spectrum-web-components/components/link/)
  3. Connect an external keyboard (if testing on iOS)
  4. Try to use Tab/Shift+Tab to navigate through the links
  5. Try to use Enter or Space to activate the links

Sample code or abstract reproduction which illustrates the problem

No response

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!

Rajdeepc avatar Jun 28 '25 06:06 Rajdeepc

Is this related to the proxyClick issues we had in https://github.com/adobe/spectrum-web-components/pull/4927/files#diff-ad046dedf5a27f70e6804e4a8dc1707ce8e07deb7b87058bf94560b574189ddf and https://github.com/adobe/spectrum-web-components/pull/5031/files#diff-d6c1bef5a63290802db272d6bf262beb51675b7182fe88d7d93ceda7e32650a9

nikkimk avatar Jul 07 '25 14:07 nikkimk

@Rajdeepc do you know what the severity level is of this issue?

caseyisonit avatar Jul 07 '25 20:07 caseyisonit

@Rajdeepc @caseyisonit

This is not a bug.

Users need to enable Tab navigation in Safari Settings:

  1. Open Safari and go to Safari > Settings (or Preferences).
  2. Click on the Advanced tab.
  3. Check the box for "Press Tab to highlight each item on a webpage". This allows you to use the Tab key to navigate through all focusable items on a webpage, including links.

Also, by default links are inly activated by a Enter, not Space.

Compare this to any native link in Safari, and you'll see that it behaves similarly.

nikkimk avatar Jul 07 '25 22:07 nikkimk