From 463dc35064237873ec87ac6232389c2685ec8013 Mon Sep 17 00:00:00 2001
From: ifeichuan <feichuan05@gmail.com>
Date: Mon, 8 Jun 2026 22:14:21 +0800
Subject: [PATCH] fix(Carousel): make slide indicators keyboard accessible

The slide indicators were rendered as `<motion.div>` with only an
`onClick` handler, so keyboard-only users could neither focus them with
Tab nor activate them with Enter/Space (issue #976).

Switch the indicators to `<motion.button type="button">`, which is
natively focusable and activatable via Enter/Space, and add:

- `aria-label="Go to slide N"` so screen readers announce each control
- `aria-current` to expose which slide is active
- button resets (border/padding/appearance) to preserve the dot styling
- a `:focus-visible` outline so keyboard focus is visible

Updated across all 4 variants (JS/TS x CSS/Tailwind).
---
 src/content/Components/Carousel/Carousel.css     | 8 ++++++++
 src/content/Components/Carousel/Carousel.jsx     | 5 ++++-
 src/tailwind/Components/Carousel/Carousel.jsx    | 7 +++++--
 src/ts-default/Components/Carousel/Carousel.css  | 8 ++++++++
 src/ts-default/Components/Carousel/Carousel.tsx  | 5 ++++-
 src/ts-tailwind/Components/Carousel/Carousel.tsx | 7 +++++--
 6 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/content/Components/Carousel/Carousel.css b/src/content/Components/Carousel/Carousel.css
index 4a9e443fd..9aab9f289 100644
--- a/src/content/Components/Carousel/Carousel.css
+++ b/src/content/Components/Carousel/Carousel.css
@@ -121,11 +121,19 @@
 .carousel-indicator {
   height: 8px;
   width: 8px;
+  border: none;
+  padding: 0;
+  appearance: none;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color 150ms;
 }
 
+.carousel-indicator:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
 .carousel-indicator.active {
   background-color: #fff;
 }
diff --git a/src/content/Components/Carousel/Carousel.jsx b/src/content/Components/Carousel/Carousel.jsx
index 5ca67412a..57b45485d 100644
--- a/src/content/Components/Carousel/Carousel.jsx
+++ b/src/content/Components/Carousel/Carousel.jsx
@@ -245,9 +245,12 @@ export default function Carousel({
       <div className={`carousel-indicators-container ${round ? 'round' : ''}`}>
         <div className="carousel-indicators">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
               className={`carousel-indicator ${activeIndex === index ? 'active' : 'inactive'}`}
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
               animate={{
                 scale: activeIndex === index ? 1.2 : 1
               }}
diff --git a/src/tailwind/Components/Carousel/Carousel.jsx b/src/tailwind/Components/Carousel/Carousel.jsx
index f2c611f28..b7f00d8a5 100644
--- a/src/tailwind/Components/Carousel/Carousel.jsx
+++ b/src/tailwind/Components/Carousel/Carousel.jsx
@@ -251,9 +251,12 @@ export default function Carousel({
       <div className={`flex w-full justify-center ${round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : ''}`}>
         <div className="mt-4 flex w-[150px] justify-between px-8">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
-              className={`h-2 w-2 rounded-full cursor-pointer transition-colors duration-150 ${
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
+              className={`h-2 w-2 rounded-full cursor-pointer border-0 p-0 appearance-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ${
                 activeIndex === index
                   ? round
                     ? 'bg-white'
diff --git a/src/ts-default/Components/Carousel/Carousel.css b/src/ts-default/Components/Carousel/Carousel.css
index 1f8ff0c26..a599a79c4 100644
--- a/src/ts-default/Components/Carousel/Carousel.css
+++ b/src/ts-default/Components/Carousel/Carousel.css
@@ -121,11 +121,19 @@
 .carousel-indicator {
   height: 8px;
   width: 8px;
+  border: none;
+  padding: 0;
+  appearance: none;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color 150ms;
 }
 
+.carousel-indicator:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
 .carousel-indicator.active {
   background-color: #fff;
 }
diff --git a/src/ts-default/Components/Carousel/Carousel.tsx b/src/ts-default/Components/Carousel/Carousel.tsx
index 205e7791f..a075e4c7d 100644
--- a/src/ts-default/Components/Carousel/Carousel.tsx
+++ b/src/ts-default/Components/Carousel/Carousel.tsx
@@ -271,9 +271,12 @@ export default function Carousel({
       <div className={`carousel-indicators-container ${round ? 'round' : ''}`}>
         <div className="carousel-indicators">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
               className={`carousel-indicator ${activeIndex === index ? 'active' : 'inactive'}`}
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
               animate={{
                 scale: activeIndex === index ? 1.2 : 1
               }}
diff --git a/src/ts-tailwind/Components/Carousel/Carousel.tsx b/src/ts-tailwind/Components/Carousel/Carousel.tsx
index 5a225acb7..78c05fb55 100644
--- a/src/ts-tailwind/Components/Carousel/Carousel.tsx
+++ b/src/ts-tailwind/Components/Carousel/Carousel.tsx
@@ -279,9 +279,12 @@ export default function Carousel({
       <div className={`flex w-full justify-center ${round ? 'absolute z-20 bottom-12 left-1/2 -translate-x-1/2' : ''}`}>
         <div className="mt-4 flex w-[150px] justify-between px-8">
           {items.map((_, index) => (
-            <motion.div
+            <motion.button
+              type="button"
               key={index}
-              className={`h-2 w-2 rounded-full cursor-pointer transition-colors duration-150 ${
+              aria-label={`Go to slide ${index + 1}`}
+              aria-current={activeIndex === index}
+              className={`h-2 w-2 rounded-full cursor-pointer border-0 p-0 appearance-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ${
                 activeIndex === index
                   ? round
                     ? 'bg-white'