fix: add aria-hidden attribute to visually hidden input element (#279)

Co-authored-by: 小豪 <[email protected]>
react-component · Oct 27, 2024 · 6bedd52 · 6bedd52
1 parent 02aa14a
commit 6bedd52
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -107,6 +107,7 @@ const InternalSegmentedOption: React.FC<{
     >
       <input
         className={`${prefixCls}-item-input`}
+        aria-hidden="true"
         type="radio"
         disabled={disabled}
         checked={checked}

diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`rc-segmented render label with ReactNode 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -42,6 +43,7 @@ exports[`rc-segmented render label with ReactNode 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -61,6 +63,7 @@ exports[`rc-segmented render label with ReactNode 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -91,6 +94,7 @@ exports[`rc-segmented render segmented ok 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -108,6 +112,7 @@ exports[`rc-segmented render segmented ok 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -124,6 +129,7 @@ exports[`rc-segmented render segmented ok 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -153,6 +159,7 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -170,6 +177,7 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -186,6 +194,7 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -215,6 +224,7 @@ exports[`rc-segmented render segmented with options 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -232,6 +242,7 @@ exports[`rc-segmented render segmented with options 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -248,6 +259,7 @@ exports[`rc-segmented render segmented with options 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -277,6 +289,7 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
       class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         disabled=""
@@ -292,6 +305,7 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
       class="rc-segmented-item rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         disabled=""
         type="radio"
@@ -306,6 +320,7 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
       class="rc-segmented-item rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         disabled=""
         type="radio"
@@ -334,6 +349,7 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -351,6 +367,7 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -367,6 +384,7 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -383,6 +401,7 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -399,6 +418,7 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -428,6 +448,7 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -445,6 +466,7 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -461,6 +483,7 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -490,6 +513,7 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -507,6 +531,7 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
       class="rc-segmented-item rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         disabled=""
         type="radio"
@@ -524,6 +549,7 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -553,6 +579,7 @@ exports[`rc-segmented render segmented with title 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -570,6 +597,7 @@ exports[`rc-segmented render segmented with title 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -586,6 +614,7 @@ exports[`rc-segmented render segmented with title 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -603,6 +632,7 @@ exports[`rc-segmented render segmented with title 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -619,6 +649,7 @@ exports[`rc-segmented render segmented with title 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -648,6 +679,7 @@ exports[`rc-segmented render segmented: disabled 1`] = `
       class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         disabled=""
@@ -666,6 +698,7 @@ exports[`rc-segmented render segmented: disabled 1`] = `
       class="rc-segmented-item rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         disabled=""
         type="radio"
@@ -683,6 +716,7 @@ exports[`rc-segmented render segmented: disabled 1`] = `
       class="rc-segmented-item rc-segmented-item-disabled"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         disabled=""
         type="radio"
@@ -713,6 +747,7 @@ exports[`rc-segmented should render vertical segmented 1`] = `
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -730,6 +765,7 @@ exports[`rc-segmented should render vertical segmented 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -746,6 +782,7 @@ exports[`rc-segmented should render vertical segmented 1`] = `
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -775,6 +812,7 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
       class="rc-segmented-item rc-segmented-item-selected"
     >
       <input
+        aria-hidden="true"
         checked=""
         class="rc-segmented-item-input"
         type="radio"
@@ -792,6 +830,7 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />
@@ -808,6 +847,7 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
       class="rc-segmented-item"
     >
       <input
+        aria-hidden="true"
         class="rc-segmented-item-input"
         type="radio"
       />