fix(html): make remaining mouse-only controls keyboard accessible

packages/html-reporter/src/common.css

@@ -211,6 +211,18 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   user-select: none;
 }
 
+button.subnav-item {
+  background: none;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.subnav-item:focus-visible {
+  outline: 1px solid var(--color-accent-fg);
+  outline-offset: -1px;
+}
+
 .subnav-item:hover {
   background-color: var(--color-canvas-subtle);
 }

packages/html-reporter/src/headerView.spec.ts

@@ -57,3 +57,13 @@ test('should toggle filters', async ({ page, mount }) => {
   await component.getByRole('textbox').fill('annot:annotation type=annotation description');
   await expect(filterText).toHaveValue('annot:annotation type=annotation description');
 });
+
+test('settings button should open with the keyboard', async ({ mount, page }) => {
+  const component = await mount<typeof Default>('headerView/Default');
+  const settings = component.getByRole('button', { name: 'Settings' });
+  await settings.focus();
+  await expect(settings).toBeFocused();
+  await expect(settings).toHaveAttribute('aria-expanded', 'false');
+  await page.keyboard.press('Enter');
+  await expect(settings).toHaveAttribute('aria-expanded', 'true');
+});

packages/html-reporter/src/headerView.tsx

@@ -128,24 +128,25 @@ const NavLink: React.FC<{
 };
 
 const SettingsButton: React.FC = () => {
-  const settingsRef = React.useRef<HTMLDivElement>(null);
+  const settingsRef = React.useRef<HTMLButtonElement>(null);
   const [settingsOpen, setSettingsOpen] = React.useState(false);
   const [theme, setTheme] = useThemeSetting();
 
   return <>
-    <div
-      role='button'
+    <button
+      type='button'
       ref={settingsRef}
-      style={{ cursor: 'pointer' }}
       className='subnav-item'
       title='Settings'
+      aria-haspopup='dialog'
+      aria-expanded={settingsOpen}
       onClick={e => {
         setSettingsOpen(!settingsOpen);
         e.preventDefault();
       }}
       onMouseDown={preventDefault}>
       {icons.settings()}
-    </div>
+    </button>
 
     <Dialog
       open={settingsOpen}

packages/html-reporter/src/labels.css

@@ -30,6 +30,15 @@
   cursor: pointer;
 }
 
+button.label {
+  font-family: inherit;
+}
+
+.label: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,11 @@ 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;
+  const baseLabel = onClick
+    ? <button type='button' className={className} onClick={e => onClick(e, label)}>{text}</button>
+    : <span className={className}>{text}</span>;
 
   return href
     ? <a className='label-anchor' href={formatUrl(href)}>{baseLabel}</a>

packages/html-reporter/src/metadataView.css

@@ -18,6 +18,15 @@
   cursor: pointer;
   user-select: none;
   color: var(--color-fg-default);
+  padding: 0;
+  background: none;
+  border: none;
+  font: inherit;
+}
+
+.metadata-toggle:focus-visible {
+  outline: 1px solid var(--color-accent-fg);
+  outline-offset: 1px;
 }
 
 .metadata-toggle-second-line {

packages/html-reporter/src/testFilesView.tsx

@@ -81,9 +81,9 @@ export const TestFilesHeader: React.FC<{
   const isMetadataInTopLine = !showProject && !filteredStats;
 
   const metadataToggleButton = !isMetadataEmpty(report.metadata) && (
-    <div className={clsx('metadata-toggle', !isMetadataInTopLine && 'metadata-toggle-second-line')} role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
+    <button type='button' className={clsx('metadata-toggle', !isMetadataInTopLine && 'metadata-toggle-second-line')} aria-expanded={metadataVisible} onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
       {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
-    </div>
+    </button>
   );
 
   const leftSuperHeader = <div className='test-file-header-info'>

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

@@ -85,6 +85,20 @@
   border-bottom: 1px solid transparent;
 }
 
+button.action-list-show-all {
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.action-list-show-all:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
+}
+
 .action-icons:hover {
   border-bottom: 1px solid var(--vscode-sideBarTitle-foreground);
 }

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

@@ -112,7 +112,7 @@ export const ActionList: React.FC<ActionListProps> = ({
   }, [setSelectedTime]);
 
   return <div className='vbox action-list-container'>
-    {selectedTime && <div className='action-list-show-all' onClick={onShowAll}><span className='codicon codicon-triangle-left'></span>Show all</div>}
+    {selectedTime && <button type='button' className='action-list-show-all' onClick={onShowAll}><span className='codicon codicon-triangle-left'></span>Show all</button>}
     <ActionTreeView
       name='actions'
       rootItem={rootItem}