microsoft / microsoft/playwright

[Bug]: Webkit on MacOS won't tab between buttons

Open
#41,808 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser-webkit P3-collecting-feedback
Dominant language
TypeScript
Stars
96.3k
Forks
6.5k
Avg merge
1d 6h
Merged PRs (30d)
180

Description

### Version

1.61.1

### Steps to reproduce

https://github.com/radium-v/playwright-macos-webkit-button-focus-bug

Create a test which uses keyboard navigation to change focus between `` elements:

```ts
import { test, expect } from '@playwright/test';

test.describe("should focus between buttons", () => {
test("using `page.keyboard.press`", async ({ page }) => {
await page.goto("about:blank");

await page.evaluate(() => {
for (let i = 0; i < 3; i++) {
const button = document.createElement("button");
button.textContent = `Button ${i + 1}`;
document.body.appendChild(button);
}
});

await page.locator("button").first().focus();
await expect(page.locator("button").first()).toBeFocused();

await page.keyboard.press("Tab");
await expect(page.locator("button").nth(1)).toBeFocused();

await page.keyboard.press("Tab");
await expect(page.locator("button").nth(2)).toBeFocused();
});

test("using `locator.press`", async ({ page }) => {
await page.goto("about:blank");

await page.evaluate(() => {
for (let i = 0; i < 3; i++) {
const button = document.createElement("button");
button.textContent = `Button ${i + 1}`;
document.body.appendChild(button);
}
});

await page.locator("button").first().focus();
await expect(page.locator("button").first()).toBeFocused();

await page.locator("button").first().press("Tab");
await expect(page.locator("button").nth(1)).toBeFocused();

await page.locator("button").nth(1).press("Tab");
await expect(page.locator("button").nth(2)).toBeFocused();
});
});
```

### Expected behavior

When running the tests in Chromium, Firefox, and WebKit, the focus should move between the three buttons on the page when the `Tab` key is pressed.

### Actual behavior

When running the tests in WebKit on MacOS, the focusability of the buttons is dependent on the OS-level System Setting `System Settings > Keyboard > Keyboard navigation`. When this toggle is on, the focus moves between buttons as expected and the tests pass. When this toggle is off, the focus does not move between buttons and the tests fail.

### Additional context

This issue is similar to #2114 but the referenced Safari setting "Press Tab to highlight each item on a webpage" seems to have no effect on the Playwright Webkit browser. However, there's a MacOS System Settings toggle called "Keyboard navigation" that _does_ affect it, and turning it on will allow tests to pass.

Another interesting quirk is that adding a `tabindex` to the buttons will allow the tests to pass regardless of the aforementioned MacOS and Safari settings. This can be helpful locally, but adding a `tabindex` feels like an unnecessary workaround, and would have to be performed every time a `` is expected to be tabbable.

So far my investigations have led to this workaround:
```sh
defaults write org.webkit.Playwright AppleKeyboardUIMode -int 2
npx playwright test --project=webkit
defaults delete org.webkit.Playwright AppleKeyboardUIMode
```

### Environment

```shell
System:
OS: macOS 26.5.2
CPU: (12) arm64 Apple M3 Pro
Memory: 423.22 MB / 36.00 GB
Binaries:
Node: 24.18.0 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 11.16.0 - /usr/local/bin/npm
IDEs:
VSCode: 1.129.0 - /usr/local/bin/code
Languages:
Bash: 3.2.57 - /bin/bash
npmPackages:
@playwright/test: 1.61.1 => 1.61.1
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction repository and its WebKit tests, then compare the keyboard-navigation behavior with the macOS Keyboard navigation setting and the AppleKeyboardUIMode workaround. Done means the supplied button-focus tests pass in Playwright WebKit on macOS without requiring a tabindex workaround or manual system-setting change.

Written by the indexing model from the issue text.

Assessment

Tech stack
macos, typescript
Domain
testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.