Skip to content

chore(trace-viewer): improve aria tab roles #37872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
+16 −11
Closed

chore(trace-viewer): improve aria tab roles #37872

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cba0700
chore(trace-viewer): improve aria tab roles
agg23 Oct 15, 2025
643f98e
Fix lack of wrapping tablist for snapshot before/after
agg23 Oct 15, 2025
291c0d6
Switch to use hbox
agg23 Oct 16, 2025
8f77dbc
Merge branch 'main' of https://github.com/microsoft/playwright into t…
agg23 Oct 27, 2025
ad506ac
Bump to force build
agg23 Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/trace-viewer/src/ui/networkFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions packages/trace-viewer/src/ui/snapshotTab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
limitations under the License.
*/

.snapshot-tabs {
display: flex;
Copy link
Member

@pavelfeldman pavelfeldman Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We only use vbox and hbox for flex containers. What do you mean by height: 100% in a flex parent?

Copy link
Contributor Author

@agg23 agg23 Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what you're questioning about height: 100%. flex does not fill the off dimension by default; you have to tell the element to expand to fit.

Copy link
Member

@pavelfeldman pavelfeldman Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, that's why we use vbox and hbox.

height: 100%;
}

.snapshot-tab {
align-items: stretch;
outline: none;
Expand Down
20 changes: 11 additions & 9 deletions packages/trace-viewer/src/ui/snapshotTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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='snapshot-tabs' 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');
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/components/tabbedPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand Down
Loading