@patternfly/patternfly 5.1.0-prerelease.4 → 6.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CODE_OF_CONDUCT.md +2 -1
  2. package/components/DataList/data-list-grid.css +0 -28
  3. package/components/DataList/data-list.css +0 -28
  4. package/components/FormControl/form-control.css +3 -2
  5. package/components/FormControl/form-control.scss +3 -2
  6. package/components/NumberInput/number-input.css +1 -1
  7. package/components/Pagination/pagination.css +1 -1
  8. package/components/Table/table-grid.css +0 -24
  9. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  11. package/docs/components/Card/examples/Card.md +152 -64
  12. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  13. package/docs/components/DataList/examples/DataList.md +391 -136
  14. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  15. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  16. package/docs/components/FormControl/examples/FormControl.md +2 -1
  17. package/docs/components/Hint/examples/Hint.md +57 -24
  18. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  19. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  20. package/docs/components/Menu/examples/Menu.md +41 -20
  21. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  22. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  23. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  24. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  25. package/docs/components/Pagination/examples/Pagination.md +195 -65
  26. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  27. package/docs/components/Select/deprecated/Select.css +3 -3
  28. package/docs/components/Select/deprecated/Select.md +40 -52
  29. package/docs/components/Table/examples/Table.md +4546 -1668
  30. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  31. package/docs/components/Toolbar/examples/Toolbar.md +142 -68
  32. package/docs/components/TreeView/examples/TreeView.md +23 -8
  33. package/docs/demos/Card/examples/Card.md +46 -21
  34. package/docs/demos/CardView/examples/CardView.md +182 -74
  35. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  36. package/docs/demos/Dashboard/examples/Dashboard.md +15 -6
  37. package/docs/demos/DataList/examples/DataList.md +163 -70
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  39. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  40. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  42. package/docs/demos/Table/examples/Table.md +1422 -607
  43. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  44. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  45. package/package.json +39 -38
  46. package/patternfly-no-globals.css +4 -55
  47. package/patternfly-theme-dark-unversioned.css +4 -55
  48. package/patternfly.css +4 -55
  49. package/patternfly.min.css +1 -1
  50. package/patternfly.min.css.map +1 -1
  51. package/sass-utilities/placeholders.scss +1 -1
package/docs/components/Dropdown/deprecated/Dropdown.md CHANGED
@@ -23,31 +23,45 @@ deprecated: true
23
23
  <i class="fas fa-caret-down" aria-hidden="true"></i>
24
24
  </span>
25
25
  </button>
26
- <ul class="pf-v5-c-dropdown__menu" aria-labelledby="dropdown-expanded-button">
27
- <li>
28
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
26
+ <ul
27
+ class="pf-v5-c-dropdown__menu"
28
+ aria-labelledby="dropdown-expanded-button"
29
+ role="menu"
30
+ >
31
+ <li role="none">
32
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
29
33
  </li>
30
- <li>
31
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
34
+ <li role="none">
35
+ <button
36
+ class="pf-v5-c-dropdown__menu-item"
37
+ role="menuitem"
38
+ type="button"
39
+ >Action</button>
32
40
  </li>
33
- <li>
41
+ <li role="none">
34
42
  <a
35
43
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
44
+ role="menuitem"
36
45
  href="#"
37
46
  aria-disabled="true"
38
47
  tabindex="-1"
39
48
  >Disabled link</a>
40
49
  </li>
41
- <li>
50
+ <li role="none">
42
51
  <button
43
52
  class="pf-v5-c-dropdown__menu-item"
53
+ role="menuitem"
44
54
  type="button"
45
55
  disabled
46
56
  >Disabled action</button>
47
57
  </li>
48
58
  <li class="pf-v5-c-divider" role="separator"></li>
49
- <li>
50
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
59
+ <li role="none">
60
+ <a
61
+ class="pf-v5-c-dropdown__menu-item"
62
+ role="menuitem"
63
+ href="#"
64
+ >Separated link</a>
51
65
  </li>
52
66
  </ul>
53
67
  </div>
@@ -73,31 +87,42 @@ deprecated: true
73
87
  class="pf-v5-c-dropdown__menu"
74
88
  aria-labelledby="dropdown-collapsed-button"
75
89
  hidden
90
+ role="menu"
76
91
  >
77
- <li>
78
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
92
+ <li role="none">
93
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
79
94
  </li>
80
- <li>
81
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
95
+ <li role="none">
96
+ <button
97
+ class="pf-v5-c-dropdown__menu-item"
98
+ role="menuitem"
99
+ type="button"
100
+ >Action</button>
82
101
  </li>
83
- <li>
102
+ <li role="none">
84
103
  <a
85
104
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
105
+ role="menuitem"
86
106
  href="#"
87
107
  aria-disabled="true"
88
108
  tabindex="-1"
89
109
  >Disabled link</a>
90
110
  </li>
91
- <li>
111
+ <li role="none">
92
112
  <button
93
113
  class="pf-v5-c-dropdown__menu-item"
114
+ role="menuitem"
94
115
  type="button"
95
116
  disabled
96
117
  >Disabled action</button>
97
118
  </li>
98
119
  <li class="pf-v5-c-divider" role="separator"></li>
99
- <li>
100
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
120
+ <li role="none">
121
+ <a
122
+ class="pf-v5-c-dropdown__menu-item"
123
+ role="menuitem"
124
+ href="#"
125
+ >Separated link</a>
101
126
  </li>
102
127
  </ul>
103
128
  </div>
@@ -124,31 +149,42 @@ deprecated: true
124
149
  class="pf-v5-c-dropdown__menu"
125
150
  aria-labelledby="dropdown-disabled-button"
126
151
  hidden
152
+ role="menu"
127
153
  >
128
- <li>
129
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
154
+ <li role="none">
155
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
130
156
  </li>
131
- <li>
132
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
157
+ <li role="none">
158
+ <button
159
+ class="pf-v5-c-dropdown__menu-item"
160
+ role="menuitem"
161
+ type="button"
162
+ >Action</button>
133
163
  </li>
134
- <li>
164
+ <li role="none">
135
165
  <a
136
166
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
167
+ role="menuitem"
137
168
  href="#"
138
169
  aria-disabled="true"
139
170
  tabindex="-1"
140
171
  >Disabled link</a>
141
172
  </li>
142
- <li>
173
+ <li role="none">
143
174
  <button
144
175
  class="pf-v5-c-dropdown__menu-item"
176
+ role="menuitem"
145
177
  type="button"
146
178
  disabled
147
179
  >Disabled action</button>
148
180
  </li>
149
181
  <li class="pf-v5-c-divider" role="separator"></li>
150
- <li>
151
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
182
+ <li role="none">
183
+ <a
184
+ class="pf-v5-c-dropdown__menu-item"
185
+ role="menuitem"
186
+ href="#"
187
+ >Separated link</a>
152
188
  </li>
153
189
  </ul>
154
190
  </div>
@@ -173,30 +209,41 @@ deprecated: true
173
209
  <ul
174
210
  class="pf-v5-c-dropdown__menu"
175
211
  aria-labelledby="dropdown-aria-disabled-items-button"
212
+ role="menu"
176
213
  >
177
- <li>
178
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
214
+ <li role="none">
215
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
179
216
  </li>
180
- <li>
181
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
217
+ <li role="none">
218
+ <button
219
+ class="pf-v5-c-dropdown__menu-item"
220
+ role="menuitem"
221
+ type="button"
222
+ >Action</button>
182
223
  </li>
183
- <li>
224
+ <li role="none">
184
225
  <a
185
226
  class="pf-v5-c-dropdown__menu-item pf-m-aria-disabled"
227
+ role="menuitem"
186
228
  href="#"
187
229
  aria-disabled="true"
188
230
  >Disabled link</a>
189
231
  </li>
190
- <li>
232
+ <li role="none">
191
233
  <button
192
234
  class="pf-v5-c-dropdown__menu-item pf-m-aria-disabled"
235
+ role="menuitem"
193
236
  type="button"
194
237
  aria-disabled="true"
195
238
  >Disabled action</button>
196
239
  </li>
197
240
  <li class="pf-v5-c-divider" role="separator"></li>
198
- <li>
199
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
241
+ <li role="none">
242
+ <a
243
+ class="pf-v5-c-dropdown__menu-item"
244
+ role="menuitem"
245
+ href="#"
246
+ >Separated link</a>
200
247
  </li>
201
248
  </ul>
202
249
  </div>
@@ -221,31 +268,42 @@ deprecated: true
221
268
  class="pf-v5-c-dropdown__menu"
222
269
  aria-labelledby="dropdown-kebab-disabled-button"
223
270
  hidden
271
+ role="menu"
224
272
  >
225
- <li>
226
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
273
+ <li role="none">
274
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
227
275
  </li>
228
- <li>
229
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
276
+ <li role="none">
277
+ <button
278
+ class="pf-v5-c-dropdown__menu-item"
279
+ role="menuitem"
280
+ type="button"
281
+ >Action</button>
230
282
  </li>
231
- <li>
283
+ <li role="none">
232
284
  <a
233
285
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
286
+ role="menuitem"
234
287
  href="#"
235
288
  aria-disabled="true"
236
289
  tabindex="-1"
237
290
  >Disabled link</a>
238
291
  </li>
239
- <li>
292
+ <li role="none">
240
293
  <button
