[pull] main from microsoft:main

README.md

@@ -1,6 +1,6 @@
 # 🎭 Playwright
 
-[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[![Chromium version](https://img.shields.io/badge/chromium-152.0.7977.8-blue.svg?logo=google-chrome)](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[![Firefox version](https://img.shields.io/badge/firefox-153.0-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[![WebKit version](https://img.shields.io/badge/webkit-26.5-blue.svg?logo=safari)](https://webkit.org/)<!-- GEN:stop --> [![Join Discord](https://img.shields.io/badge/join-discord-informational)](https://aka.ms/playwright/discord)
+[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[![Chromium version](https://img.shields.io/badge/chromium-152.0.7977.54-blue.svg?logo=google-chrome)](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[![Firefox version](https://img.shields.io/badge/firefox-153.0-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[![WebKit version](https://img.shields.io/badge/webkit-26.5-blue.svg?logo=safari)](https://webkit.org/)<!-- GEN:stop --> [![Join Discord](https://img.shields.io/badge/join-discord-informational)](https://aka.ms/playwright/discord)
 
 ## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright)
 
@@ -296,7 +296,7 @@ The [Playwright VS Code extension](https://marketplace.visualstudio.com/items?it
 
 |          | Linux | macOS | Windows |
 |   :---   | :---: | :---: | :---:   |
-| Chromium<sup>1</sup> <!-- GEN:chromium-version -->152.0.7977.8<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
+| Chromium<sup>1</sup> <!-- GEN:chromium-version -->152.0.7977.54<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 | WebKit <!-- GEN:webkit-version -->26.5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 | Firefox <!-- GEN:firefox-version -->153.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 

packages/html-reporter/src/common.css

@@ -211,10 +211,23 @@ 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:hover {
   background-color: var(--color-canvas-subtle);
 }
 
+/* Items overlap by 1px, lift the focused one so that the ring is not clipped by the next one. */
+.subnav-item:focus-visible {
+  outline-color: var(--color-accent-fg);
+  z-index: 1;
+}
+
 .subnav-item[aria-selected="true"] {
   background: var(--color-control-transparent-bg-hover);
 }

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

@@ -37,6 +37,19 @@ test('should render counters', async ({ mount }) => {
   `);
 });
 
+test('should open settings with keyboard', async ({ mount }) => {
+  const component = await mount<typeof Default>('headerView/Default');
+  const settings = component.getByRole('button', { name: 'Settings' });
+  const dialog = component.getByTestId('settings-dialog');
+  await settings.focus();
+  await expect(settings).toBeFocused();
+  await expect(dialog).toBeHidden();
+  await settings.press('Enter');
+  await expect(dialog).toBeVisible();
+  await settings.press(' ');
+  await expect(dialog).toBeHidden();
+});
+
 test('should toggle filters', async ({ page, mount }) => {
   const component = await mount<typeof Default>('headerView/Default');
   const filterText = component.getByTestId('filter-text');

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/metadataView.css

@@ -15,11 +15,21 @@
 */
 
 .metadata-toggle {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
   cursor: pointer;
   user-select: none;
   color: var(--color-fg-default);
 }
 
+.metadata-toggle:focus-visible {
+  outline: 1px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}
+
 .metadata-toggle-second-line {
   margin-top: 8px;
   margin-left: 8px;

packages/html-reporter/src/testFilesView.tsx

@@ -81,9 +81,14 @@ 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'>