From c522d13d824f03a8c5a7ad9ac285207c18b96ee6 Mon Sep 17 00:00:00 2001
From: Jony J <1844749591@qq.com>
Date: Fri, 24 Jan 2025 17:47:16 +0800
Subject: [PATCH] feat: improved accessibility (#300)

* feat: improved accessibility (#299)

* feat: add role attribute to InternalSegmentedOption for improved accessibility

* fix: update role and aria attributes

* test: update snapshot

* chore: add @rc-component/np dependency and remove np package

* chore: add np package for release management
---
 package.json                            |   2 +-
 src/index.tsx                           |   3 +-
 tests/__snapshots__/index.test.tsx.snap | 120 ++++++++++++++++--------
 3 files changed, 83 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 36bd217..76eedd0 100644
--- a/package.json
+++ b/package.json
@@ -91,4 +91,4 @@
   "tnpm": {
     "mode": "npm"
   }
-}
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 0b6bb1b..9a32cd3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -134,7 +134,8 @@ const InternalSegmentedOption: React.FC<{
       <div
         className={`${prefixCls}-item-label`}
         title={title}
-        aria-selected={checked}
+        role="radio"
+        aria-checked={checked}
       >
         {label}
       </div>
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index cba0121..32bb125 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -32,8 +32,9 @@ exports[`rc-segmented render label with ReactNode 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -47,8 +48,9 @@ exports[`rc-segmented render label with ReactNode 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
       >
         <div
           id="android"
@@ -65,8 +67,9 @@ exports[`rc-segmented render label with ReactNode 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
       >
         <h2>
           Web
@@ -96,8 +99,9 @@ exports[`rc-segmented render segmented ok 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -111,8 +115,9 @@ exports[`rc-segmented render segmented ok 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -126,8 +131,9 @@ exports[`rc-segmented render segmented ok 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -156,8 +162,9 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -171,8 +178,9 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -186,8 +194,9 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web3"
       >
         Web3
@@ -216,8 +225,9 @@ exports[`rc-segmented render segmented with options 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -231,8 +241,9 @@ exports[`rc-segmented render segmented with options 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -246,8 +257,9 @@ exports[`rc-segmented render segmented with options 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -276,8 +288,9 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
       />
     </label>
     <label
@@ -289,8 +302,9 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
       />
     </label>
     <label
@@ -302,8 +316,9 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title=""
       />
     </label>
@@ -330,8 +345,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="1"
       >
         1
@@ -345,8 +361,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="2"
       >
         2
@@ -360,8 +377,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="3"
       >
         3
@@ -375,8 +393,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="4"
       >
         4
@@ -390,8 +409,9 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="5"
       >
         5
@@ -420,8 +440,9 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -435,8 +456,9 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -450,8 +472,9 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -480,8 +503,9 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -496,8 +520,9 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -511,8 +536,9 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -541,8 +567,9 @@ exports[`rc-segmented render segmented with title 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -556,8 +583,9 @@ exports[`rc-segmented render segmented with title 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="hello1"
       >
         hello1
@@ -571,8 +599,9 @@ exports[`rc-segmented render segmented with title 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
       >
         <div>
           test1
@@ -587,8 +616,9 @@ exports[`rc-segmented render segmented with title 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="hello1.5"
       >
         hello1
@@ -602,8 +632,9 @@ exports[`rc-segmented render segmented with title 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title=""
       >
         foo1
@@ -632,8 +663,9 @@ exports[`rc-segmented render segmented: disabled 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -648,8 +680,9 @@ exports[`rc-segmented render segmented: disabled 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -664,8 +697,9 @@ exports[`rc-segmented render segmented: disabled 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -694,8 +728,9 @@ exports[`rc-segmented should render vertical segmented 1`] = `
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -709,8 +744,9 @@ exports[`rc-segmented should render vertical segmented 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -724,8 +760,9 @@ exports[`rc-segmented should render vertical segmented 1`] = `
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
@@ -754,8 +791,9 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
         type="radio"
       />
       <div
-        aria-selected="true"
+        aria-checked="true"
         class="rc-segmented-item-label"
+        role="radio"
         title="iOS"
       >
         iOS
@@ -769,8 +807,9 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Android"
       >
         Android
@@ -784,8 +823,9 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
         type="radio"
       />
       <div
-        aria-selected="false"
+        aria-checked="false"
         class="rc-segmented-item-label"
+        role="radio"
         title="Web"
       >
         Web