241
294
  class="pf-v5-c-dropdown__menu-item"
295
+ role="menuitem"
242
296
  type="button"
243
297
  disabled
244
298
  >Disabled action</button>
245
299
  </li>
246
300
  <li class="pf-v5-c-divider" role="separator"></li>
247
- <li>
248
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
301
+ <li role="none">
302
+ <a
303
+ class="pf-v5-c-dropdown__menu-item"
304
+ role="menuitem"
305
+ href="#"
306
+ >Separated link</a>
249
307
  </li>
250
308
  </ul>
251
309
  </div>
@@ -263,31 +321,42 @@ deprecated: true
263
321
  class="pf-v5-c-dropdown__menu"
264
322
  aria-labelledby="dropdown-kebab-button"
265
323
  hidden
324
+ role="menu"
266
325
  >
267
- <li>
268
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
326
+ <li role="none">
327
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
269
328
  </li>
270
- <li>
271
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
329
+ <li role="none">
330
+ <button
331
+ class="pf-v5-c-dropdown__menu-item"
332
+ role="menuitem"
333
+ type="button"
334
+ >Action</button>
272
335
  </li>
273
- <li>
336
+ <li role="none">
274
337
  <a
275
338
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
339
+ role="menuitem"
276
340
  href="#"
277
341
  aria-disabled="true"
278
342
  tabindex="-1"
279
343
  >Disabled link</a>
280
344
  </li>
281
- <li>
345
+ <li role="none">
282
346
  <button
283
347
  class="pf-v5-c-dropdown__menu-item"
348
+ role="menuitem"
284
349
  type="button"
285
350
  disabled
286
351
  >Disabled action</button>
287
352
  </li>
288
353
  <li class="pf-v5-c-divider" role="separator"></li>
289
- <li>
290
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
354
+ <li role="none">
355
+ <a
356
+ class="pf-v5-c-dropdown__menu-item"
357
+ role="menuitem"
358
+ href="#"
359
+ >Separated link</a>
291
360
  </li>
292
361
  </ul>
293
362
  </div>
@@ -304,31 +373,42 @@ deprecated: true
304
373
  <ul
305
374
  class="pf-v5-c-dropdown__menu"
306
375
  aria-labelledby="dropdown-kebab-expanded-button"
376
+ role="menu"
307
377
  >
308
- <li>
309
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
378
+ <li role="none">
379
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
310
380
  </li>
311
- <li>
312
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
381
+ <li role="none">
382
+ <button
383
+ class="pf-v5-c-dropdown__menu-item"
384
+ role="menuitem"
385
+ type="button"
386
+ >Action</button>
313
387
  </li>
314
- <li>
388
+ <li role="none">
315
389
  <a
316
390
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
391
+ role="menuitem"
317
392
  href="#"
318
393
  aria-disabled="true"
319
394
  tabindex="-1"
320
395
  >Disabled link</a>
321
396
  </li>
322
- <li>
397
+ <li role="none">
323
398
  <button
324
399
  class="pf-v5-c-dropdown__menu-item"
400
+ role="menuitem"
325
401
  type="button"
326
402
  disabled
327
403
  >Disabled action</button>
328
404
  </li>
329
405
  <li class="pf-v5-c-divider" role="separator"></li>
330
- <li>
331
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
406
+ <li role="none">
407
+ <a
408
+ class="pf-v5-c-dropdown__menu-item"
409
+ role="menuitem"
410
+ href="#"
411
+ >Separated link</a>
332
412
  </li>
333
413
  </ul>
334
414
  </div>
@@ -351,31 +431,42 @@ deprecated: true
351
431
  <ul
352
432
  class="pf-v5-c-dropdown__menu pf-m-align-right"
353
433
  aria-labelledby="dropdown-kebab-align-right-button"
434
+ role="menu"
354
435
  >
355
- <li>
356
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
436
+ <li role="none">
437
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
357
438
  </li>
358
- <li>
359
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
439
+ <li role="none">
440
+ <button
441
+ class="pf-v5-c-dropdown__menu-item"
442
+ role="menuitem"
443
+ type="button"
444
+ >Action</button>
360
445
  </li>
361
- <li>
446
+ <li role="none">
362
447
  <a
363
448
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
449
+ role="menuitem"
364
450
  href="#"
365
451
  aria-disabled="true"
366
452
  tabindex="-1"
367
453
  >Disabled link</a>
368
454
  </li>
369
- <li>
455
+ <li role="none">
370
456
  <button
371
457
  class="pf-v5-c-dropdown__menu-item"
458
+ role="menuitem"
372
459
  type="button"
373
460
  disabled
374
461
  >Disabled action</button>
375
462
  </li>
376
463
  <li class="pf-v5-c-divider" role="separator"></li>
377
- <li>
378
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
464
+ <li role="none">
465
+ <a
466
+ class="pf-v5-c-dropdown__menu-item"
467
+ role="menuitem"
468
+ href="#"
469
+ >Separated link</a>
379
470
  </li>
380
471
  </ul>
381
472
  </div>
@@ -400,31 +491,42 @@ deprecated: true
400
491
  <ul
401
492
  class="pf-v5-c-dropdown__menu pf-m-align-right"
402
493
  aria-labelledby="dropdown-align-right-button"
494
+ role="menu"
403
495
  >
404
- <li>
405
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
496
+ <li role="none">
497
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
406
498
  </li>
407
- <li>
408
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
499
+ <li role="none">
500
+ <button
501
+ class="pf-v5-c-dropdown__menu-item"
502
+ role="menuitem"
503
+ type="button"
504
+ >Action</button>
409
505
  </li>
410
- <li>
506
+ <li role="none">
411
507
  <a
412
508
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
509
+ role="menuitem"
413
510
  href="#"
414
511
  aria-disabled="true"
415
512
  tabindex="-1"
416
513
  >Disabled link</a>
417
514
  </li>
418
- <li>
515
+ <li role="none">
419
516
  <button
420
517
  class="pf-v5-c-dropdown__menu-item"
518
+ role="menuitem"
421
519
  type="button"
422
520
  disabled
423
521
  >Disabled action</button>
424
522
  </li>
425
523
  <li class="pf-v5-c-divider" role="separator"></li>
426
- <li>
427
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
524
+ <li role="none">
525
+ <a
526
+ class="pf-v5-c-dropdown__menu-item"
527
+ role="menuitem"
528
+ href="#"
529
+ >Separated link</a>
428
530
  </li>
429
531
  </ul>
430
532
  </div>
@@ -449,31 +551,42 @@ deprecated: true
449
551
  <ul
450
552
  class="pf-v5-c-dropdown__menu pf-m-align-right-on-lg pf-m-align-left-on-2xl"
451
553
  aria-labelledby="dropdown-align-on-different-breakpoint-button"
554
+ role="menu"
452
555
  >
453
- <li>
454
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
556
+ <li role="none">
557
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
455
558
  </li>
456
- <li>
457
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
559
+ <li role="none">
560
+ <button
561
+ class="pf-v5-c-dropdown__menu-item"
562
+ role="menuitem"
563
+ type="button"
564
+ >Action</button>
458
565
  </li>
459
- <li>
566
+ <li role="none">
460
567
  <a
461
568
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
569
+ role="menuitem"
462
570
  href="#"
463
571
  aria-disabled="true"
464
572
  tabindex="-1"
465
573
  >Disabled link</a>
466
574
  </li>
467
- <li>
575
+ <li role="none">
468
576
  <button
469
577
  class="pf-v5-c-dropdown__menu-item"
578
+ role="menuitem"
470
579
  type="button"
471
580
  disabled
472
581
  >Disabled action</button>
473
582
  </li>
474
583
  <li class="pf-v5-c-divider" role="separator"></li>
475
- <li>
476
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
584
+ <li role="none">
585
+ <a
586
+ class="pf-v5-c-dropdown__menu-item"
587
+ role="menuitem"
588
+ href="#"
589
+ >Separated link</a>
477
590
  </li>
478
591
  </ul>
479
592
  </div>
@@ -499,31 +612,42 @@ deprecated: true
499
612
  class="pf-v5-c-dropdown__menu"
500
613
  aria-labelledby="dropdown-align-top-button"
501
614
  hidden
615
+ role="menu"
502
616
  >
503
- <li>
504
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
617
+ <li role="none">
618
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
505
619
  </li>
506
- <li>
507
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
620
+ <li role="none">
621
+ <button
622
+ class="pf-v5-c-dropdown__menu-item"
623
+ role="menuitem"
624
+ type="button"
625
+ >Action</button>
508
626
  </li>
509
- <li>
627
+ <li role="none">
510
628
  <a
511
629
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
630
+ role="menuitem"
512
631
  href="#"
513
632
  aria-disabled="true"
514
633
  tabindex="-1"
515
634
  >Disabled link</a>
516
635
  </li>
517
- <li>
636
+ <li role="none">
518
637
  <button
519
638
  class="pf-v5-c-dropdown__menu-item"
639
+ role="menuitem"
520
640
  type="button"
521
641
  disabled
522
642
  >Disabled action</button>
523
643
  </li>
524
644
  <li class="pf-v5-c-divider" role="separator"></li>
525
- <li>
526
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
645
+ <li role="none">
646
+ <a
647
+ class="pf-v5-c-dropdown__menu-item"
648
+ role="menuitem"
649
+ href="#"
650
+ >Separated link</a>
527
651
  </li>
