From e736ecafff59f9d4eb88b366ef1e9d26449b8ca3 Mon Sep 17 00:00:00 2001
From: Noah Gregory <noahmgregory@gmail.com>
Date: Thu, 14 Mar 2024 05:32:39 -0400
Subject: [PATCH] fix(Carousel): add tab-based ARIA roles (#1516)

---
 src/runtime/components/elements/Carousel.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue
index ac951719..b8e00abc 100644
--- a/src/runtime/components/elements/Carousel.vue
+++ b/src/runtime/components/elements/Carousel.vue
@@ -5,6 +5,7 @@
         v-for="(item, index) in items"
         :key="index"
         :class="ui.item"
+        :role="indicators ? 'tabpanel' : null"
       >
         <slot :item="item" :index="index" />
       </div>
@@ -34,11 +35,13 @@
       </slot>
     </div>
 
-    <div v-if="indicators" :class="ui.indicators.wrapper">
+    <div v-if="indicators" role="tablist" :class="ui.indicators.wrapper">
       <template v-for="page in pages" :key="page">
         <slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page">
           <button
             type="button"
+            role="tab"
+            :aria-selected="page === currentPage"
             :class="[
               ui.indicators.base,
               page === currentPage ? ui.indicators.active : ui.indicators.inactive