Skip to content

Conversation

@rise-erpelding
Copy link
Collaborator

@rise-erpelding rise-erpelding commented Oct 27, 2025

Description

Removes !isWebKit() conditionals from two picker tests that were skipping tab key navigation validation in Safari/WebKit browsers. These conditionals were likely added because Safari's default tab behavior only focused form controls, not all interactive elements.

Changes:

  • Removed if (!isWebKit()) wrapper from "closes when focusing away from the menu" test (line ~1088)
  • Removed if (!isWebKit()) wrapper from similar tab navigation validation (line ~1125)
  • Tab navigation validation now runs on all browsers including WebKit

Motivation and context

This addresses a reported accessibility issue where the Picker component could not be tabbed into in Safari within Storybook.

Investigation findings:

  • On macOS 26.0.1 (Tahoe)/Safari, tab navigation to the Picker works by default without requiring accessibility settings changes
  • On older macOS versions, tab navigation works when Safari's "Press Tab to highlight each item on a webpage" setting is enabled
  • Playwright's 1.53.1 (using WebKit 18.5) appears to support proper tab navigation to all focusable elements by default
  • The test skips were masking that this behavior already works correctly
  • Since Safari/WebKit now properly supports tab navigation by default, these test workarounds are no longer necessary. Removing them improves test coverage and ensures consistent behavior validation across all browsers.

Related issue(s)


Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

  • Verify picker tests pass locally:

    1. Run yarn test:focus picker
    2. Confirm all tests pass on Chromium, Firefox, and WebKit
    3. Expect no test failures, particularly in the "closes when focusing away from the menu" tests
  • Confirm that bug cannot be replicated with appropriate settings on:

    1. Turn on keyboard accessibility settings:
      • System settings → Accessibility → Keyboard → Full Keyboard Access (on)
      • Safari settings → Advanced → Press Tab to highlight each item on a webpage (on)
    2. Navigate to the Picker Default story in Storybook
    3. From page load, begin tabbing until you reach the Storybook canvas (try to avoid using the mouse - clicking into the canvas may cause Safari to skip the Picker in tab order).
    4. Confirm that you are able to keyboard focus on the picker and its menu.

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

@changeset-bot
Copy link

changeset-bot bot commented Oct 27, 2025

⚠️ No Changeset found

Latest commit: 6a2c9ea

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2025

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5833

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@rise-erpelding rise-erpelding marked this pull request as ready for review October 27, 2025 18:48
@rise-erpelding rise-erpelding requested a review from a team as a code owner October 27, 2025 18:48
@rise-erpelding rise-erpelding self-assigned this Oct 27, 2025
@coveralls
Copy link
Collaborator

Pull Request Test Coverage Report for Build 18852189534

Details

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.001%) to 97.967%

Totals Coverage Status
Change from base Build 18844771637: 0.001%
Covered Lines: 34259
Relevant Lines: 34788

💛 - Coveralls

@github-actions
Copy link
Contributor

Tachometer results

Currently, no packages are changed by this PR...

const input = document.createElement('input');
el.insertAdjacentElement('afterend', input);

el.focus();
Copy link
Contributor

Choose a reason for hiding this comment

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

out of curiosity, did you try removing the el.focus and see if that still passes? i believe that was the webkit work around but now that our keyboard helpers account for webkit weirdness we might be able to remove those.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

As far as I can tell we need still need el.focus for the setup, when I took it out the tests timed out locally 😕

Copy link
Contributor

@caseyisonit caseyisonit left a comment

Choose a reason for hiding this comment

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

LGTM

@rise-erpelding rise-erpelding merged commit 6c97dd7 into main Oct 28, 2025
27 checks passed
@rise-erpelding rise-erpelding deleted the rise-erpelding/swc-1081-safari-picker branch October 28, 2025 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Safari: Picker component cannot be tabbed into

5 participants