microsoft / microsoft/playwright
[Bug]: Webkit on MacOS won't tab between buttons
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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