fix(web): make clickable tag and label chips keyboard accessible

packages/html-reporter/src/labels.css

@@ -30,6 +30,16 @@
   cursor: pointer;
 }
 
+.label-button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.label-button:focus-visible {
+  outline: 1px solid var(--color-accent-fg);
+  outline-offset: -1px;
+}
+
 .label-anchor {
   text-decoration: none;
   color: var(--color-fg-default);

packages/html-reporter/src/labels.tsx

@@ -28,9 +28,14 @@ export const Label: React.FC<{
   onClick?: (e: React.MouseEvent, label: string) => void,
   colorIndex?: number,
 }> = ({ label, href, onClick, colorIndex, trimAtSymbolPrefix }) => {
-  const baseLabel = <span className={clsx('label', 'label-color-' + (colorIndex !== undefined ? colorIndex : hashStringToInt(label)))} onClick={onClick ? e => onClick(e, label) : undefined}>
-    {trimAtSymbolPrefix && label.startsWith('@') ? label.slice(1) : label}
-  </span>;
+  const className = clsx('label', 'label-color-' + (colorIndex !== undefined ? colorIndex : hashStringToInt(label)));
+  const text = trimAtSymbolPrefix && label.startsWith('@') ? label.slice(1) : label;
+
+  // When there is an href the anchor below is already keyboard accessible, so only a
+  // standalone click handler needs a button of its own.
+  const baseLabel = onClick && !href
+    ? <button className={clsx(className, 'label-button')} onClick={e => onClick(e, label)}>{text}</button>
+    : <span className={className} onClick={onClick ? e => onClick(e, label) : undefined}>{text}</span>;
 
   return href
     ? <a className='label-anchor' href={formatUrl(href)}>{baseLabel}</a>

packages/trace-viewer/src/ui/tag.css

@@ -29,6 +29,16 @@
   font-weight: 600;
 }
 
+.tag-button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.tag-button:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
+}
+
 .tag-color-0 {
   background-color: #ddf4ff;
   color: #0550ae;

packages/trace-viewer/src/ui/tag.tsx

@@ -18,14 +18,21 @@ import { clsx } from '@web/uiUtils';
 import './tag.css';
 
 export const TagView = ({ tag, style, onClick }: { tag: string, style?: React.CSSProperties, onClick?: (e: React.MouseEvent) => void }) => {
-  return <span
-    className={clsx('tag', `tag-color-${tagNameToColor(tag)}`)}
+  const className = clsx('tag', `tag-color-${tagNameToColor(tag)}`);
+  const tagStyle = { margin: '6px 0 0 6px', ...style };
+  const title = `Click to filter by tag: ${tag}`;
+
+  if (!onClick)
+    return <span className={className} style={tagStyle} title={title}>{tag}</span>;
+
+  return <button
+    className={clsx(className, 'tag-button')}
     onClick={onClick}
-    style={{ margin: '6px 0 0 6px', ...style }}
-    title={`Click to filter by tag: ${tag}`}
+    style={tagStyle}
+    title={title}
   >
     {tag}
-  </span>;
+  </button>;
 };
 
 // hash string to integer in range [0, 6] for color index, to get same color for same tag

tests/playwright-test/ui-mode-test-filters.spec.ts

@@ -72,6 +72,23 @@ test('should display native tags and filter by them on click', async ({ runUITes
   `);
 });
 
+test('should filter by tag from the keyboard', async ({ runUITest }) => {
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('p', () => {});
+      test('pwt', { tag: '@smoke' }, () => {});
+  `,
+  });
+
+  const tag = page.locator('.ui-mode-tree-item-title').getByRole('button', { name: 'smoke' });
+  await tag.focus();
+  await expect(tag).toBeFocused();
+
+  await tag.press('Enter');
+  await expect(page.getByPlaceholder('Filter (e.g. text, @tag)')).toHaveValue('@smoke');
+});
+
 test('should toggle filters from the keyboard', async ({ runUITest }) => {
   const { page } = await runUITest(basicTestTree);
   const summary = page.locator('.filter-summary');