diff --git a/packages/trace-viewer/src/ui/networkFilters.tsx b/packages/trace-viewer/src/ui/networkFilters.tsx index a88332e7c65f0..1192fdade00e7 100644 --- a/packages/trace-viewer/src/ui/networkFilters.tsx +++ b/packages/trace-viewer/src/ui/networkFilters.tsx @@ -40,13 +40,15 @@ export const NetworkFilters = ({ filterState, onFilterStateChange }: { onChange={e => onFilterStateChange({ ...filterState, searchValue: e.target.value })} /> -
+
{resourceTypes.map(resourceType => (
onFilterStateChange({ ...filterState, resourceType })} className={`network-filters-resource-type ${filterState.resourceType === resourceType ? 'selected' : ''}`} + role='tab' + aria-selected={filterState.resourceType === resourceType} > {resourceType}
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx index 82c68078cbca4..bc523542a577e 100644 --- a/packages/trace-viewer/src/ui/snapshotTab.tsx +++ b/packages/trace-viewer/src/ui/snapshotTab.tsx @@ -65,15 +65,17 @@ export const SnapshotTabsView: React.FunctionComponent<{ return
setIsInspecting(!isInspecting)} /> - {['action', 'before', 'after'].map(tab => { - return setSnapshotTab(tab as 'action' | 'before' | 'after')} - >; - })} +
+ {(['action', 'before', 'after'] as const).map(tab => { + return setSnapshotTab(tab)} + >; + })} +
{ const win = window.open(snapshotUrls?.popoutUrl || '', '_blank'); diff --git a/packages/web/src/components/tabbedPane.tsx b/packages/web/src/components/tabbedPane.tsx index 95b0fa540ce42..84cbc9f3b676f 100644 --- a/packages/web/src/components/tabbedPane.tsx +++ b/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}>
{title}
{!!count &&
{count}
} {!!errorCount &&
{errorCount}
}