From e609beb67894f8dcaf8cb693176fe6ec6c54357f Mon Sep 17 00:00:00 2001
From: Marghen <berlanda.marco@gmail.com>
Date: Fri, 14 Nov 2025 11:52:39 +0100
Subject: [PATCH 1/3] feat: fix CvTabs accessibility warnings and errors
 clicking overflow control buttons

---
 src/components/CvTabs/CvTabs.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/CvTabs/CvTabs.vue b/src/components/CvTabs/CvTabs.vue
index d86775549..e9aac8755 100644
--- a/src/components/CvTabs/CvTabs.vue
+++ b/src/components/CvTabs/CvTabs.vue
@@ -11,14 +11,15 @@
         },
       ]"
       role="navigation"
-      v-bind="$attrs"
+      :aria-label="attrs['aria-label'] || 'Tabs'"
+      v-bind="attrsWithoutAriaLabel"
       @keydown.right.prevent.stop="onRight"
       @keydown.left.prevent.stop="onLeft"
     >
       <button
-        ref="elLeftOverflow"
         aria-hidden="true"
         aria-label="scroll left"
+        :aria-label="leftOverflowNavButtonHidden ? undefined : 'Scroll tabs left'"
         :class="[
           {
             [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
@@ -26,7 +27,7 @@
               leftOverflowNavButtonHidden,
           },
         ]"
-        tabIndex="-1"
+        :tabIndex="leftOverflowNavButtonHidden ? -1 : 0"
         type="button"
         @click.stop.prevent="e => onOverflowClick(e, { direction: -1 })"
         @mousedown.stop.prevent="e => onOverflowMouseDown(e, { direction: -1 })"
@@ -89,8 +90,7 @@
       />
       <button
         ref="elRightOverflow"
-        aria-hidden="true"
-        aria-label="scroll right"
+        :aria-label="rightOverflowNavButtonHidden ? undefined : 'Scroll tabs right'"
         :class="[
           {
             [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
@@ -98,7 +98,7 @@
               rightOverflowNavButtonHidden,
           },
         ]"
-        tabIndex="-1"
+        :tabIndex="rightOverflowNavButtonHidden ? -1 : 0"
         type="button"
         @click="e => onOverflowClick(e, { direction: 1 })"
         @mousedown="e => onOverflowMouseDown(e, { direction: 1 })"
@@ -117,15 +117,21 @@
 import { carbonPrefix } from '../../global/settings';
 import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-vue';
 import {
+  computed,
   nextTick,
   onBeforeUnmount,
   onMounted,
   onUpdated,
   provide,
   ref,
+  useAttrs,
   watch,
 } from 'vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const OVERFLOW_BUTTON_OFFSET = 40;
 
 const props = defineProps({
@@ -152,6 +158,12 @@ const props = defineProps({
 });
 const emit = defineEmits(['tab-selected', 'tab-selected-id']);
 
+const attrs = useAttrs();
+const attrsWithoutAriaLabel = computed(() => {
+  const { 'aria-label': _, ...rest } = attrs;
+  return rest;
+});
+
 const selectedId = ref('');
 provide('tab-selected', selectedId);
 /**

From f835506906c830c859ed46af7fc44a7922cebb47 Mon Sep 17 00:00:00 2001
From: Marghen <berlanda.marco@gmail.com>
Date: Fri, 14 Nov 2025 12:30:19 +0100
Subject: [PATCH 2/3] fix: aria-label attribute was duplicating

---
 src/components/CvTabs/CvTabs.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/CvTabs/CvTabs.vue b/src/components/CvTabs/CvTabs.vue
index e9aac8755..e14b95abc 100644
--- a/src/components/CvTabs/CvTabs.vue
+++ b/src/components/CvTabs/CvTabs.vue
@@ -17,9 +17,10 @@
       @keydown.left.prevent.stop="onLeft"
     >
       <button
-        aria-hidden="true"
-        aria-label="scroll left"
-        :aria-label="leftOverflowNavButtonHidden ? undefined : 'Scroll tabs left'"
+        ref="elLeftOverflow"
+        :aria-label="
+          leftOverflowNavButtonHidden ? undefined : 'Scroll tabs left'
+        "
         :class="[
           {
             [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
@@ -90,7 +91,9 @@
       />
       <button
         ref="elRightOverflow"
-        :aria-label="rightOverflowNavButtonHidden ? undefined : 'Scroll tabs right'"
+        :aria-label="
+          rightOverflowNavButtonHidden ? undefined : 'Scroll tabs right'
+        "
         :class="[
           {
             [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,

From 752832da115afac56cca97bb7110d1ace8f4ce28 Mon Sep 17 00:00:00 2001
From: Marghen <berlanda.marco@gmail.com>
Date: Fri, 14 Nov 2025 12:38:57 +0100
Subject: [PATCH 3/3] fix: update test

---
 .../CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap b/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap
index 4fb7ccb29..69440511e 100644
--- a/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap
+++ b/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
-<div class="cv-tabs ABC-class-123" style="width: 100%;" aria-label="ABC-aria-label-123">
-  <div data-tabs="" class="cv-tab bx--tabs--scrollable ABC-class-123" role="navigation" aria-label="ABC-aria-label-123"><button aria-hidden="true" aria-label="scroll left" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+<div class="cv-tabs" style="width: 100%;">
+  <div data-tabs="" class="cv-tab bx--tabs--scrollable ABC-class-123" role="navigation" aria-label="ABC-aria-label-123"><button class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
         <path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path>
       </svg></button>
     <!--v-if-->
@@ -11,7 +11,7 @@ exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
       <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-2-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-selected="false" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
       <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-3-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-selected="false" tabindex="-1" type="button">Tab 3 label</button></li>
     </ul>
-    <!--v-if--><button aria-hidden="true" aria-label="scroll right" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+    <!--v-if--><button class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
         <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
       </svg></button>
   </div>