528
652
  </ul>
529
653
  </div>
@@ -542,31 +666,42 @@ deprecated: true
542
666
  <ul
543
667
  class="pf-v5-c-dropdown__menu"
544
668
  aria-labelledby="dropdown-align-top-expanded-button"
669
+ role="menu"
545
670
  >
546
- <li>
547
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
671
+ <li role="none">
672
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
548
673
  </li>
549
- <li>
550
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
674
+ <li role="none">
675
+ <button
676
+ class="pf-v5-c-dropdown__menu-item"
677
+ role="menuitem"
678
+ type="button"
679
+ >Action</button>
551
680
  </li>
552
- <li>
681
+ <li role="none">
553
682
  <a
554
683
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
684
+ role="menuitem"
555
685
  href="#"
556
686
  aria-disabled="true"
557
687
  tabindex="-1"
558
688
  >Disabled link</a>
559
689
  </li>
560
- <li>
690
+ <li role="none">
561
691
  <button
562
692
  class="pf-v5-c-dropdown__menu-item"
693
+ role="menuitem"
563
694
  type="button"
564
695
  disabled
565
696
  >Disabled action</button>
566
697
  </li>
567
698
  <li class="pf-v5-c-divider" role="separator"></li>
568
- <li>
569
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
699
+ <li role="none">
700
+ <a
701
+ class="pf-v5-c-dropdown__menu-item"
702
+ role="menuitem"
703
+ href="#"
704
+ >Separated link</a>
570
705
  </li>
571
706
  </ul>
572
707
  </div>
@@ -593,31 +728,42 @@ deprecated: true
593
728
  class="pf-v5-c-dropdown__menu"
594
729
  aria-labelledby="plain-with-text-example-disabled-button"
595
730
  hidden
731
+ role="menu"
596
732
  >
597
- <li>
598
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
733
+ <li role="none">
734
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
599
735
  </li>
600
- <li>
601
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
736
+ <li role="none">
737
+ <button
738
+ class="pf-v5-c-dropdown__menu-item"
739
+ role="menuitem"
740
+ type="button"
741
+ >Action</button>
602
742
  </li>
603
- <li>
743
+ <li role="none">
604
744
  <a
605
745
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
746
+ role="menuitem"
606
747
  href="#"
607
748
  aria-disabled="true"
608
749
  tabindex="-1"
609
750
  >Disabled link</a>
610
751
  </li>
611
- <li>
752
+ <li role="none">
612
753
  <button
613
754
  class="pf-v5-c-dropdown__menu-item"
755
+ role="menuitem"
614
756
  type="button"
615
757
  disabled
616
758
  >Disabled action</button>
617
759
  </li>
618
760
  <li class="pf-v5-c-divider" role="separator"></li>
619
- <li>
620
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
761
+ <li role="none">
762
+ <a
763
+ class="pf-v5-c-dropdown__menu-item"
764
+ role="menuitem"
765
+ href="#"
766
+ >Separated link</a>
621
767
  </li>
622
768
  </ul>
623
769
  </div>&nbsp;
@@ -637,31 +783,42 @@ deprecated: true
637
783
  class="pf-v5-c-dropdown__menu"
638
784
  aria-labelledby="plain-with-text-example-button"
639
785
  hidden
786
+ role="menu"
640
787
  >
641
- <li>
642
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
788
+ <li role="none">
789
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
643
790
  </li>
644
- <li>
645
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
791
+ <li role="none">
792
+ <button
793
+ class="pf-v5-c-dropdown__menu-item"
794
+ role="menuitem"
795
+ type="button"
796
+ >Action</button>
646
797
  </li>
647
- <li>
798
+ <li role="none">
648
799
  <a
649
800
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
801
+ role="menuitem"
650
802
  href="#"
651
803
  aria-disabled="true"
652
804
  tabindex="-1"
653
805
  >Disabled link</a>
654
806
  </li>
655
- <li>
807
+ <li role="none">
656
808
  <button
657
809
  class="pf-v5-c-dropdown__menu-item"
810
+ role="menuitem"
658
811
  type="button"
659
812
  disabled
660
813
  >Disabled action</button>
661
814
  </li>
662
815
  <li class="pf-v5-c-divider" role="separator"></li>
663
- <li>
664
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
816
+ <li role="none">
817
+ <a
818
+ class="pf-v5-c-dropdown__menu-item"
819
+ role="menuitem"
820
+ href="#"
821
+ >Separated link</a>
665
822
  </li>
666
823
  </ul>
667
824
  </div>&nbsp;
@@ -680,31 +837,42 @@ deprecated: true
680
837
  <ul
681
838
  class="pf-v5-c-dropdown__menu"
682
839
  aria-labelledby="plain-with-text-example-expanded-button"
840
+ role="menu"
683
841
  >
684
- <li>
685
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
842
+ <li role="none">
843
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
686
844
  </li>
687
- <li>
688
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
845
+ <li role="none">
846
+ <button
847
+ class="pf-v5-c-dropdown__menu-item"
848
+ role="menuitem"
849
+ type="button"
850
+ >Action</button>
689
851
  </li>
690
- <li>
852
+ <li role="none">
691
853
  <a
692
854
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
855
+ role="menuitem"
693
856
  href="#"
694
857
  aria-disabled="true"
695
858
  tabindex="-1"
696
859
  >Disabled link</a>
697
860
  </li>
698
- <li>
861
+ <li role="none">
699
862
  <button
700
863
  class="pf-v5-c-dropdown__menu-item"
864
+ role="menuitem"
701
865
  type="button"
702
866
  disabled
703
867
  >Disabled action</button>
704
868
  </li>
705
869
  <li class="pf-v5-c-divider" role="separator"></li>
706
- <li>
707
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
870
+ <li role="none">
871
+ <a
872
+ class="pf-v5-c-dropdown__menu-item"
873
+ role="menuitem"
874
+ href="#"
875
+ >Separated link</a>
708
876
  </li>
709
877
  </ul>
710
878
  </div>
@@ -731,21 +899,42 @@ deprecated: true
731
899
  <ul
732
900
  class="pf-v5-c-dropdown__menu"
733
901
  aria-labelledby="dropdown-badge-toggle-button"
902
+ role="menu"
734
903
  >
735
- <li>
736
- <button class="pf-v5-c-dropdown__menu-item" type="button">Edit</button>
904
+ <li role="none">
905
+ <button
906
+ class="pf-v5-c-dropdown__menu-item"
907
+ role="menuitem"
908
+ type="button"
909
+ >Edit</button>
737
910
  </li>
738
- <li>
739
- <button class="pf-v5-c-dropdown__menu-item" type="button">Deployment</button>
911
+ <li role="none">
912
+ <button
913
+ class="pf-v5-c-dropdown__menu-item"
914
+ role="menuitem"
915
+ type="button"
916
+ >Deployment</button>
740
917
  </li>
741
- <li>
742
- <button class="pf-v5-c-dropdown__menu-item" type="button">Application</button>
918
+ <li role="none">
919
+ <button
920
+ class="pf-v5-c-dropdown__menu-item"
921
+ role="menuitem"
922
+ type="button"
923
+ >Application</button>
743
924
  </li>
744
- <li>
745
- <button class="pf-v5-c-dropdown__menu-item" type="button">Count</button>
925
+ <li role="none">
926
+ <button
927
+ class="pf-v5-c-dropdown__menu-item"
928
+ role="menuitem"
929
+ type="button"
930
+ >Count</button>
746
931
  </li>
747
- <li>
748
- <button class="pf-v5-c-dropdown__menu-item" type="button">Application 1</button>
932
+ <li role="none">
933
+ <button
934
+ class="pf-v5-c-dropdown__menu-item"
935
+ role="menuitem"
936
+ type="button"
937
+ >Application 1</button>
749
938
  </li>
750
939
  </ul>
751
940
  </div>
@@ -770,41 +959,52 @@ deprecated: true
770
959
  <ul
771
960
  class="pf-v5-c-dropdown__menu"
772
961
  aria-labelledby="dropdown-menu-item-icons-button"
962
+ role="menu"
773
963
  >
774
- <li>
775
- <a class="pf-v5-c-dropdown__menu-item pf-m-icon" href="#">
964
+ <li role="none">
965
+ <a class="pf-v5-c-dropdown__menu-item pf-m-icon" role="menuitem" href="#">
776
966
  <span class="pf-v5-c-dropdown__menu-item-icon">
777
967
  <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
778
968
  </span>
779
969
  Link
780
970
  </a>
781
971
  </li>
782
- <li>
783
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
972
+ <li role="none">
973
+ <button
974
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
975
+ role="menuitem"
976
+ type="button"
977
+ >
784
978
  <span class="pf-v5-c-dropdown__menu-item-icon">
785
979
  <i class="fas fa-cog" aria-hidden="true"></i>
786
980
  </span>
787
981
  Action
788
982
  </button>
789
983
  </li>
790
- <li>
984
+ <li role="none">
791
985
  <a
792
986
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
987
+ role="menuitem"
793
988
  href="#"
794
989
  aria-disabled="true"
795
990
  tabindex="-1"
796
991
  >Disabled link</a>
797
992
  </li>
798
- <li>
993
+ <li role="none">
799
994
  <button
800
995
  class="pf-v5-c-dropdown__menu-item"
996
+ role="menuitem"
801
997
  type="button"
802
998
  disabled
