Skip to content

Commit c526a7c

Browse files
anicyneanicyne
committed
Set aria-hidden for disabled options
Refs: #7226
1 parent ebf0846 commit c526a7c

File tree

4 files changed

+39
-28
lines changed

4 files changed

+39
-28
lines changed

‎KNOWN_ISSUES.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
# Known Issues
44

5+
## select
6+
7+
- Disabled options in KolSelect affect the total count in screen readers When an option in `KolSelect` is set to `disabled: true`, it is still counted by screen readers. This leads to incorrect numbering, for example, NVDA announces "2 of 4" instead of "2 of 3". To ensure the correct order, the `aria-hidden="true"` attribute should be set for `disabled` options. This will hide the disabled option from screen readers and keep the total number of items consistent.
8+
9+
[🐞 GitHub issue #7453](https://github.com/public-ui/kolibri/pull/7453)
10+
511
## input-color
612

713
The component InputColor is a wrapper for the native HTML element `<input type="color">` which has accessibility problems:

‎packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
1818
<form>
1919
<input hidden="" type="submit">
2020
<select accesskey="V" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
21-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
21+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
2222
Frau
2323
</option>
2424
<option class="kol-select__option" value="-1">
@@ -54,7 +54,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
5454
<form>
5555
<input hidden="" type="submit">
5656
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
57-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
57+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
5858
Frau
5959
</option>
6060
<option class="kol-select__option" value="-1">
@@ -90,7 +90,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
9090
<form>
9191
<input hidden="" type="submit">
9292
<select autocapitalize="off" autocorrect="off" class="kol-select kol-select--disabled" disabled="" id="id-nonce" name="field">
93-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
93+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
9494
Frau
9595
</option>
9696
<option class="kol-select__option" value="-1">
@@ -126,7 +126,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
126126
<form>
127127
<input hidden="" type="submit">
128128
<select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
129-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
129+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
130130
Frau
131131
</option>
132132
<option class="kol-select__option" value="-1">
@@ -168,7 +168,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
168168
<form>
169169
<input hidden="" type="submit">
170170
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
171-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
171+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
172172
Frau
173173
</option>
174174
<option class="kol-select__option" value="-1">
@@ -210,7 +210,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
210210
<form>
211211
<input hidden="" type="submit">
212212
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
213-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
213+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
214214
Frau
215215
</option>
216216
<option class="kol-select__option" value="-1">
@@ -248,7 +248,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
248248
<form>
249249
<input hidden="" type="submit">
250250
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
251-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
251+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
252252
Frau
253253
</option>
254254
<option class="kol-select__option" value="-1">
@@ -287,7 +287,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
287287
<form>
288288
<input hidden="" type="submit">
289289
<select aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
290-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
290+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
291291
Frau
292292
</option>
293293
<option class="kol-select__option" value="-1">
@@ -323,7 +323,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
323323
<form>
324324
<input hidden="" type="submit">
325325
<select aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
326-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
326+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
327327
Frau
328328
</option>
329329
<option class="kol-select__option" value="-1">
@@ -360,7 +360,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
360360
<form>
361361
<input hidden="" type="submit">
362362
<select accesskey="V" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
363-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
363+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
364364
Frau
365365
</option>
366366
<option class="kol-select__option" value="-1">
@@ -396,7 +396,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
396396
<form>
397397
<input hidden="" type="submit">
398398
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
399-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
399+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
400400
Frau
401401
</option>
402402
<option class="kol-select__option" value="-1">
@@ -432,7 +432,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
432432
<form>
433433
<input hidden="" type="submit">
434434
<select autocapitalize="off" autocorrect="off" class="kol-select kol-select--disabled" disabled="" id="id-nonce" multiple="" name="field">
435-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
435+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
436436
Frau
437437
</option>
438438
<option class="kol-select__option" value="-1">
@@ -468,7 +468,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
468468
<form>
469469
<input hidden="" type="submit">
470470
<select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
471-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
471+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
472472
Frau
473473
</option>
474474
<option class="kol-select__option" value="-1">
@@ -510,7 +510,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
510510
<form>
511511
<input hidden="" type="submit">
512512
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
513-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
513+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
514514
Frau
515515
</option>
516516
<option class="kol-select__option" value="-1">
@@ -552,7 +552,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
552552
<form>
553553
<input hidden="" type="submit">
554554
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
555-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
555+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
556556
Frau
557557
</option>
558558
<option class="kol-select__option" value="-1">
@@ -590,7 +590,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
590590
<form>
591591
<input hidden="" type="submit">
592592
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
593-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
593+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
594594
Frau
595595
</option>
596596
<option class="kol-select__option" value="-1">
@@ -629,7 +629,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
629629
<form>
630630
<input hidden="" type="submit">
631631
<select aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
632-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
632+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
633633
Frau
634634
</option>
635635
<option class="kol-select__option" value="-1">
@@ -665,7 +665,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
665665
<form>
666666
<input hidden="" type="submit">
667667
<select aria-describedby="id-nonce-msg" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
668-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
668+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
669669
Frau
670670
</option>
671671
<option class="kol-select__option" value="-1">
@@ -701,7 +701,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
701701
<form>
702702
<input hidden="" type="submit">
703703
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
704-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
704+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
705705
Frau
706706
</option>
707707
<option class="kol-select__option" value="-1">
@@ -738,7 +738,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
738738
<form>
739739
<input hidden="" type="submit">
740740
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
741-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
741+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
742742
Frau
743743
</option>
744744
<option class="kol-select__option" value="-1">
@@ -774,7 +774,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
774774
<form>
775775
<input hidden="" type="submit">
776776
<select autocapitalize="off" autocorrect="off" class="kol-select kol-select--touched" id="id-nonce" multiple="" name="field">
777-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
777+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
778778
Frau
779779
</option>
780780
<option class="kol-select__option" value="-1">
@@ -810,7 +810,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
810810
<form>
811811
<input hidden="" type="submit">
812812
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
813-
<option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
813+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
814814
Frau
815815
</option>
816816
<option class="kol-select__option" value="-1">
@@ -846,7 +846,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
846846
<form>
847847
<input hidden="" type="submit">
848848
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
849-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
849+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
850850
Frau
851851
</option>
852852
<option class="kol-select__option" value="-1">
@@ -883,7 +883,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
883883
<form>
884884
<input hidden="" type="submit">
885885
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
886-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
886+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
887887
Frau
888888
</option>
889889
<option class="kol-select__option" value="-1">
@@ -919,7 +919,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
919919
<form>
920920
<input hidden="" type="submit">
921921
<select autocapitalize="off" autocorrect="off" class="kol-select kol-select--touched" id="id-nonce" name="field">
922-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
922+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
923923
Frau
924924
</option>
925925
<option class="kol-select__option" value="-1">
@@ -955,7 +955,7 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
955955
<form>
956956
<input hidden="" type="submit">
957957
<select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
958-
<option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
958+
<option aria-hidden="true" class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
959959
Frau
960960
</option>
961961
<option class="kol-select__option" value="-1">

‎packages/components/src/functional-components/inputs/NativeOption/NativeOption.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const NativeOptionFc: FC<NativeOptionProps> = ({
4242
)}
4343
selected={isSelected}
4444
disabled={disabled}
45+
aria-hidden={disabled ? 'true' : undefined} //See Known Issue: https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md
4546
value={index || value}
4647
{...other}
4748
>

‎packages/samples/react/src/components/select/partials/cases.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { COUNTRY_OPTIONS } from '../../../shares/country';
99

1010
const SALUTATION_OPTIONS: SelectOption<string>[] = [
1111
{
12-
label: 'Select salutation',
12+
label: 'No salutation',
1313
value: '',
1414
},
1515
{
@@ -26,6 +26,10 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
2626
},
2727
];
2828

29+
const SALUTATION_OPTIONS_DISABLED = SALUTATION_OPTIONS.map((option, index) =>
30+
index === 0 ? { label: 'Select salutation', value: '', disabled: true } : option,
31+
);
32+
2933
type GroupedOptionsType = Record<string, Optgroup<StencilUnknown>>;
3034

3135
const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option) => {
@@ -58,7 +62,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
5862
}}
5963
/>
6064
<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
61-
<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
65+
<KolSelect {...props} _options={SALUTATION_OPTIONS_DISABLED} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
6266
<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
6367
<KolSelect
6468
{...props}

0 commit comments

Comments
 (0)