test(web-e2e): reach row buttons with Option+Tab on WebKit (#1629)

The two "channel scrolling keeps focus after selection" cases (and the
Xtream "channel focus and separate scrollbar" cases, which press Tab the
same way) failed deterministically on Playwright WebKit while passing on
Chromium and Firefox. Playwright's WebKit emulates Safari's default
keyboard preference, under which plain Tab visits only text fields and
links: from the focused channel pane the key landed on the sidebar search
field instead of the first row button. Option+Tab reaches the button and
then the favorite action in the same DOM order Chromium's Tab follows, so
the app's focus contract (ChannelScrollFocusDirective) is intact and this
is Safari's Tab semantics, not an app bug.

Add a `pressTab` E2E helper that presses Alt+Tab only on webkit and keeps
the literal Tab / Shift+Tab on chromium and firefox, use it at the four
Tab presses toward buttons, and note Safari's behaviour in the keyboard
scrolling contract.

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Fable 5.1 authored and GitHub committed 2026-09-19 11:44:52 +02:00
1 parent 634a66b1e4
commit 43c1ceac16
4 files changed
+39 -7

No files matched your search

+5 -3
View File
@@ -1,6 +1,7 @@
import type { APIRequestContext, Page } from '@playwright/test';
import { expect, test } from './fixtures';
import {
pressTab,
rasterizedBorderContrast,
setInputValue,
surfaceContrast,
@@ -978,6 +979,7 @@ for (const theme of ['light', 'dark']) {
test(`@xtream navigation: channel focus and separate scrollbar (${theme})`, async ({
page,
browserName,
}) => {
await addXtreamPortal(page);
await page.getByRole('link', { name: 'Live TV', exact: true }).click();
@@ -993,10 +995,10 @@ for (const theme of ['light', 'dark']) {
await page.keyboard.press('ArrowRight');
await expect(viewport).toBeFocused();
await expect(page.locator('app-web-player-view')).toHaveCount(0);
await page.keyboard.press('Tab');
await pressTab(page, browserName);
const firstAction = viewport.locator('button.channel-content').first();
await expect(firstAction).toBeFocused();
await page.keyboard.press('Shift+Tab');
await pressTab(page, browserName, 'backward');
await expect(viewport).toBeFocused();
const row = viewport.locator('.channel-name').first();
@@ -1021,7 +1023,7 @@ for (const theme of ['light', 'dark']) {
await page.keyboard.press('Space');
await expect(page.locator('app-web-player-view')).toBeVisible();
await expect(firstAction).toBeFocused();
await page.keyboard.press('Tab');
await pressTab(page, browserName);
await expect(
viewport.locator('.favorite-button').first()
).toBeFocused();