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>

apps/web-e2e/src/e2e-helpers.ts

@@ -7,6 +7,32 @@ import type {
 import { expect } from './fixtures';
 import sharp from 'sharp';
 
+/**
+ * Move keyboard focus to the next (or previous) tabbable element the way a
+ * user of that browser does.
+ *
+ * Safari's default keyboard preference makes plain Tab visit only text fields
+ * and links; buttons are reached with Option+Tab, or with plain Tab once
+ * "Press Tab to highlight each item on a webpage" is enabled. Playwright's
+ * WebKit emulates that default, so a plain `Tab` from a focused channel pane
+ * lands on the sidebar search field instead of the first row button — the
+ * app's focus order is intact, Safari simply skips the button. Pressing
+ * Option+Tab there keeps the assertion about the app's DOM order rather than
+ * about Safari's preference; Chromium and Firefox treat Alt+Tab as a plain
+ * Tab, but they get the unmodified key so their run stays a literal user Tab.
+ */
+export async function pressTab(
+    page: Page,
+    browserName: string,
+    direction: 'forward' | 'backward' = 'forward'
+): Promise<void> {
+    const modifiers = [
+        ...(browserName === 'webkit' ? ['Alt'] : []),
+        ...(direction === 'backward' ? ['Shift'] : []),
+    ];
+    await page.keyboard.press([...modifiers, 'Tab'].join('+'));
+}
+
 export async function setInputValue(
     input: Locator,
     value: string