803
999
  >Disabled action</button>
804
1000
  </li>
805
1001
  <li class="pf-v5-c-divider" role="separator"></li>
806
- <li>
807
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1002
+ <li role="none">
1003
+ <a
1004
+ class="pf-v5-c-dropdown__menu-item"
1005
+ role="menuitem"
1006
+ href="#"
1007
+ >Separated link</a>
808
1008
  </li>
809
1009
  </ul>
810
1010
  </div>
@@ -842,19 +1042,28 @@ deprecated: true
842
1042
  <i class="fas fa-caret-down" aria-hidden="true"></i>
843
1043
  </button>
844
1044
  </div>
845
- <ul class="pf-v5-c-dropdown__menu" hidden>
846
- <li>
847
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1045
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1046
+ <li role="none">
1047
+ <button
1048
+ class="pf-v5-c-dropdown__menu-item"
1049
+ role="menuitem"
1050
+ type="button"
1051
+ >Actions</button>
848
1052
  </li>
849
- <li>
1053
+ <li role="none">
850
1054
  <button
851
1055
  class="pf-v5-c-dropdown__menu-item"
1056
+ role="menuitem"
852
1057
  type="button"
853
1058
  disabled
854
1059
  >Disabled action</button>
855
1060
  </li>
856
- <li>
857
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1061
+ <li role="none">
1062
+ <button
1063
+ class="pf-v5-c-dropdown__menu-item"
1064
+ role="menuitem"
1065
+ type="button"
1066
+ >Other action</button>
858
1067
  </li>
859
1068
  </ul>
860
1069
  </div>
@@ -884,19 +1093,28 @@ deprecated: true
884
1093
  <i class="fas fa-caret-down" aria-hidden="true"></i>
885
1094
  </button>
886
1095
  </div>
887
- <ul class="pf-v5-c-dropdown__menu" hidden>
888
- <li>
889
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1096
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1097
+ <li role="none">
1098
+ <button
1099
+ class="pf-v5-c-dropdown__menu-item"
1100
+ role="menuitem"
1101
+ type="button"
1102
+ >Actions</button>
890
1103
  </li>
891
- <li>
1104
+ <li role="none">
892
1105
  <button
893
1106
  class="pf-v5-c-dropdown__menu-item"
1107
+ role="menuitem"
894
1108
  type="button"
895
1109
  disabled
896
1110
  >Disabled action</button>
897
1111
  </li>
898
- <li>
899
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1112
+ <li role="none">
1113
+ <button
1114
+ class="pf-v5-c-dropdown__menu-item"
1115
+ role="menuitem"
1116
+ type="button"
1117
+ >Other action</button>
900
1118
  </li>
901
1119
  </ul>
902
1120
  </div>
@@ -926,19 +1144,28 @@ deprecated: true
926
1144
  <i class="fas fa-caret-down" aria-hidden="true"></i>
927
1145
  </button>
928
1146
  </div>
929
- <ul class="pf-v5-c-dropdown__menu">
930
- <li>
931
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1147
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
1148
+ <li role="none">
1149
+ <button
1150
+ class="pf-v5-c-dropdown__menu-item"
1151
+ role="menuitem"
1152
+ type="button"
1153
+ >Actions</button>
932
1154
  </li>
933
- <li>
1155
+ <li role="none">
934
1156
  <button
935
1157
  class="pf-v5-c-dropdown__menu-item"
1158
+ role="menuitem"
936
1159
  type="button"
937
1160
  disabled
938
1161
  >Disabled action</button>
939
1162
  </li>
940
- <li>
941
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1163
+ <li role="none">
1164
+ <button
1165
+ class="pf-v5-c-dropdown__menu-item"
1166
+ role="menuitem"
1167
+ type="button"
1168
+ >Other action</button>
942
1169
  </li>
943
1170
  </ul>
944
1171
  </div>
@@ -981,15 +1208,27 @@ deprecated: true
981
1208
  <i class="fas fa-caret-down" aria-hidden="true"></i>
982
1209
  </button>
983
1210
  </div>
984
- <ul class="pf-v5-c-dropdown__menu" hidden>
985
- <li>
986
- <button class="pf-v5-c-dropdown__menu-item" type="button">Select all</button>
1211
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1212
+ <li role="none">
1213
+ <button
1214
+ class="pf-v5-c-dropdown__menu-item"
1215
+ role="menuitem"
1216
+ type="button"
1217
+ >Select all</button>
987
1218
  </li>
988
- <li>
989
- <button class="pf-v5-c-dropdown__menu-item" type="button">Select none</button>
1219
+ <li role="none">
1220
+ <button
1221
+ class="pf-v5-c-dropdown__menu-item"
1222
+ role="menuitem"
1223
+ type="button"
1224
+ >Select none</button>
990
1225
  </li>
991
- <li>
992
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1226
+ <li role="none">
1227
+ <button
1228
+ class="pf-v5-c-dropdown__menu-item"
1229
+ role="menuitem"
1230
+ type="button"
1231
+ >Other action</button>
993
1232
  </li>
994
1233
  </ul>
995
1234
  </div>
@@ -1036,19 +1275,28 @@ deprecated: true
1036
1275
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1037
1276
  </button>
1038
1277
  </div>
1039
- <ul class="pf-v5-c-dropdown__menu" hidden>
1040
- <li>
1041
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1278
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1279
+ <li role="none">
1280
+ <button
1281
+ class="pf-v5-c-dropdown__menu-item"
1282
+ role="menuitem"
1283
+ type="button"
1284
+ >Actions</button>
1042
1285
  </li>
1043
- <li>
1286
+ <li role="none">
1044
1287
  <button
1045
1288
  class="pf-v5-c-dropdown__menu-item"
1289
+ role="menuitem"
1046
1290
  type="button"
1047
1291
  disabled
1048
1292
  >Disabled action</button>
1049
1293
  </li>
1050
- <li>
1051
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1294
+ <li role="none">
1295
+ <button
1296
+ class="pf-v5-c-dropdown__menu-item"
1297
+ role="menuitem"
1298
+ type="button"
1299
+ >Other action</button>
1052
1300
  </li>
1053
1301
  </ul>
1054
1302
  </div>
@@ -1090,19 +1338,28 @@ deprecated: true
1090
1338
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1091
1339
  </button>
1092
1340
  </div>
1093
- <ul class="pf-v5-c-dropdown__menu" hidden>
1094
- <li>
1095
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1341
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1342
+ <li role="none">
1343
+ <button
1344
+ class="pf-v5-c-dropdown__menu-item"
1345
+ role="menuitem"
1346
+ type="button"
1347
+ >Actions</button>
1096
1348
  </li>
1097
- <li>
1349
+ <li role="none">
1098
1350
  <button
1099
1351
  class="pf-v5-c-dropdown__menu-item"
1352
+ role="menuitem"
1100
1353
  type="button"
1101
1354
  disabled
1102
1355
  >Disabled action</button>
1103
1356
  </li>
1104
- <li>
1105
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1357
+ <li role="none">
1358
+ <button
1359
+ class="pf-v5-c-dropdown__menu-item"
1360
+ role="menuitem"
1361
+ type="button"
1362
+ >Other action</button>
1106
1363
  </li>
1107
1364
  </ul>
1108
1365
  </div>
@@ -1150,15 +1407,27 @@ deprecated: true
1150
1407
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1151
1408
  </button>
1152
1409
  </div>
1153
- <ul class="pf-v5-c-dropdown__menu" hidden>
1154
- <li>
1155
- <button class="pf-v5-c-dropdown__menu-item" type="button">Select all</button>
1410
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1411
+ <li role="none">
1412
+ <button
1413
+ class="pf-v5-c-dropdown__menu-item"
1414
+ role="menuitem"
1415
+ type="button"
1416
+ >Select all</button>
1156
1417
  </li>
1157
- <li>
1158
- <button class="pf-v5-c-dropdown__menu-item" type="button">Select none</button>
1418
+ <li role="none">
1419
+ <button
1420
+ class="pf-v5-c-dropdown__menu-item"
1421
+ role="menuitem"
1422
+ type="button"
1423
+ >Select none</button>
1159
1424
  </li>
1160
- <li>
1161
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1425
+ <li role="none">
1426
+ <button
1427
+ class="pf-v5-c-dropdown__menu-item"
1428
+ role="menuitem"
1429
+ type="button"
1430
+ >Other action</button>
1162
1431
  </li>
1163
1432
  </ul>
1164
1433
  </div>
@@ -1207,15 +1476,27 @@ deprecated: true
1207
1476
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1208
1477
  </button>
1209
1478
  </div>
1210
- <ul class="pf-v5-c-dropdown__menu" hidden>
1211
- <li>
1212
- <button class="pf-v5-c-dropdown__menu-item" type="button">Select all</button>
1479
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1480
+ <li role="none">
1481
+ <button
1482
+ class="pf-v5-c-dropdown__menu-item"
1483
+ role="menuitem"
1484
+ type="button"
1485
+ >Select all</button>
1213
1486
  </li>
1214
- <li>
1215
- <button class="pf-v5-c-dropdown__menu-item" type="button">Select none</button>
1487
+ <li role="none">
1488
+ <button
1489
+ class="pf-v5-c-dropdown__menu-item"
1490
+ role="menuitem"
1491
+ type="button"
1492
+ >Select none</button>
1216
1493
  </li>
