Resolve a11y warning on tabs

This was missed as part of the Carbon 11 migration. The `aria-label` prop should be applied to the `TabList` in Carbon 11, where it was on the `Tabs` components previously in Carbon 10.
tektoncd · Aug 21, 2024 · 6233cf5 · 6233cf5
1 parent d5ce592
commit 6233cf5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/packages/components/src/components/ResourceDetails/ResourceDetails.jsx b/packages/components/src/components/ResourceDetails/ResourceDetails.jsx
@@ -83,14 +83,16 @@ const ResourceDetails = ({
         {actions}
       </div>
       <Tabs
-        aria-label={intl.formatMessage({
-          id: 'dashboard.resourceDetails.ariaLabel',
-          defaultMessage: 'Resource details'
-        })}
         onChange={event => onViewChange(tabs[event.selectedIndex])}
         selectedIndex={selectedTabIndex}
       >
-        <TabList activation="manual">
+        <TabList
+          activation="manual"
+          aria-label={intl.formatMessage({
+            id: 'dashboard.resourceDetails.ariaLabel',
+            defaultMessage: 'Resource details'
+          })}
+        >
           <Tab>
             {intl.formatMessage({
               id: 'dashboard.resource.overviewTab',

diff --git a/packages/components/src/components/StepDetails/StepDetails.jsx b/packages/components/src/components/StepDetails/StepDetails.jsx
@@ -59,11 +59,10 @@ const StepDetails = ({
         taskRun={taskRun}
       />
       <Tabs
-        aria-label="Step details"
         onChange={event => onViewChange(tabs[event.selectedIndex])}
         selectedIndex={selectedTabIndex}
       >
-        <TabList activation="manual">
+        <TabList activation="manual" aria-label="Step details">
           <Tab>
             {intl.formatMessage({
               id: 'dashboard.taskRun.logs',

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.jsx b/packages/components/src/components/TaskRunDetails/TaskRunDetails.jsx
@@ -278,11 +278,12 @@ const TaskRunDetails = ({
         type="taskRun"
       />
       <Tabs
-        aria-label="TaskRun details"
         onChange={event => onViewChange(tabs[event.selectedIndex])}
         selectedIndex={selectedTabIndex}
       >
-        <TabList activation="manual">{tabList}</TabList>
+        <TabList activation="manual" aria-label="TaskRun details">
+          {tabList}
+        </TabList>
         <TabPanels>{tabPanels}</TabPanels>
       </Tabs>
     </div>