From 3e7366aeefaa6d3a9ae529b5676a486ea9354a43 Mon Sep 17 00:00:00 2001
From: vagusX <vagusxl@gmail.com>
Date: Mon, 5 Aug 2024 15:57:03 +0800
Subject: [PATCH] feat: improve a11y (#242)

---
 src/index.tsx                           |  4 ++
 tests/__snapshots__/index.test.tsx.snap | 90 +++++++++++++++++++++++++
 2 files changed, 94 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 0bb2e73..05bbfb3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -106,6 +106,8 @@ const InternalSegmentedOption: React.FC<{
       className={classNames(className, {
         [`${prefixCls}-item-disabled`]: disabled,
       })}
+      role="option"
+      aria-selected={checked}
     >
       <input
         className={`${prefixCls}-item-input`}
@@ -173,6 +175,8 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     return (
       <div
+        role="listbox"
+        aria-label="segmented control"
         {...divProps}
         className={classNames(
           prefixCls,
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index fb6277d..80def68 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`rc-segmented render empty segmented 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
@@ -12,13 +14,17 @@ exports[`rc-segmented render empty segmented 1`] = `
 
 exports[`rc-segmented render label with ReactNode 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -33,7 +39,9 @@ exports[`rc-segmented render label with ReactNode 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -50,7 +58,9 @@ exports[`rc-segmented render label with ReactNode 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -70,13 +80,17 @@ exports[`rc-segmented render label with ReactNode 1`] = `
 
 exports[`rc-segmented render segmented ok 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -91,7 +105,9 @@ exports[`rc-segmented render segmented ok 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -105,7 +121,9 @@ exports[`rc-segmented render segmented ok 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -124,13 +142,17 @@ exports[`rc-segmented render segmented ok 1`] = `
 
 exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -145,7 +167,9 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -159,7 +183,9 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -178,13 +204,17 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
 
 exports[`rc-segmented render segmented with options 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -199,7 +229,9 @@ exports[`rc-segmented render segmented with options 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -213,7 +245,9 @@ exports[`rc-segmented render segmented with options 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -232,13 +266,17 @@ exports[`rc-segmented render segmented with options 1`] = `
 
 exports[`rc-segmented render segmented with options null/undefined 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented rc-segmented-disabled"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-disabled"
+      role="option"
     >
       <input
         checked=""
@@ -251,7 +289,9 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
       />
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item rc-segmented-item-disabled"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -263,7 +303,9 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
       />
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item rc-segmented-item-disabled"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -281,13 +323,17 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
 
 exports[`rc-segmented render segmented with options: 1 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -302,7 +348,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -316,7 +364,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -330,7 +380,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -344,7 +396,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -363,13 +417,17 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
 
 exports[`rc-segmented render segmented with options: 2 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -384,7 +442,9 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -398,7 +458,9 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -417,13 +479,17 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
 
 exports[`rc-segmented render segmented with options: disabled 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -438,7 +504,9 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item rc-segmented-item-disabled"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -453,7 +521,9 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -472,13 +542,17 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
 
 exports[`rc-segmented render segmented with title 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected"
+      role="option"
     >
       <input
         checked=""
@@ -493,7 +567,9 @@ exports[`rc-segmented render segmented with title 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -507,7 +583,9 @@ exports[`rc-segmented render segmented with title 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -522,7 +600,9 @@ exports[`rc-segmented render segmented with title 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -536,7 +616,9 @@ exports[`rc-segmented render segmented with title 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -555,13 +637,17 @@ exports[`rc-segmented render segmented with title 1`] = `
 
 exports[`rc-segmented render segmented: disabled 1`] = `
 <div
+  aria-label="segmented control"
   class="rc-segmented rc-segmented-disabled"
+  role="listbox"
 >
   <div
     class="rc-segmented-group"
   >
     <label
+      aria-selected="true"
       class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-disabled"
+      role="option"
     >
       <input
         checked=""
@@ -577,7 +663,9 @@ exports[`rc-segmented render segmented: disabled 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item rc-segmented-item-disabled"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"
@@ -592,7 +680,9 @@ exports[`rc-segmented render segmented: disabled 1`] = `
       </div>
     </label>
     <label
+      aria-selected="false"
       class="rc-segmented-item rc-segmented-item-disabled"
+      role="option"
     >
       <input
         class="rc-segmented-item-input"