1217
- <li>
1218
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1494
+ <li role="none">
1495
+ <button
1496
+ class="pf-v5-c-dropdown__menu-item"
1497
+ role="menuitem"
1498
+ type="button"
1499
+ >Other action</button>
1219
1500
  </li>
1220
1501
  </ul>
1221
1502
  </div>
@@ -1243,19 +1524,28 @@ deprecated: true
1243
1524
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1244
1525
  </button>
1245
1526
  </div>
1246
- <ul class="pf-v5-c-dropdown__menu" hidden>
1247
- <li>
1248
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1527
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1528
+ <li role="none">
1529
+ <button
1530
+ class="pf-v5-c-dropdown__menu-item"
1531
+ role="menuitem"
1532
+ type="button"
1533
+ >Actions</button>
1249
1534
  </li>
1250
- <li>
1535
+ <li role="none">
1251
1536
  <button
1252
1537
  class="pf-v5-c-dropdown__menu-item"
1538
+ role="menuitem"
1253
1539
  type="button"
1254
1540
  disabled
1255
1541
  >Disabled action</button>
1256
1542
  </li>
1257
- <li>
1258
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1543
+ <li role="none">
1544
+ <button
1545
+ class="pf-v5-c-dropdown__menu-item"
1546
+ role="menuitem"
1547
+ type="button"
1548
+ >Other action</button>
1259
1549
  </li>
1260
1550
  </ul>
1261
1551
  </div>
@@ -1277,19 +1567,28 @@ deprecated: true
1277
1567
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1278
1568
  </button>
1279
1569
  </div>
1280
- <ul class="pf-v5-c-dropdown__menu">
1281
- <li>
1282
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1570
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
1571
+ <li role="none">
1572
+ <button
1573
+ class="pf-v5-c-dropdown__menu-item"
1574
+ role="menuitem"
1575
+ type="button"
1576
+ >Actions</button>
1283
1577
  </li>
1284
- <li>
1578
+ <li role="none">
1285
1579
  <button
1286
1580
  class="pf-v5-c-dropdown__menu-item"
1581
+ role="menuitem"
1287
1582
  type="button"
1288
1583
  disabled
1289
1584
  >Disabled action</button>
1290
1585
  </li>
1291
- <li>
1292
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1586
+ <li role="none">
1587
+ <button
1588
+ class="pf-v5-c-dropdown__menu-item"
1589
+ role="menuitem"
1590
+ type="button"
1591
+ >Other action</button>
1293
1592
  </li>
1294
1593
  </ul>
1295
1594
  </div>
@@ -1313,19 +1612,28 @@ deprecated: true
1313
1612
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1314
1613
  </button>
1315
1614
  </div>
1316
- <ul class="pf-v5-c-dropdown__menu" hidden>
1317
- <li>
1318
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1615
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1616
+ <li role="none">
1617
+ <button
1618
+ class="pf-v5-c-dropdown__menu-item"
1619
+ role="menuitem"
1620
+ type="button"
1621
+ >Actions</button>
1319
1622
  </li>
1320
- <li>
1623
+ <li role="none">
1321
1624
  <button
1322
1625
  class="pf-v5-c-dropdown__menu-item"
1626
+ role="menuitem"
1323
1627
  type="button"
1324
1628
  disabled
1325
1629
  >Disabled action</button>
1326
1630
  </li>
1327
- <li>
1328
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1631
+ <li role="none">
1632
+ <button
1633
+ class="pf-v5-c-dropdown__menu-item"
1634
+ role="menuitem"
1635
+ type="button"
1636
+ >Other action</button>
1329
1637
  </li>
1330
1638
  </ul>
1331
1639
  </div>
@@ -1349,18 +1657,23 @@ deprecated: true
1349
1657
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1350
1658
  </button>
1351
1659
  </div>
1352
- <ul class="pf-v5-c-dropdown__menu">
1353
- <li>
1354
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
1660
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
1661
+ <li role="none">
1662
+ <button
1663
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
1664
+ role="menuitem"
1665
+ type="button"
1666
+ >
1355
1667
  <span class="pf-v5-c-dropdown__menu-item-icon">
1356
1668
  <i class="fas fa-cog" aria-hidden="true"></i>
1357
1669
  </span>
1358
1670
  Actions
1359
1671
  </button>
1360
1672
  </li>
1361
- <li>
1673
+ <li role="none">
1362
1674
  <button
1363
1675
  class="pf-v5-c-dropdown__menu-item pf-m-icon"
1676
+ role="menuitem"
1364
1677
  type="button"
1365
1678
  disabled
1366
1679
  >
@@ -1370,8 +1683,12 @@ deprecated: true
1370
1683
  Disabled action
1371
1684
  </button>
1372
1685
  </li>
1373
- <li>
1374
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
1686
+ <li role="none">
1687
+ <button
1688
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
1689
+ role="menuitem"
1690
+ type="button"
1691
+ >
1375
1692
  <span class="pf-v5-c-dropdown__menu-item-icon">
1376
1693
  <i class="fas fa-cubes" aria-hidden="true"></i>
1377
1694
  </span>
@@ -1406,19 +1723,28 @@ deprecated: true
1406
1723
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1407
1724
  </button>
1408
1725
  </div>
1409
- <ul class="pf-v5-c-dropdown__menu" hidden>
1410
- <li>
1411
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1726
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1727
+ <li role="none">
1728
+ <button
1729
+ class="pf-v5-c-dropdown__menu-item"
1730
+ role="menuitem"
1731
+ type="button"
1732
+ >Actions</button>
1412
1733
  </li>
1413
- <li>
1734
+ <li role="none">
1414
1735
  <button
1415
1736
  class="pf-v5-c-dropdown__menu-item"
1737
+ role="menuitem"
1416
1738
  type="button"
1417
1739
  disabled
1418
1740
  >Disabled action</button>
1419
1741
  </li>
1420
- <li>
1421
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1742
+ <li role="none">
1743
+ <button
1744
+ class="pf-v5-c-dropdown__menu-item"
1745
+ role="menuitem"
1746
+ type="button"
1747
+ >Other action</button>
1422
1748
  </li>
1423
1749
  </ul>
1424
1750
  </div>
@@ -1442,19 +1768,28 @@ deprecated: true
1442
1768
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1443
1769
  </button>
1444
1770
  </div>
1445
- <ul class="pf-v5-c-dropdown__menu">
1446
- <li>
1447
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1771
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
1772
+ <li role="none">
1773
+ <button
1774
+ class="pf-v5-c-dropdown__menu-item"
1775
+ role="menuitem"
1776
+ type="button"
1777
+ >Actions</button>
1448
1778
  </li>
1449
- <li>
1779
+ <li role="none">
1450
1780
  <button
1451
1781
  class="pf-v5-c-dropdown__menu-item"
1782
+ role="menuitem"
1452
1783
  type="button"
1453
1784
  disabled
1454
1785
  >Disabled action</button>
1455
1786
  </li>
1456
- <li>
1457
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1787
+ <li role="none">
1788
+ <button
1789
+ class="pf-v5-c-dropdown__menu-item"
1790
+ role="menuitem"
1791
+ type="button"
1792
+ >Other action</button>
1458
1793
  </li>
1459
1794
  </ul>
1460
1795
  </div>
@@ -1480,19 +1815,28 @@ deprecated: true
1480
1815
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1481
1816
  </button>
1482
1817
  </div>
1483
- <ul class="pf-v5-c-dropdown__menu" hidden>
1484
- <li>
1485
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1818
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1819
+ <li role="none">
1820
+ <button
1821
+ class="pf-v5-c-dropdown__menu-item"
1822
+ role="menuitem"
1823
+ type="button"
1824
+ >Actions</button>
1486
1825
  </li>
1487
- <li>
1826
+ <li role="none">
1488
1827
  <button
1489
1828
  class="pf-v5-c-dropdown__menu-item"
1829
+ role="menuitem"
1490
1830
  type="button"
1491
1831
  disabled
1492
1832
  >Disabled action</button>
1493
1833
  </li>
1494
- <li>
1495
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1834
+ <li role="none">
1835
+ <button
1836
+ class="pf-v5-c-dropdown__menu-item"
1837
+ role="menuitem"
1838
+ type="button"
1839
+ >Other action</button>
1496
1840
  </li>
1497
1841
  </ul>
1498
1842
  </div>
@@ -1518,18 +1862,23 @@ deprecated: true
1518
1862
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1519
1863
  </button>
1520
1864
  </div>
1521
- <ul class="pf-v5-c-dropdown__menu">
1522
- <li>
1523
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
1865
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
1866
+ <li role="none">
1867
+ <button
1868
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
1869
+ role="menuitem"
1870
+ type="button"
1871
+ >
1524
1872
  <span class="pf-v5-c-dropdown__menu-item-icon">
1525
1873
  <i class="fas fa-cog" aria-hidden="true"></i>
1526
1874
  </span>
1527
1875
  Actions
1528
1876
  </button>
1529
1877
  </li>
1530
- <li>
1878
+ <li role="none">
1531
1879
  <button
1532
1880
  class="pf-v5-c-dropdown__menu-item pf-m-icon"
1881
+ role="menuitem"
1533
1882
  type="button"
1534
1883
  disabled
1535
1884
  >
@@ -1539,8 +1888,12 @@ deprecated: true
1539
1888
  Disabled action
1540
1889
  </button>
1541
1890
  </li>
