Skip to content

Commit 7fe378c

Browse files
rynodivinorynodivino
authored
fix(a11y): ] MenuItemGroup, SubMenuList add some role attributes for improved a11y (#569)
* fix(MenuItemGroup): Address a11y issues via role attributes * fix(SubMenuList): Add role=menu to SubMenuList as this role is required by the children menuitems * chore: pr feedback for #569
1 parent 15c36f1 commit 7fe378c

File tree

7 files changed

+55
-4
lines changed

7 files changed

+55
-4
lines changed

‎src/MenuItemGroup.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import * as React from 'react';
21
import classNames from 'classnames';
32
import omit from 'rc-util/lib/omit';
4-
import { parseChildren } from './utils/nodeUtil';
3+
import * as React from 'react';
54
import { MenuContext } from './context/MenuContext';
65
import { useFullPath, useMeasure } from './context/PathContext';
76
import type { MenuItemGroupType } from './interface';
7+
import { parseChildren } from './utils/nodeUtil';
88

99
export interface MenuItemGroupProps
1010
extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {
@@ -32,17 +32,21 @@ const InternalMenuItemGroup = ({
3232

3333
return (
3434
<li
35+
role="presentation"
3536
{...restProps}
3637
onClick={e => e.stopPropagation()}
3738
className={classNames(groupPrefixCls, className)}
3839
>
3940
<div
41+
role="presentation"
4042
className={`${groupPrefixCls}-title`}
4143
title={typeof title === 'string' ? title : undefined}
4244
>
4345
{title}
4446
</div>
45-
<ul className={`${groupPrefixCls}-list`}>{children}</ul>
47+
<ul role="group" className={`${groupPrefixCls}-list`}>
48+
{children}
49+
</ul>
4650
</li>
4751
);
4852
};
@@ -59,7 +63,7 @@ export default function MenuItemGroup({
5963

6064
const measure = useMeasure();
6165
if (measure) {
62-
return childList as any as React.ReactElement;
66+
return (childList as any) as React.ReactElement;
6367
}
6468

6569
return (

‎src/SubMenu/SubMenuList.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const InternalSubMenuList = (
2222
`${prefixCls}-${mode === 'inline' ? 'inline' : 'vertical'}`,
2323
className,
2424
)}
25+
role="menu"
2526
{...restProps}
2627
data-menu-list
2728
ref={ref}

‎tests/__snapshots__/Keyboard.spec.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ HTMLCollection [
3232
class="rc-menu rc-menu-sub rc-menu-inline"
3333
data-menu-list="true"
3434
id="rc-menu-uuid-test-light-popup"
35+
role="menu"
3536
>
3637
<li
3738
class="rc-menu-item"

‎tests/__snapshots__/Menu.spec.js.snap‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,18 @@ HTMLCollection [
5353
>
5454
<li
5555
class="rc-menu-item-group"
56+
role="presentation"
5657
>
5758
<div
5859
class="rc-menu-item-group-title"
60+
role="presentation"
5961
title="g1"
6062
>
6163
g1
6264
</div>
6365
<ul
6466
class="rc-menu-item-group-list"
67+
role="group"
6568
>
6669
<li
6770
class="rc-menu-item"
@@ -94,15 +97,18 @@ HTMLCollection [
9497
</li>
9598
<li
9699
class="rc-menu-item-group"
100+
role="presentation"
97101
>
98102
<div
99103
class="rc-menu-item-group-title"
104+
role="presentation"
100105
title="g2"
101106
>
102107
g2
103108
</div>
104109
<ul
105110
class="rc-menu-item-group-list"
111+
role="group"
106112
>
107113
<li
108114
class="rc-menu-item"
@@ -161,15 +167,18 @@ HTMLCollection [
161167
>
162168
<li
163169
class="rc-menu-item-group"
170+
role="presentation"
164171
>
165172
<div
166173
class="rc-menu-item-group-title"
174+
role="presentation"
167175
title="g1"
168176
>
169177
g1
170178
</div>
171179
<ul
172180
class="rc-menu-item-group-list"
181+
role="group"
173182
>
174183
<li
175184
class="rc-menu-item"
@@ -202,15 +211,18 @@ HTMLCollection [
202211
</li>
203212
<li
204213
class="rc-menu-item-group"
214+
role="presentation"
205215
>
206216
<div
207217
class="rc-menu-item-group-title"
218+
role="presentation"
208219
title="g2"
209220
>
210221
g2
211222
</div>
212223
<ul
213224
class="rc-menu-item-group-list"
225+
role="group"
214226
>
215227
<li
216228
class="rc-menu-item"
@@ -268,15 +280,18 @@ HTMLCollection [
268280
>
269281
<li
270282
class="rc-menu-item-group"
283+
role="presentation"
271284
>
272285
<div
273286
class="rc-menu-item-group-title"
287+
role="presentation"
274288
title="g1"
275289
>
276290
g1
277291
</div>
278292
<ul
279293
class="rc-menu-item-group-list"
294+
role="group"
280295
>
281296
<li
282297
class="rc-menu-item"
@@ -312,15 +327,18 @@ HTMLCollection [
312327
</li>
313328
<li
314329
class="rc-menu-item-group"
330+
role="presentation"
315331
>
316332
<div
317333
class="rc-menu-item-group-title"
334+
role="presentation"
318335
title="g2"
319336
>
320337
g2
321338
</div>
322339
<ul
323340
class="rc-menu-item-group-list"
341+
role="group"
324342
>
325343
<li
326344
class="rc-menu-item"
@@ -382,15 +400,18 @@ HTMLCollection [
382400
>
383401
<li
384402
class="rc-menu-item-group"
403+
role="presentation"
385404
>
386405
<div
387406
class="rc-menu-item-group-title"
407+
role="presentation"
388408
title="g1"
389409
>
390410
g1
391411
</div>
392412
<ul
393413
class="rc-menu-item-group-list"
414+
role="group"
394415
>
395416
<li
396417
class="rc-menu-item"
@@ -426,15 +447,18 @@ HTMLCollection [
426447
</li>
427448
<li
428449
class="rc-menu-item-group"
450+
role="presentation"
429451
>
430452
<div
431453
class="rc-menu-item-group-title"
454+
role="presentation"
432455
title="g2"
433456
>
434457
g2
435458
</div>
436459
<ul
437460
class="rc-menu-item-group-list"
461+
role="group"
438462
>
439463
<li
440464
class="rc-menu-item"
@@ -567,15 +591,18 @@ HTMLCollection [
567591
>
568592
<li
569593
class="rc-menu-item-group"
594+
role="presentation"
570595
>
571596
<div
572597
class="rc-menu-item-group-title"
598+
role="presentation"
573599
title="g1"
574600
>
575601
g1
576602
</div>
577603
<ul
578604
class="rc-menu-item-group-list"
605+
role="group"
579606
>
580607
<li
581608
class="rc-menu-item"
@@ -608,15 +635,18 @@ HTMLCollection [
608635
</li>
609636
<li
610637
class="rc-menu-item-group"
638+
role="presentation"
611639
>
612640
<div
613641
class="rc-menu-item-group-title"
642+
role="presentation"
614643
title="g2"
615644
>
616645
g2
617646
</div>
618647
<ul
619648
class="rc-menu-item-group-list"
649+
role="group"
620650
>
621651
<li
622652
class="rc-menu-item"
@@ -675,15 +705,18 @@ HTMLCollection [
675705
>
676706
<li
677707
class="rc-menu-item-group"
708+
role="presentation"
678709
>
679710
<div
680711
class="rc-menu-item-group-title"
712+
role="presentation"
681713
title="g1"
682714
>
683715
g1
684716
</div>
685717
<ul
686718
class="rc-menu-item-group-list"
719+
role="group"
687720
>
688721
<li
689722
class="rc-menu-item"
@@ -716,15 +749,18 @@ HTMLCollection [
716749
</li>
717750
<li
718751
class="rc-menu-item-group"
752+
role="presentation"
719753
>
720754
<div
721755
class="rc-menu-item-group-title"
756+
role="presentation"
722757
title="g2"
723758
>
724759
g2
725760
</div>
726761
<ul
727762
class="rc-menu-item-group-list"
763+
role="group"
728764
>
729765
<li
730766
class="rc-menu-item"

‎tests/__snapshots__/MenuItem.spec.js.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ HTMLCollection [
9090
class="rc-menu rc-menu-sub rc-menu-inline"
9191
data-menu-list="true"
9292
id="rc-menu-uuid-test-bamboo-popup"
93+
role="menu"
9394
>
9495
<li
9596
class="rc-menu-item className"
@@ -107,16 +108,19 @@ HTMLCollection [
107108
<li
108109
class="rc-menu-item-group className"
109110
data-whatever="whatever"
111+
role="presentation"
110112
style="font-size: 20px;"
111113
>
112114
<div
113115
class="rc-menu-item-group-title"
116+
role="presentation"
114117
title="title"
115118
>
116119
title
117120
</div>
118121
<ul
119122
class="rc-menu-item-group-list"
123+
role="group"
120124
>
121125
<li
122126
class="rc-menu-item className"

‎tests/__snapshots__/Options.spec.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,22 @@ HTMLCollection [
3232
class="rc-menu rc-menu-sub rc-menu-inline"
3333
data-menu-list="true"
3434
id="rc-menu-uuid-test-sub1-popup"
35+
role="menu"
3536
>
3637
<li
3738
class="rc-menu-item-group"
39+
role="presentation"
3840
>
3941
<div
4042
class="rc-menu-item-group-title"
43+
role="presentation"
4144
title="Menu Group"
4245
>
4346
Menu Group
4447
</div>
4548
<ul
4649
class="rc-menu-item-group-list"
50+
role="group"
4751
>
4852
<li
4953
class="rc-menu-item"

‎tests/__snapshots__/SubMenu.spec.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ HTMLCollection [
9090
class="rc-menu rc-menu-sub rc-menu-vertical"
9191
data-menu-list="true"
9292
id="rc-menu-uuid-test-1-popup"
93+
role="menu"
9394
>
9495
<li
9596
aria-selected="false"

0 commit comments

Comments
 (0)