From 30bab276a18c8fb88d9d81d471205d16b81eea7a Mon Sep 17 00:00:00 2001
From: Jay <wisehodl@pm.me>
Date: Sun, 20 Jul 2025 11:49:51 -0400
Subject: [PATCH] Made color tool carousel better described for accessibility.

---
 src/App.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index dc38dae..2a7e9a7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -87,17 +87,24 @@ function MobileRightNav({ onClick, isOpen }: MenuButtonProps) {
 function MobileFirstZone() {
   return (
     <section className={styles.mobileFirstZone} aria-label="Color tools">
-      <div className={styles.tabWrapper} role="tablist">
+      <div
+        className={styles.tabWrapper}
+        role="region"
+        aria-roledescription="carousel"
+        aria-label="Swipe left or right to view different tools"
+      >
         <div
           className={clsx(styles.tab, styles.colorPickerWrapper)}
-          role="tabpanel"
+          role="group"
+          aria-roledescription="slide"
           aria-label="Color Picker"
         >
           <ColorPicker />
         </div>
         <div
           className={clsx(styles.tab, styles.colorValuesWrapper)}
-          role="tabpanel"
+          role="group"
+          aria-roledescription="slide"
           aria-label="Color values"
         >
           <ColorValues />