1542
- <li>
1543
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
1891
+ <li role="none">
1892
+ <button
1893
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
1894
+ role="menuitem"
1895
+ type="button"
1896
+ >
1544
1897
  <span class="pf-v5-c-dropdown__menu-item-icon">
1545
1898
  <i class="fas fa-cubes" aria-hidden="true"></i>
1546
1899
  </span>
@@ -1575,19 +1928,28 @@ deprecated: true
1575
1928
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1576
1929
  </button>
1577
1930
  </div>
1578
- <ul class="pf-v5-c-dropdown__menu" hidden>
1579
- <li>
1580
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1931
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1932
+ <li role="none">
1933
+ <button
1934
+ class="pf-v5-c-dropdown__menu-item"
1935
+ role="menuitem"
1936
+ type="button"
1937
+ >Actions</button>
1581
1938
  </li>
1582
- <li>
1939
+ <li role="none">
1583
1940
  <button
1584
1941
  class="pf-v5-c-dropdown__menu-item"
1942
+ role="menuitem"
1585
1943
  type="button"
1586
1944
  disabled
1587
1945
  >Disabled action</button>
1588
1946
  </li>
1589
- <li>
1590
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1947
+ <li role="none">
1948
+ <button
1949
+ class="pf-v5-c-dropdown__menu-item"
1950
+ role="menuitem"
1951
+ type="button"
1952
+ >Other action</button>
1591
1953
  </li>
1592
1954
  </ul>
1593
1955
  </div>
@@ -1611,19 +1973,28 @@ deprecated: true
1611
1973
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1612
1974
  </button>
1613
1975
  </div>
1614
- <ul class="pf-v5-c-dropdown__menu">
1615
- <li>
1616
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
1976
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
1977
+ <li role="none">
1978
+ <button
1979
+ class="pf-v5-c-dropdown__menu-item"
1980
+ role="menuitem"
1981
+ type="button"
1982
+ >Actions</button>
1617
1983
  </li>
1618
- <li>
1984
+ <li role="none">
1619
1985
  <button
1620
1986
  class="pf-v5-c-dropdown__menu-item"
1987
+ role="menuitem"
1621
1988
  type="button"
1622
1989
  disabled
1623
1990
  >Disabled action</button>
1624
1991
  </li>
1625
- <li>
1626
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
1992
+ <li role="none">
1993
+ <button
1994
+ class="pf-v5-c-dropdown__menu-item"
1995
+ role="menuitem"
1996
+ type="button"
1997
+ >Other action</button>
1627
1998
  </li>
1628
1999
  </ul>
1629
2000
  </div>
@@ -1649,19 +2020,28 @@ deprecated: true
1649
2020
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1650
2021
  </button>
1651
2022
  </div>
1652
- <ul class="pf-v5-c-dropdown__menu" hidden>
1653
- <li>
1654
- <button class="pf-v5-c-dropdown__menu-item" type="button">Actions</button>
2023
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2024
+ <li role="none">
2025
+ <button
2026
+ class="pf-v5-c-dropdown__menu-item"
2027
+ role="menuitem"
2028
+ type="button"
2029
+ >Actions</button>
1655
2030
  </li>
1656
- <li>
2031
+ <li role="none">
1657
2032
  <button
1658
2033
  class="pf-v5-c-dropdown__menu-item"
2034
+ role="menuitem"
1659
2035
  type="button"
1660
2036
  disabled
1661
2037
  >Disabled action</button>
1662
2038
  </li>
1663
- <li>
1664
- <button class="pf-v5-c-dropdown__menu-item" type="button">Other action</button>
2039
+ <li role="none">
2040
+ <button
2041
+ class="pf-v5-c-dropdown__menu-item"
2042
+ role="menuitem"
2043
+ type="button"
2044
+ >Other action</button>
1665
2045
  </li>
1666
2046
  </ul>
1667
2047
  </div>
@@ -1687,18 +2067,23 @@ deprecated: true
1687
2067
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1688
2068
  </button>
1689
2069
  </div>
1690
- <ul class="pf-v5-c-dropdown__menu">
1691
- <li>
1692
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
2070
+ <ul class="pf-v5-c-dropdown__menu" role="menu">
2071
+ <li role="none">
2072
+ <button
2073
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
2074
+ role="menuitem"
2075
+ type="button"
2076
+ >
1693
2077
  <span class="pf-v5-c-dropdown__menu-item-icon">
1694
2078
  <i class="fas fa-cog" aria-hidden="true"></i>
1695
2079
  </span>
1696
2080
  Actions
1697
2081
  </button>
1698
2082
  </li>
1699
- <li>
2083
+ <li role="none">
1700
2084
  <button
1701
2085
  class="pf-v5-c-dropdown__menu-item pf-m-icon"
2086
+ role="menuitem"
1702
2087
  type="button"
1703
2088
  disabled
1704
2089
  >
@@ -1708,8 +2093,12 @@ deprecated: true
1708
2093
  Disabled action
1709
2094
  </button>
1710
2095
  </li>
1711
- <li>
1712
- <button class="pf-v5-c-dropdown__menu-item pf-m-icon" type="button">
2096
+ <li role="none">
2097
+ <button
2098
+ class="pf-v5-c-dropdown__menu-item pf-m-icon"
2099
+ role="menuitem"
2100
+ type="button"
2101
+ >
1713
2102
  <span class="pf-v5-c-dropdown__menu-item-icon">
1714
2103
  <i class="fas fa-cubes" aria-hidden="true"></i>
1715
2104
  </span>
@@ -1736,26 +2125,35 @@ deprecated: true
1736
2125
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1737
2126
  </span>
1738
2127
  </button>
1739
- <div class="pf-v5-c-dropdown__menu">
2128
+ <div class="pf-v5-c-dropdown__menu" role="menu">
1740
2129
  <section class="pf-v5-c-dropdown__group">
1741
- <ul>
1742
- <li>
1743
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2130
+ <ul role="none">
2131
+ <li role="none">
2132
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1744
2133
  </li>
1745
- <li>
1746
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2134
+ <li role="none">
2135
+ <button
2136
+ class="pf-v5-c-dropdown__menu-item"
2137
+ role="menuitem"
2138
+ type="button"
2139
+ >Action</button>
1747
2140
  </li>
1748
2141
  </ul>
1749
2142
  </section>
1750
2143
  <section class="pf-v5-c-dropdown__group">
1751
2144
  <h1 class="pf-v5-c-dropdown__group-title">Group 2</h1>
1752
- <ul>
1753
- <li>
1754
- <a class="pf-v5-c-dropdown__menu-item" href="#">Group 2 link</a>
2145
+ <ul role="none">
2146
+ <li role="none">
2147
+ <a
2148
+ class="pf-v5-c-dropdown__menu-item"
2149
+ role="menuitem"
2150
+ href="#"
2151
+ >Group 2 link</a>
1755
2152
  </li>
1756
- <li>
2153
+ <li role="none">
1757
2154
  <button
1758
2155
  class="pf-v5-c-dropdown__menu-item"
2156
+ role="menuitem"
1759
2157
  type="button"
1760
2158
  >Group 2 action</button>
1761
2159
  </li>
@@ -1763,13 +2161,18 @@ deprecated: true
1763
2161
  </section>
1764
2162
  <section class="pf-v5-c-dropdown__group">
1765
2163
  <h1 class="pf-v5-c-dropdown__group-title">Group 3</h1>
1766
- <ul>
1767
- <li>
1768
- <a class="pf-v5-c-dropdown__menu-item" href="#">Group 3 link</a>
2164
+ <ul role="none">
2165
+ <li role="none">
2166
+ <a
2167
+ class="pf-v5-c-dropdown__menu-item"
2168
+ role="menuitem"
2169
+ href="#"
2170
+ >Group 3 link</a>
1769
2171
  </li>
1770
- <li>
2172
+ <li role="none">
1771
2173
  <button
1772
2174
  class="pf-v5-c-dropdown__menu-item"
2175
+ role="menuitem"
1773
2176
  type="button"
1774
2177
  >Group 3 action</button>
1775
2178
  </li>
@@ -1795,27 +2198,36 @@ deprecated: true
1795
2198
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1796
2199
  </span>
1797
2200
  </button>
1798
- <div class="pf-v5-c-dropdown__menu">
2201
+ <div class="pf-v5-c-dropdown__menu" role="menu">
1799
2202
  <section class="pf-v5-c-dropdown__group">
1800
- <ul>
1801
- <li>
1802
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2203
+ <ul role="none">
2204
+ <li role="none">
2205
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1803
2206
  </li>
1804
- <li>
1805
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2207
+ <li role="none">
2208
+ <button
2209
+ class="pf-v5-c-dropdown__menu-item"
2210
+ role="menuitem"
2211
+ type="button"
2212
+ >Action</button>
1806
2213
  </li>
1807
2214
  </ul>
1808
2215
  </section>
1809
2216
  <hr class="pf-v5-c-divider" />
1810
2217
  <section class="pf-v5-c-dropdown__group">
1811
2218
  <h1 class="pf-v5-c-dropdown__group-title">Group 2</h1>
1812
- <ul>
1813
- <li>
1814
- <a class="pf-v5-c-dropdown__menu-item" href="#">Group 2 link</a>
2219
+ <ul role="none">
2220
+ <li role="none">
2221
+ <a
2222
+ class="pf-v5-c-dropdown__menu-item"
2223
+ role="menuitem"
2224
+ href="#"
2225
+ >Group 2 link</a>
1815
2226
  </li>
