Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

use aria-label over title, prefix tab ids

Browse source
This commit is contained in:
Simon Knott 2024-10-24 14:24:59 +02:00
parent d4adcfed17
commit fef30043f0
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
6 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/recorder/src/recorder.tsx
View file

@ -165,6 +165,7 @@ export const Recorder: React.FC<RecorderProps> = ({
sidebarSize={200}
main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
sidebar={<TabbedPane
id='recorder-sidebar'
rightToolbar={selectedTab === 'locator' || selectedTab === 'aria' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy((selectedTab === 'locator' ? locator : ariaSnapshot) || '')} />] : []}
tabs={[
{

2
packages/trace-viewer/src/ui/attachmentsTab.tsx
View file

@ -63,7 +63,7 @@ const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> =
return Math.min(Math.max(5, lineCount), 20) * lineHeight;
}, [attachmentText]);
const title = <span style={{ marginLeft: 5 }} ref={ref} title={attachment.name}>
const title = <span style={{ marginLeft: 5 }} ref={ref} aria-label={attachment.name}>
<span style={highlight ? { textDecoration: 'underline var(--vscode-terminal-findMatchBackground)', textDecorationThickness: 1.5 } : {}}>{linkifyText(attachment.name)}</span>
{hasContent && <a style={{ marginLeft: 5 }} href={downloadURL(attachment)}>download</a>}
</span>;

3
packages/trace-viewer/src/ui/recorder/recorderView.tsx
View file

@ -151,7 +151,7 @@ export const Workbench: React.FunctionComponent = () => {
<ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
</Toolbar>;
const sidebarTabbedPane = <TabbedPane tabs={[actionsTab]} />;
const sidebarTabbedPane = <TabbedPane id='recorder-actions-tab' tabs={[actionsTab]} />;
const traceView = <TraceView
sdkLanguage={sdkLanguage}
callId={traceCallId}
@ -249,6 +249,7 @@ const PropertiesView: React.FunctionComponent<{
];
return <TabbedPane
id='properties-tabs'
tabs={tabs}
selectedTab={selectedPropertiesTab}
setSelectedTab={setSelectedPropertiesTab}

2
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -341,6 +341,7 @@ export const Workbench: React.FunctionComponent<{
openPage={openPage} />}
sidebar={
<TabbedPane
id='actionlist-sidebar'
tabs={[actionsTab, metadataTab]}
selectedTab={selectedNavigatorTab}
setSelectedTab={setSelectedNavigatorTab}
@ -348,6 +349,7 @@ export const Workbench: React.FunctionComponent<{
}
/>}
sidebar={<TabbedPane
id='workbench-sidebar'
tabs={tabs}
selectedTab={selectedPropertiesTab}
setSelectedTab={selectPropertiesTab}

20
packages/web/src/components/tabbedPane.tsx
View file

@ -36,7 +36,8 @@ export const TabbedPane: React.FunctionComponent<{
setSelectedTab?: (tab: string) => void,
dataTestId?: string,
mode?: 'default' | 'select',
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
id: string,
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode, id }) => {
if (!selectedTab)
selectedTab = tabs[0].id;
if (!mode)
@ -52,6 +53,7 @@ export const TabbedPane: React.FunctionComponent<{
<TabbedPaneTab
key={tab.id}
id={tab.id}
aria-controls={`pane-${id}-tab-${tab.id}`}
title={tab.title}
count={tab.count}
errorCount={tab.errorCount}
@ -70,7 +72,7 @@ export const TabbedPane: React.FunctionComponent<{
suffix = ` (${tab.count})`;
if (tab.errorCount)
suffix = ` (${tab.errorCount})`;
return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab} role='tab' aria-controls={`tab-${tab.id}`}>{tab.title}{suffix}</option>;
return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab} role='tab' aria-controls={`pane-${id}-tab-${tab.id}`}>{tab.title}{suffix}</option>;
})}
</select>
</div>}
@ -82,9 +84,9 @@ export const TabbedPane: React.FunctionComponent<{
tabs.map(tab => {
const className = 'tab-content tab-' + tab.id;
if (tab.component)
return <div key={tab.id} id={`tab-${tab.id}`} role='tabpanel' title={tab.title} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
return <div key={tab.id} id={`pane-${id}-tab-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
if (selectedTab === tab.id)
return <div key={tab.id} id={`tab-${tab.id}`} role='tabpanel' title={tab.title} className={className}>{tab.render!()}</div>;
return <div key={tab.id} id={`pane-${id}-tab-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className}>{tab.render!()}</div>;
})
}
</div>
@ -97,14 +99,14 @@ export const TabbedPaneTab: React.FunctionComponent<{
count?: number,
errorCount?: number,
selected?: boolean,
onSelect?: (id: string) => void
}> = ({ id, title, count, errorCount, selected, onSelect }) => {
onSelect?: (id: string) => void,
'aria-controls'?: string,
}> = ({ id, title, count, errorCount, selected, onSelect, 'aria-controls': ariaControls }) => {
return <div className={clsx('tabbed-pane-tab', selected && 'selected')}
onClick={() => onSelect?.(id)}
role='tab'
aria-controls={`tab-${id}`}
title={title}
key={id}>
aria-controls={ariaControls}
aria-label={title}>
<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>}

2
tests/playwright-test/ui-mode-test-attachments.spec.ts
View file

@ -166,7 +166,7 @@ test('should link from attachment step to attachments view', async ({ runUITest,
await page.getByRole('tab', { name: 'Attachments' }).click();
const panel = page.getByRole('tabpanel', { name: 'Attachments' });
const attachment = panel.getByTitle('my-attachment');
const attachment = panel.getByLabel('my-attachment');
await expect(attachment).not.toBeInViewport();
await page.getByText('attach "my-attachment"').click();
await expect(attachment).toBeInViewport();