chore(trace-viewer): improve aria tab roles

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

@@ -40,13 +40,15 @@ export const NetworkFilters = ({ filterState, onFilterStateChange }: {
         onChange={e => onFilterStateChange({ ...filterState, searchValue: e.target.value })}
       />
 
-      <div className='network-filters-resource-types'>
+      <div className='network-filters-resource-types' role='tablist'>
         {resourceTypes.map(resourceType => (
           <div
             key={resourceType}
             title={resourceType}
             onClick={() => onFilterStateChange({ ...filterState, resourceType })}
             className={`network-filters-resource-type ${filterState.resourceType === resourceType ? 'selected' : ''}`}
+            role='tab'
+            aria-selected={filterState.resourceType === resourceType}
           >
             {resourceType}
           </div>

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

@@ -65,15 +65,17 @@ export const SnapshotTabsView: React.FunctionComponent<{
   return <div className='snapshot-tab vbox'>
     <Toolbar>
       <ToolbarButton className='pick-locator' title='Pick locator' icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} />
-      {['action', 'before', 'after'].map(tab => {
-        return <TabbedPaneTab
-          key={tab}
-          id={tab}
-          title={renderTitle(tab)}
-          selected={snapshotTab === tab}
-          onSelect={() => setSnapshotTab(tab as 'action' | 'before' | 'after')}
-        ></TabbedPaneTab>;
-      })}
+      <div className='hbox' style={{ height: '100%' }} role='tablist'>
+        {(['action', 'before', 'after'] as const).map(tab => {
+          return <TabbedPaneTab
+            key={tab}
+            id={tab}
+            title={renderTitle(tab)}
+            selected={snapshotTab === tab}
+            onSelect={() => setSnapshotTab(tab)}
+          ></TabbedPaneTab>;
+        })}
+      </div>
       <div style={{ flex: 'auto' }}></div>
       <ToolbarButton icon='link-external' title='Open snapshot in a new tab' disabled={!snapshotUrls?.popoutUrl} onClick={() => {
         const win = window.open(snapshotUrls?.popoutUrl || '', '_blank');

packages/web/src/components/tabbedPane.tsx

@@ -106,7 +106,8 @@ export const TabbedPaneTab: React.FunctionComponent<{
     onClick={() => onSelect?.(id)}
     role='tab'
     title={title}
-    aria-controls={ariaControls}>
+    aria-controls={ariaControls}
+    aria-selected={selected}>
     <div className='tabbed-pane-tab-label'>{title}</div>
     {!!count && <div className='tabbed-pane-tab-counter'>{count}</div>}
     {!!errorCount && <div className='tabbed-pane-tab-counter error'>{errorCount}</div>}