1816
- <li>
2227
+ <li role="none">
1817
2228
  <button
1818
2229
  class="pf-v5-c-dropdown__menu-item"
2230
+ role="menuitem"
1819
2231
  type="button"
1820
2232
  >Group 2 action</button>
1821
2233
  </li>
@@ -1824,13 +2236,18 @@ deprecated: true
1824
2236
  <hr class="pf-v5-c-divider" />
1825
2237
  <section class="pf-v5-c-dropdown__group">
1826
2238
  <h1 class="pf-v5-c-dropdown__group-title">Group 3</h1>
1827
- <ul>
1828
- <li>
1829
- <a class="pf-v5-c-dropdown__menu-item" href="#">Group 3 link</a>
2239
+ <ul role="none">
2240
+ <li role="none">
2241
+ <a
2242
+ class="pf-v5-c-dropdown__menu-item"
2243
+ role="menuitem"
2244
+ href="#"
2245
+ >Group 3 link</a>
1830
2246
  </li>
1831
- <li>
2247
+ <li role="none">
1832
2248
  <button
1833
2249
  class="pf-v5-c-dropdown__menu-item"
2250
+ role="menuitem"
1834
2251
  type="button"
1835
2252
  >Group 3 action</button>
1836
2253
  </li>
@@ -1856,28 +2273,37 @@ deprecated: true
1856
2273
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1857
2274
  </span>
1858
2275
  </button>
1859
- <div class="pf-v5-c-dropdown__menu">
2276
+ <div class="pf-v5-c-dropdown__menu" role="menu">
1860
2277
  <section class="pf-v5-c-dropdown__group">
1861
- <ul>
1862
- <li>
1863
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2278
+ <ul role="none">
2279
+ <li role="none">
2280
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1864
2281
  </li>
1865
2282
  <li class="pf-v5-c-divider" role="separator"></li>
1866
- <li>
1867
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2283
+ <li role="none">
2284
+ <button
2285
+ class="pf-v5-c-dropdown__menu-item"
2286
+ role="menuitem"
2287
+ type="button"
2288
+ >Action</button>
1868
2289
  </li>
1869
2290
  </ul>
1870
2291
  </section>
1871
2292
  <section class="pf-v5-c-dropdown__group">
1872
2293
  <h1 class="pf-v5-c-dropdown__group-title">Group 2</h1>
1873
- <ul>
1874
- <li>
1875
- <a class="pf-v5-c-dropdown__menu-item" href="#">Group 2 link</a>
2294
+ <ul role="none">
2295
+ <li role="none">
2296
+ <a
2297
+ class="pf-v5-c-dropdown__menu-item"
2298
+ role="menuitem"
2299
+ href="#"
2300
+ >Group 2 link</a>
1876
2301
  </li>
1877
2302
  <li class="pf-v5-c-divider" role="separator"></li>
1878
- <li>
2303
+ <li role="none">
1879
2304
  <button
1880
2305
  class="pf-v5-c-dropdown__menu-item"
2306
+ role="menuitem"
1881
2307
  type="button"
1882
2308
  >Group 2 action</button>
1883
2309
  </li>
@@ -1885,14 +2311,19 @@ deprecated: true
1885
2311
  </section>
1886
2312
  <section class="pf-v5-c-dropdown__group">
1887
2313
  <h1 class="pf-v5-c-dropdown__group-title">Group 3</h1>
1888
- <ul>
1889
- <li>
1890
- <a class="pf-v5-c-dropdown__menu-item" href="#">Group 3 link</a>
2314
+ <ul role="none">
2315
+ <li role="none">
2316
+ <a
2317
+ class="pf-v5-c-dropdown__menu-item"
2318
+ role="menuitem"
2319
+ href="#"
2320
+ >Group 3 link</a>
1891
2321
  </li>
1892
2322
  <li class="pf-v5-c-divider" role="separator"></li>
1893
- <li>
2323
+ <li role="none">
1894
2324
  <button
1895
2325
  class="pf-v5-c-dropdown__menu-item"
2326
+ role="menuitem"
1896
2327
  type="button"
1897
2328
  >Group 3 action</button>
1898
2329
  </li>
@@ -1944,31 +2375,42 @@ The dropdown panel is provided for flexibility in allowing various content withi
1944
2375
  class="pf-v5-c-dropdown__menu"
1945
2376
  aria-labelledby="dropdown-primary-toggle-button"
1946
2377
  hidden
2378
+ role="menu"
1947
2379
  >
1948
- <li>
1949
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2380
+ <li role="none">
2381
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1950
2382
  </li>
1951
- <li>
1952
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2383
+ <li role="none">
2384
+ <button
2385
+ class="pf-v5-c-dropdown__menu-item"
2386
+ role="menuitem"
2387
+ type="button"
2388
+ >Action</button>
1953
2389
  </li>
1954
- <li>
2390
+ <li role="none">
1955
2391
  <a
1956
2392
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2393
+ role="menuitem"
1957
2394
  href="#"
1958
2395
  aria-disabled="true"
1959
2396
  tabindex="-1"
1960
2397
  >Disabled link</a>
1961
2398
  </li>
1962
- <li>
2399
+ <li role="none">
1963
2400
  <button
1964
2401
  class="pf-v5-c-dropdown__menu-item"
2402
+ role="menuitem"
1965
2403
  type="button"
1966
2404
  disabled
1967
2405
  >Disabled action</button>
1968
2406
  </li>
1969
2407
  <li class="pf-v5-c-divider" role="separator"></li>
1970
- <li>
1971
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2408
+ <li role="none">
2409
+ <a
2410
+ class="pf-v5-c-dropdown__menu-item"
2411
+ role="menuitem"
2412
+ href="#"
2413
+ >Separated link</a>
1972
2414
  </li>
1973
2415
  </ul>
1974
2416
  </div>
@@ -1987,31 +2429,42 @@ The dropdown panel is provided for flexibility in allowing various content withi
1987
2429
  <ul
1988
2430
  class="pf-v5-c-dropdown__menu"
1989
2431
  aria-labelledby="dropdown-primary-toggle-expanded-button"
2432
+ role="menu"
1990
2433
  >
1991
- <li>
1992
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2434
+ <li role="none">
2435
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1993
2436
  </li>
1994
- <li>
1995
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2437
+ <li role="none">
2438
+ <button
2439
+ class="pf-v5-c-dropdown__menu-item"
2440
+ role="menuitem"
2441
+ type="button"
2442
+ >Action</button>
1996
2443
  </li>
1997
- <li>
2444
+ <li role="none">
1998
2445
  <a
1999
2446
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2447
+ role="menuitem"
2000
2448
  href="#"
2001
2449
  aria-disabled="true"
2002
2450
  tabindex="-1"
2003
2451
  >Disabled link</a>
2004
2452
  </li>
2005
- <li>
2453
+ <li role="none">
2006
2454
  <button
2007
2455
  class="pf-v5-c-dropdown__menu-item"
2456
+ role="menuitem"
2008
2457
  type="button"
2009
2458
  disabled
2010
2459
  >Disabled action</button>
2011
2460
  </li>
2012
2461
  <li class="pf-v5-c-divider" role="separator"></li>
2013
- <li>
2014
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2462
+ <li role="none">
2463
+ <a
2464
+ class="pf-v5-c-dropdown__menu-item"
2465
+ role="menuitem"
2466
+ href="#"
2467
+ >Separated link</a>
2015
2468
  </li>
2016
2469
  </ul>
2017
2470
  </div>
@@ -2032,31 +2485,42 @@ The dropdown panel is provided for flexibility in allowing various content withi
2032
2485
  class="pf-v5-c-dropdown__menu"
2033
2486
  aria-labelledby="dropdown-primary-toggle-disabled-button"
2034
2487
  hidden
2488
+ role="menu"
2035
2489
  >
2036
- <li>
2037
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2490
+ <li role="none">
2491
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
2038
2492
  </li>
2039
- <li>
2040
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2493
+ <li role="none">
2494
+ <button
2495
+ class="pf-v5-c-dropdown__menu-item"
2496
+ role="menuitem"
2497
+ type="button"
2498
+ >Action</button>
2041
2499
  </li>
2042
- <li>
2500
+ <li role="none">
2043
2501
  <a
2044
2502
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2503
+ role="menuitem"
2045
2504
  href="#"
2046
2505
  aria-disabled="true"
2047
2506
  tabindex="-1"
2048
2507
  >Disabled link</a>
2049
2508
  </li>
2050
- <li>
2509
+ <li role="none">
2051
2510
  <button
2052
2511
  class="pf-v5-c-dropdown__menu-item"
2512
+ role="menuitem"
2053
2513
  type="button"
2054
2514
  disabled
2055
2515
  >Disabled action</button>
2056
2516
  </li>
2057
2517
  <li class="pf-v5-c-divider" role="separator"></li>
2058
- <li>
2059
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2518
+ <li role="none">
2519
+ <a
2520
+ class="pf-v5-c-dropdown__menu-item"
2521
+ role="menuitem"
2522
+ href="#"
2523
+ >Separated link</a>
2060
2524
  </li>
2061
2525
  </ul>
2062
2526
  </div>
