fix(web): make clickable tags, labels and column headers 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,20 +18,27 @@ 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
 function tagNameToColor(str: string) {
   let hash = 0;
-  for (let i = 0; i < str.length; i++)
-    hash = str.charCodeAt(i) + ((hash << 8) - hash);
-  return Math.abs(hash % 6);
+  for (let i = 0; i < str.length; ++i)
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  return Math.abs(hash) % 7;
 }

packages/web/src/components/gridView.css

@@ -66,6 +66,20 @@
   white-space: nowrap;
 }
 
+.grid-view-header-cell-button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  flex: auto;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.grid-view-header-cell-button:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
+}
+
 .grid-view-header-cell-title {
   overflow: hidden;
   text-overflow: ellipsis;

packages/web/src/components/gridView.tsx

@@ -75,17 +75,24 @@ export function GridView<T>(model: GridViewProps<T>) {
     <div className='vbox'>
       <div className='grid-view-header'>
         {model.columns.map((column, i) => {
+          const title = <>
+            <span className='grid-view-header-cell-title'>{model.columnTitle(column)}</span>
+            <span className='codicon codicon-triangle-up' />
+            <span className='codicon codicon-triangle-down' />
+          </>;
           return <div
             key={model.columnTitle(column)}
             className={'grid-view-header-cell ' + sortingHeader(column, model.sorting)}
             style={{
               width: i < model.columns.length - 1 ? model.columnWidths.get(column) : undefined,
             }}
-            onClick={() => model.setSorting && toggleSorting(column)}
           >
-            <span className='grid-view-header-cell-title'>{model.columnTitle(column)}</span>
-            <span className='codicon codicon-triangle-up' />
-            <span className='codicon codicon-triangle-down' />
+            {model.setSorting ? <button
+              className='grid-view-header-cell-button'
+              onClick={() => toggleSorting(column)}
+            >
+              {title}
+            </button> : title}
           </div>;
         })}
       </div>

tests/library/trace-viewer.spec.ts

@@ -518,6 +518,21 @@ test('should have network requests', async ({ showTraceViewer }) => {
   await expect(traceViewer.networkRequests.filter({ hasText: '404GET404text' })).toHaveCSS('background-color', 'rgb(242, 222, 222)');
 });
 
+test('should sort network columns from the keyboard', async ({ showTraceViewer }) => {
+  const traceViewer = await showTraceViewer(traceFile);
+  await traceViewer.selectAction('Navigate');
+  await traceViewer.showNetworkTab();
+
+  const nameColumn = traceViewer.page.getByRole('button', { name: 'Name', exact: true });
+  await expect(nameColumn).toBeVisible();
+
+  await nameColumn.focus();
+  await expect(nameColumn).toBeFocused();
+
+  await nameColumn.press('Enter');
+  await expect(traceViewer.networkRequests.first()).toContainText('404');
+});
+
 test('should attribute network requests to service workers', async ({ runAndTrace, page, context, server, browserName }) => {
   test.skip(browserName !== 'chromium', 'Service worker requests are only reported in Chromium');
   const traceViewer = await runAndTrace(async () => {

tests/playwright-test/reporter-html.spec.ts

@@ -2145,6 +2145,40 @@ for (const useIntermediateMergeReport of [true, false] as const) {
         await expect(page.locator('.test-file-test .test-file-title')).toHaveText('Error Pages › @GCC-1510 fails');
       });
 
+      test('should filter by label from the keyboard', async ({ runInlineTest, showReport, page }) => {
+        const result = await runInlineTest({
+          'a.test.js': `
+            const { expect, test } = require('@playwright/test');
+            test('@smoke passes', async ({}) => {
+              expect(1).toBe(1);
+            });
+            test('@regression passes', async ({}) => {
+              expect(1).toBe(1);
+            });
+          `,
+        }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+
+        expect(result.exitCode).toBe(0);
+        expect(result.passed).toBe(2);
+
+        await showReport();
+
+        const smokeLabel = page.locator('.test-file-test', { has: page.getByText('@smoke passes', { exact: true }) }).getByRole('button', { name: 'smoke' });
+        await smokeLabel.focus();
+        await expect(smokeLabel).toBeFocused();
+        await smokeLabel.press('Enter');
+        await expect(page.getByPlaceholder('Search tests')).toHaveValue('@smoke ');
+        await expect(page.locator('.test-file-test')).toHaveCount(1);
+
+        await page.getByPlaceholder('Search tests').clear();
+        const regressionLabel = page.locator('.test-file-test', { has: page.getByText('@regression passes', { exact: true }) }).getByRole('button', { name: 'regression' });
+        await regressionLabel.focus();
+        await expect(regressionLabel).toBeFocused();
+        await regressionLabel.press('Space');
+        await expect(page.getByPlaceholder('Search tests')).toHaveValue('@regression ');
+        await expect(page.locator('.test-file-test')).toHaveCount(1);
+      });
+
       test('tags with special symbols', async ({ runInlineTest, showReport, page }) => {
         const result = await runInlineTest({
           'a.test.js': `

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');