Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 27, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc04e6d
fix: add aria-hidden attribute to visually hidden input element
Oct 25, 2024
bf9c01c
test: update snapshot
Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ const InternalSegmentedOption: React.FC<{
>
<input
className={`${prefixCls}-item-input`}
aria-hidden="true"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

input 不是内部状态管理，而是专门用来做无障碍的。如果影响读屏器，应该是把其他的藏起来，而只保留 input 的读屏能力

type="radio"
disabled={disabled}
checked={checked}
Expand Down
40 changes: 40 additions & 0 deletions tests/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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=""
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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=""
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand Down
Loading