@@ -2082,31 +2546,42 @@ The dropdown panel is provided for flexibility in allowing various content withi
2082
2546
  class="pf-v5-c-dropdown__menu"
2083
2547
  aria-labelledby="dropdown-secondary-toggle-button"
2084
2548
  hidden
2549
+ role="menu"
2085
2550
  >
2086
- <li>
2087
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2551
+ <li role="none">
2552
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
2088
2553
  </li>
2089
- <li>
2090
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2554
+ <li role="none">
2555
+ <button
2556
+ class="pf-v5-c-dropdown__menu-item"
2557
+ role="menuitem"
2558
+ type="button"
2559
+ >Action</button>
2091
2560
  </li>
2092
- <li>
2561
+ <li role="none">
2093
2562
  <a
2094
2563
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2564
+ role="menuitem"
2095
2565
  href="#"
2096
2566
  aria-disabled="true"
2097
2567
  tabindex="-1"
2098
2568
  >Disabled link</a>
2099
2569
  </li>
2100
- <li>
2570
+ <li role="none">
2101
2571
  <button
2102
2572
  class="pf-v5-c-dropdown__menu-item"
2573
+ role="menuitem"
2103
2574
  type="button"
2104
2575
  disabled
2105
2576
  >Disabled action</button>
2106
2577
  </li>
2107
2578
  <li class="pf-v5-c-divider" role="separator"></li>
2108
- <li>
2109
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2579
+ <li role="none">
2580
+ <a
2581
+ class="pf-v5-c-dropdown__menu-item"
2582
+ role="menuitem"
2583
+ href="#"
2584
+ >Separated link</a>
2110
2585
  </li>
2111
2586
  </ul>
2112
2587
  </div>
@@ -2125,31 +2600,42 @@ The dropdown panel is provided for flexibility in allowing various content withi
2125
2600
  <ul
2126
2601
  class="pf-v5-c-dropdown__menu"
2127
2602
  aria-labelledby="dropdown-secondary-toggle-expanded-button"
2603
+ role="menu"
2128
2604
  >
2129
- <li>
2130
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2605
+ <li role="none">
2606
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
2131
2607
  </li>
2132
- <li>
2133
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2608
+ <li role="none">
2609
+ <button
2610
+ class="pf-v5-c-dropdown__menu-item"
2611
+ role="menuitem"
2612
+ type="button"
2613
+ >Action</button>
2134
2614
  </li>
2135
- <li>
2615
+ <li role="none">
2136
2616
  <a
2137
2617
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2618
+ role="menuitem"
2138
2619
  href="#"
2139
2620
  aria-disabled="true"
2140
2621
  tabindex="-1"
2141
2622
  >Disabled link</a>
2142
2623
  </li>
2143
- <li>
2624
+ <li role="none">
2144
2625
  <button
2145
2626
  class="pf-v5-c-dropdown__menu-item"
2627
+ role="menuitem"
2146
2628
  type="button"
2147
2629
  disabled
2148
2630
  >Disabled action</button>
2149
2631
  </li>
2150
2632
  <li class="pf-v5-c-divider" role="separator"></li>
2151
- <li>
2152
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2633
+ <li role="none">
2634
+ <a
2635
+ class="pf-v5-c-dropdown__menu-item"
2636
+ role="menuitem"
2637
+ href="#"
2638
+ >Separated link</a>
2153
2639
  </li>
2154
2640
  </ul>
2155
2641
  </div>
@@ -2170,31 +2656,42 @@ The dropdown panel is provided for flexibility in allowing various content withi
2170
2656
  class="pf-v5-c-dropdown__menu"
2171
2657
  aria-labelledby="dropdown-secondary-toggle-disabled-button"
2172
2658
  hidden
2659
+ role="menu"
2173
2660
  >
2174
- <li>
2175
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2661
+ <li role="none">
2662
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
2176
2663
  </li>
2177
- <li>
2178
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2664
+ <li role="none">
2665
+ <button
2666
+ class="pf-v5-c-dropdown__menu-item"
2667
+ role="menuitem"
2668
+ type="button"
2669
+ >Action</button>
2179
2670
  </li>
2180
- <li>
2671
+ <li role="none">
2181
2672
  <a
2182
2673
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2674
+ role="menuitem"
2183
2675
  href="#"
2184
2676
  aria-disabled="true"
2185
2677
  tabindex="-1"
2186
2678
  >Disabled link</a>
2187
2679
  </li>
2188
- <li>
2680
+ <li role="none">
2189
2681
  <button
2190
2682
  class="pf-v5-c-dropdown__menu-item"
2683
+ role="menuitem"
2191
2684
  type="button"
2192
2685
  disabled
2193
2686
  >Disabled action</button>
2194
2687
  </li>
2195
2688
  <li class="pf-v5-c-divider" role="separator"></li>
2196
- <li>
2197
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2689
+ <li role="none">
2690
+ <a
2691
+ class="pf-v5-c-dropdown__menu-item"
2692
+ role="menuitem"
2693
+ href="#"
2694
+ >Separated link</a>
2198
2695
  </li>
2199
2696
  </ul>
2200
2697
  </div>
@@ -2223,22 +2720,33 @@ The dropdown panel is provided for flexibility in allowing various content withi
2223
2720
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2224
2721
  </span>
2225
2722
  </button>
2226
- <div class="pf-v5-c-dropdown__menu">
2723
+ <div class="pf-v5-c-dropdown__menu" role="menu">
2227
2724
  <section class="pf-v5-c-dropdown__group">
2228
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">Text</div>
2229
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">More text</div>
2725
+ <div class="pf-v5-c-dropdown__menu-item pf-m-text" role="menuitem">Text</div>
2726
+ <div
2727
+ class="pf-v5-c-dropdown__menu-item pf-m-text"
2728
+ role="menuitem"
2729
+ >More text</div>
2230
2730
  </section>
2231
2731
  <hr class="pf-v5-c-divider" />
2232
2732
  <section class="pf-v5-c-dropdown__group">
2233
- <ul>
2234
- <li>
2235
- <a class="pf-v5-c-dropdown__menu-item" href="#">My profile</a>
2733
+ <ul role="none">
2734
+ <li role="none">
2735
+ <a
2736
+ class="pf-v5-c-dropdown__menu-item"
2737
+ role="menuitem"
2738
+ href="#"
2739
+ >My profile</a>
2236
2740
  </li>
2237
- <li>
2238
- <a class="pf-v5-c-dropdown__menu-item" href="#">User management</a>
2741
+ <li role="none">
2742
+ <a
2743
+ class="pf-v5-c-dropdown__menu-item"
2744
+ role="menuitem"
2745
+ href="#"
2746
+ >User management</a>
2239
2747
  </li>
2240
- <li>
2241
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
2748
+ <li role="none">
2749
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Logout</a>
2242
2750
  </li>
2243
2751
  </ul>
2244
2752
  </section>
@@ -2265,10 +2773,12 @@ The dropdown panel is provided for flexibility in allowing various content withi
2265
2773
  <ul
2266
2774
  class="pf-v5-c-dropdown__menu"
2267
2775
  aria-labelledby="dropdown-with-description-button"
2776
+ role="menu"
2268
2777
  >
2269
- <li>
2778
+ <li role="none">
2270
2779
  <button
2271
2780
  class="pf-v5-c-dropdown__menu-item pf-m-description"
2781
+ role="menuitem"
2272
2782
  type="button"
2273
2783
  >
2274
2784
  <div class="pf-v5-c-dropdown__menu-item-main">Menu item default</div>
@@ -2278,9 +2788,10 @@ The dropdown panel is provided for flexibility in allowing various content withi
2278
2788
  </button>
2279
2789
  </li>
2280
2790
 
2281
- <li>
2791
+ <li role="none">
2282
2792
  <button
2283
2793
  class="pf-v5-c-dropdown__menu-item pf-m-description"
2794
+ role="menuitem"
2284
2795
  type="button"
2285
2796
  >
2286
2797
  <div
@@ -2292,9 +2803,10 @@ The dropdown panel is provided for flexibility in allowing various content withi
2292
2803
  </button>
2293
2804
  </li>
2294
2805
 
2295
- <li>
2806
+ <li role="none">
2296
2807
  <button
2297
2808
  class="pf-v5-c-dropdown__menu-item pf-m-description"
2809
+ role="menuitem"
2298
2810
  type="button"
2299
2811
  disabled
2300
2812
  >
@@ -2305,9 +2817,10 @@ The dropdown panel is provided for flexibility in allowing various content withi
2305
2817
  </button>
2306
2818
  </li>
2307
2819
 
2308
- <li>
2820
+ <li role="none">
2309
2821
  <a
2310
2822
  class="pf-v5-c-dropdown__menu-item pf-m-icon pf-m-description"
2823
+ role="menuitem"
2311
2824
  href="#"
2312
2825
  >
2313
2826
  <div class="pf-v5-c-dropdown__menu-item-main">
@@ -2322,9 +2835,10 @@ The dropdown panel is provided for flexibility in allowing various content withi
2322
2835
  </a>
2323
2836
  </li>
2324
2837
 
2325
- <li>
2838
+ <li role="none">
2326
2839
  <button
2327
2840
  class="pf-v5-c-dropdown__menu-item pf-m-icon pf-m-description"
2841
+ role="menuitem"
2328
2842
  type="button"
2329
2843
  >
2330
2844
  <div class="pf-v5-c-dropdown__menu-item-main">