From 132838691d6af31c45ad0194cd6b30f7a0edfb32 Mon Sep 17 00:00:00 2001
From: Aditya Kumar Gupta <aditya.rakesh.2005@gmail.com>
Date: Fri, 26 Jun 2026 15:38:05 +0530
Subject: [PATCH] fix(trace-viewer): use button elements for network filter
 tabs

---
 packages/trace-viewer/src/ui/networkFilters.css | 10 ++++++++++
 packages/trace-viewer/src/ui/networkFilters.tsx | 10 ++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/trace-viewer/src/ui/networkFilters.css b/packages/trace-viewer/src/ui/networkFilters.css
index 836c7102c9bc4..3f0883a60ddf8 100644
--- a/packages/trace-viewer/src/ui/networkFilters.css
+++ b/packages/trace-viewer/src/ui/networkFilters.css
@@ -39,6 +39,16 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.network-filters-resource-type:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
 }
 
 .network-filters-resource-type.selected {
diff --git a/packages/trace-viewer/src/ui/networkFilters.tsx b/packages/trace-viewer/src/ui/networkFilters.tsx
index df0f0b9e7307a..dedb250dae895 100644
--- a/packages/trace-viewer/src/ui/networkFilters.tsx
+++ b/packages/trace-viewer/src/ui/networkFilters.tsx
@@ -41,16 +41,18 @@ export const NetworkFilters = ({ filterState, onFilterStateChange }: {
       />
 
       <div className='network-filters-resource-types' role='tablist' aria-multiselectable='true'>
-        <div
+        <button
           title='All'
           onClick={() => onFilterStateChange({ ...filterState, resourceTypes: new Set() })}
           className={`network-filters-resource-type ${filterState.resourceTypes.size === 0 ? 'selected' : ''}`}
+          role='tab'
+          aria-selected={filterState.resourceTypes.size === 0}
         >
           All
-        </div>
+        </button>
 
         {resourceTypes.map(resourceType => (
-          <div
+          <button
             key={resourceType}
             title={resourceType}
             onClick={event => {
@@ -67,7 +69,7 @@ export const NetworkFilters = ({ filterState, onFilterStateChange }: {
             aria-selected={filterState.resourceTypes.has(resourceType)}
           >
             {resourceType}
-          </div>
+          </button>
         ))}
       </div>
     </div>