diff --git a/packages/html-reporter/src/tabbedPane.css b/packages/html-reporter/src/tabbedPane.css
index 042ab9f7608d5..d063719c3912b 100644
--- a/packages/html-reporter/src/tabbedPane.css
+++ b/packages/html-reporter/src/tabbedPane.css
@@ -48,11 +48,20 @@
   align-items: center;
   justify-content: center;
   user-select: none;
+  background: none;
+  border: none;
   border-bottom: 2px solid transparent;
+  color: inherit;
+  font: inherit;
   outline: none;
   height: 100%;
 }
 
+.tabbed-pane-tab-element:focus-visible {
+  outline: 1px solid var(--color-accent-fg);
+  outline-offset: -1px;
+}
+
 .tabbed-pane-tab-label {
   max-width: 250px;
   white-space: pre;
diff --git a/packages/html-reporter/src/tabbedPane.tsx b/packages/html-reporter/src/tabbedPane.tsx
index a1e533348b873..55d8f51955f08 100644
--- a/packages/html-reporter/src/tabbedPane.tsx
+++ b/packages/html-reporter/src/tabbedPane.tsx
@@ -37,14 +37,14 @@ export const TabbedPane: React.FunctionComponent<{
       <div className='hbox' style={{ flex: 'none' }}>
         <div className='tabbed-pane-tab-strip' role='tablist'>{
           tabs.map(tab => (
-            <div className={clsx('tabbed-pane-tab-element', selectedTab === tab.id && 'selected')}
+            <button className={clsx('tabbed-pane-tab-element', selectedTab === tab.id && 'selected')}
               onClick={() => setSelectedTab(tab.id)}
               id={`${idPrefix}-${tab.id}`}
               key={tab.id}
               role='tab'
               aria-selected={selectedTab === tab.id}>
               <div className='tabbed-pane-tab-label'>{tab.title}</div>
-            </div>
+            </button>
           ))
         }</div>
       </div>