use aria-label over title, prefix tab ids

packages/recorder/src/recorder.tsx

@@ -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={[
           {

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

@@ -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>;

packages/trace-viewer/src/ui/recorder/recorderView.tsx

@@ -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}

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

@@ -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}

packages/web/src/components/tabbedPane.tsx

@@ -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
+  onSelect?: (id: string) => void,
-}> = ({ id, title, count, errorCount, selected, onSelect }) => {
+  '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}`}
+    aria-controls={ariaControls}
-    title={title}
+    aria-label={title}>
-    key={id}>
     <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>}

tests/playwright-test/ui-mode-test-attachments.spec.ts

@@ -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();