Skip to content

Commit d8b63c0

Browse files
meet-studentmeet-student
authored
fix: add aria-disabled attribute for disabled options in Select component (#1212)
* fix: add aria-disabled attribute for disabled options in Select component * chore: update snap
1 parent 2cc7ab3 commit d8b63c0

5 files changed

Lines changed: 37 additions & 1 deletion

File tree

‎src/OptionList.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
295295
return null;
296296
}
297297
const itemData = item.data || {};
298-
const { value } = itemData;
298+
const { value, disabled } = itemData;
299299
const { group } = item;
300300
const attrs = pickAttrs(itemData, true);
301301
const mergedLabel = getLabel(item);
@@ -306,6 +306,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
306306
key={index}
307307
{...getItemAriaProps(item, index)}
308308
aria-selected={isAriaSelected(value)}
309+
aria-disabled={disabled}
309310
>
310311
{value}
311312
</div>
@@ -401,6 +402,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
401402
{...pickAttrs(passedProps)}
402403
{...(!virtual ? getItemAriaProps(item, itemIndex) : {})}
403404
aria-selected={virtual ? undefined : isAriaSelected(value)}
405+
aria-disabled={mergedDisabled}
404406
className={optionClassName}
405407
title={optionTitle}
406408
onMouseMove={() => {

‎tests/Accessibility.test.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,5 +321,25 @@ describe('Select.Accessibility', () => {
321321
expect(input).toHaveAttribute('aria-controls', 'select_list');
322322
expect(input).toHaveAttribute('aria-activedescendant', 'select_list_0');
323323
});
324+
325+
// https://github.com/ant-design/ant-design/issues/xxxxx
326+
it('aria-disabled should be set on disabled options', () => {
327+
const { container } = render(
328+
<Select
329+
open
330+
options={[
331+
{ label: 'Option A', value: 'a' },
332+
{ label: 'Option B', value: 'b', disabled: true },
333+
{ label: 'Option C', value: 'c' },
334+
]}
335+
/>,
336+
);
337+
338+
const optionItems = container.querySelectorAll('[role="option"]');
339+
const optionA = Array.from(optionItems).find((el) => el.textContent === 'a');
340+
const optionB = Array.from(optionItems).find((el) => el.textContent === 'b');
341+
expect(optionA).not.toHaveAttribute('aria-disabled', 'true');
342+
expect(optionB).toHaveAttribute('aria-disabled', 'true');
343+
});
324344
});
325345
});

‎tests/__snapshots__/OptionList.test.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ exports[`OptionList renders correctly virtual 1`] = `
4444
group1
4545
</div>
4646
<div
47+
aria-disabled="false"
4748
aria-label="value-1"
4849
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
4950
title="1"
@@ -120,6 +121,7 @@ exports[`OptionList renders correctly without virtual 1`] = `
120121
group1
121122
</div>
122123
<div
124+
aria-disabled="false"
123125
aria-label="value-1"
124126
aria-selected="true"
125127
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"

‎tests/__snapshots__/Select.test.tsx.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
4242
style="display: flex; flex-direction: column;"
4343
>
4444
<div
45+
aria-disabled="false"
4546
class="rc-select-item rc-select-item-option rc-select-item-option-active"
4647
title="1"
4748
>
@@ -62,6 +63,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
6263
</span>
6364
</div>
6465
<div
66+
aria-disabled="false"
6567
class="rc-select-item rc-select-item-option"
6668
title="2"
6769
>
@@ -274,6 +276,7 @@ exports[`Select.Basic render should support fieldName 1`] = `
274276
groupLabel
275277
</div>
276278
<div
279+
aria-disabled="false"
277280
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
278281
title="label"
279282
>
@@ -320,6 +323,7 @@ exports[`Select.Basic render should support fieldName 2`] = `
320323
groupLabel
321324
</div>
322325
<div
326+
aria-disabled="false"
323327
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
324328
title="label"
325329
>
@@ -366,6 +370,7 @@ exports[`Select.Basic render should support fieldName 3`] = `
366370
groupLabel
367371
</div>
368372
<div
373+
aria-disabled="false"
369374
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
370375
title="label"
371376
>
@@ -433,6 +438,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
433438
style="display: flex; flex-direction: column;"
434439
>
435440
<div
441+
aria-disabled="false"
436442
class="rc-select-item rc-select-item-option rc-select-item-option-active rc-select-item-option-selected"
437443
title="1"
438444
>
@@ -455,6 +461,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
455461
</span>
456462
</div>
457463
<div
464+
aria-disabled="false"
458465
class="rc-select-item rc-select-item-option"
459466
title="2"
460467
>
@@ -530,6 +537,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
530537
style="display: flex; flex-direction: column;"
531538
>
532539
<div
540+
aria-disabled="false"
533541
class="rc-select-item rc-select-item-option rc-select-item-option-active"
534542
title="1"
535543
>
@@ -550,6 +558,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
550558
</span>
551559
</div>
552560
<div
561+
aria-disabled="false"
553562
class="rc-select-item rc-select-item-option"
554563
title="2"
555564
>

‎tests/__snapshots__/Tags.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
125125
Manager
126126
</div>
127127
<div
128+
aria-disabled="false"
128129
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
129130
title="Jack"
130131
>
@@ -153,6 +154,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
153154
Engineer
154155
</div>
155156
<div
157+
aria-disabled="false"
156158
class="rc-select-item rc-select-item-option rc-select-item-option-grouped"
157159
title="yiminghe"
158160
>
@@ -173,6 +175,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
173175
</span>
174176
</div>
175177
<div
178+
aria-disabled="false"
176179
class="rc-select-item rc-select-item-option rc-select-item-option-selected"
177180
title="foo"
178181
>

0 commit comments

Comments
 (0)