@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/DataList/examples/DataList.md CHANGED
@@ -172,31 +172,46 @@ When a list item includes more than one block of content, it can be difficult fo
172
172
  class="pf-v5-c-dropdown__menu pf-m-align-right"
173
173
  aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1-dropdown-kebab-button"
174
174
  hidden
175
+ role="menu"
175
176
  >
176
- <li>
177
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
177
+ <li role="none">
178
+ <a
179
+ class="pf-v5-c-dropdown__menu-item"
180
+ role="menuitem"
181
+ href="#"
182
+ >Link</a>
178
183
  </li>
179
- <li>
180
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
184
+ <li role="none">
185
+ <button
186
+ class="pf-v5-c-dropdown__menu-item"
187
+ role="menuitem"
188
+ type="button"
189
+ >Action</button>
181
190
  </li>
182
- <li>
191
+ <li role="none">
183
192
  <a
184
193
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
194
+ role="menuitem"
185
195
  href="#"
186
196
  aria-disabled="true"
187
197
  tabindex="-1"
188
198
  >Disabled link</a>
189
199
  </li>
190
- <li>
200
+ <li role="none">
191
201
  <button
192
202
  class="pf-v5-c-dropdown__menu-item"
203
+ role="menuitem"
193
204
  type="button"
194
205
  disabled
195
206
  >Disabled action</button>
196
207
  </li>
197
208
  <li class="pf-v5-c-divider" role="separator"></li>
198
- <li>
199
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
209
+ <li role="none">
210
+ <a
211
+ class="pf-v5-c-dropdown__menu-item"
212
+ role="menuitem"
213
+ href="#"
214
+ >Separated link</a>
200
215
  </li>
201
216
  </ul>
202
217
  </div>
@@ -248,31 +263,46 @@ When a list item includes more than one block of content, it can be difficult fo
248
263
  class="pf-v5-c-dropdown__menu pf-m-align-right"
249
264
  aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2-dropdown-kebab-button"
250
265
  hidden
266
+ role="menu"
251
267
  >
252
- <li>
253
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
268
+ <li role="none">
269
+ <a
270
+ class="pf-v5-c-dropdown__menu-item"
271
+ role="menuitem"
272
+ href="#"
273
+ >Link</a>
254
274
  </li>
255
- <li>
256
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
275
+ <li role="none">
276
+ <button
277
+ class="pf-v5-c-dropdown__menu-item"
278
+ role="menuitem"
279
+ type="button"
280
+ >Action</button>
257
281
  </li>
258
- <li>
282
+ <li role="none">
259
283
  <a
260
284
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
285
+ role="menuitem"
261
286
  href="#"
262
287
  aria-disabled="true"
263
288
  tabindex="-1"
264
289
  >Disabled link</a>
265
290
  </li>
266
- <li>
291
+ <li role="none">
267
292
  <button
268
293
  class="pf-v5-c-dropdown__menu-item"
294
+ role="menuitem"
269
295
  type="button"
270
296
  disabled
271
297
  >Disabled action</button>
272
298
  </li>
273
299
  <li class="pf-v5-c-divider" role="separator"></li>
274
- <li>
275
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
300
+ <li role="none">
301
+ <a
302
+ class="pf-v5-c-dropdown__menu-item"
303
+ role="menuitem"
304
+ href="#"
305
+ >Separated link</a>
276
306
  </li>
277
307
  </ul>
278
308
  </div>
@@ -330,31 +360,46 @@ When a list item includes more than one block of content, it can be difficult fo
330
360
  class="pf-v5-c-dropdown__menu pf-m-align-right"
331
361
  aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3-dropdown-kebab-button"
332
362
  hidden
363
+ role="menu"
333
364
  >
334
- <li>
335
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
365
+ <li role="none">
366
+ <a
367
+ class="pf-v5-c-dropdown__menu-item"
368
+ role="menuitem"
369
+ href="#"
370
+ >Link</a>
336
371
  </li>
337
- <li>
338
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
372
+ <li role="none">
373
+ <button
374
+ class="pf-v5-c-dropdown__menu-item"
375
+ role="menuitem"
376
+ type="button"
377
+ >Action</button>
339
378
  </li>
340
- <li>
379
+ <li role="none">
341
380
  <a
342
381
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
382
+ role="menuitem"
343
383
  href="#"
344
384
  aria-disabled="true"
345
385
  tabindex="-1"
346
386
  >Disabled link</a>
347
387
  </li>
348
- <li>
388
+ <li role="none">
349
389
  <button
350
390
  class="pf-v5-c-dropdown__menu-item"
391
+ role="menuitem"
351
392
  type="button"
352
393
  disabled
353
394
  >Disabled action</button>
354
395
  </li>
355
396
  <li class="pf-v5-c-divider" role="separator"></li>
356
- <li>
357
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
397
+ <li role="none">
398
+ <a
399
+ class="pf-v5-c-dropdown__menu-item"
400
+ role="menuitem"
401
+ href="#"
402
+ >Separated link</a>
358
403
  </li>
359
404
  </ul>
360
405
  </div>
@@ -457,31 +502,46 @@ When a list item includes more than one block of content, it can be difficult fo
457
502
  class="pf-v5-c-dropdown__menu pf-m-align-right"
458
503
  aria-labelledby="data-list-expandable-item-1-dropdown-kebab-button"
459
504
  hidden
505
+ role="menu"
460
506
  >
461
- <li>
462
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
507
+ <li role="none">
508
+ <a
509
+ class="pf-v5-c-dropdown__menu-item"
510
+ role="menuitem"
511
+ href="#"
512
+ >Link</a>
463
513
  </li>
464
- <li>
465
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
514
+ <li role="none">
515
+ <button
516
+ class="pf-v5-c-dropdown__menu-item"
517
+ role="menuitem"
518
+ type="button"
519
+ >Action</button>
466
520
  </li>
467
- <li>
521
+ <li role="none">
468
522
  <a
469
523
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
524
+ role="menuitem"
470
525
  href="#"
471
526
  aria-disabled="true"
472
527
  tabindex="-1"
473
528
  >Disabled link</a>
474
529
  </li>
475
- <li>
530
+ <li role="none">
476
531
  <button
477
532
  class="pf-v5-c-dropdown__menu-item"
533
+ role="menuitem"
478
534
  type="button"
479
535
  disabled
480
536
  >Disabled action</button>
481
537
  </li>
482
538
  <li class="pf-v5-c-divider" role="separator"></li>
483
- <li>
484
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
539
+ <li role="none">
540
+ <a
541
+ class="pf-v5-c-dropdown__menu-item"
542
+ role="menuitem"
543
+ href="#"
544
+ >Separated link</a>
485
545
  </li>
486
546
  </ul>
487
547
  </div>
@@ -549,31 +609,46 @@ When a list item includes more than one block of content, it can be difficult fo
549
609
  class="pf-v5-c-dropdown__menu pf-m-align-right"
550
610
  aria-labelledby="data-list-expandable-item-2-dropdown-kebab-button"
551
611
  hidden
612
+ role="menu"
552
613
  >
553
- <li>
554
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
614
+ <li role="none">
615
+ <a
616
+ class="pf-v5-c-dropdown__menu-item"
617
+ role="menuitem"
618
+ href="#"
619
+ >Link</a>
555
620
  </li>
556
- <li>
557
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
621
+ <li role="none">
622
+ <button
623
+ class="pf-v5-c-dropdown__menu-item"
624
+ role="menuitem"
625
+ type="button"
626
+ >Action</button>
558
627
  </li>
559
- <li>
628
+ <li role="none">
560
629
  <a
561
630
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
631
+ role="menuitem"
562
632
  href="#"
563
633
  aria-disabled="true"
564
634
  tabindex="-1"
565
635
  >Disabled link</a>
566
636
  </li>
567
- <li>
637
+ <li role="none">
568
638
  <button
569
639
  class="pf-v5-c-dropdown__menu-item"
640
+ role="menuitem"
570
641
  type="button"
571
642
  disabled
572
643
  >Disabled action</button>
573
644
  </li>
574
645
  <li class="pf-v5-c-divider" role="separator"></li>
575
- <li>
576
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
646
+ <li role="none">
647
+ <a
648
+ class="pf-v5-c-dropdown__menu-item"
649
+ role="menuitem"
650
+ href="#"
651
+ >Separated link</a>
577
652
  </li>
578
653
  </ul>
579
654
  </div>
@@ -645,31 +720,46 @@ When a list item includes more than one block of content, it can be difficult fo
645
720
  class="pf-v5-c-dropdown__menu pf-m-align-right"
646
721
  aria-labelledby="data-list-expandable-item-3-dropdown-kebab-button"
647
722
  hidden
723
+ role="menu"
648
724
  >
649
- <li>
650
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
725
+ <li role="none">
726
+ <a
727
+ class="pf-v5-c-dropdown__menu-item"
728
+ role="menuitem"
729
+ href="#"
730
+ >Link</a>
651
731
  </li>
652
- <li>
653
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
732
+ <li role="none">
733
+ <button
734
+ class="pf-v5-c-dropdown__menu-item"
735
+ role="menuitem"
736
+ type="button"
737
+ >Action</button>
654
738
  </li>
655
- <li>
739
+ <li role="none">
656
740
  <a
657
741
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
742
+ role="menuitem"
658
743
  href="#"
659
744
  aria-disabled="true"
660
745
  tabindex="-1"
661
746
  >Disabled link</a>
662
747
  </li>
663
- <li>
748
+ <li role="none">
664
749
  <button
665
750
  class="pf-v5-c-dropdown__menu-item"
751
+ role="menuitem"
666
752
  type="button"
667
753
  disabled
668
754
  >Disabled action</button>
669
755
  </li>
670
756
  <li class="pf-v5-c-divider" role="separator"></li>
671
- <li>
672
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
757
+ <li role="none">
758
+ <a
759
+ class="pf-v5-c-dropdown__menu-item"
760
+ role="menuitem"
761
+ href="#"
762
+ >Separated link</a>
673
763
  </li>
674
764
  </ul>
675
765
  </div>
@@ -753,31 +843,46 @@ When a list item includes more than one block of content, it can be difficult fo
753
843
  class="pf-v5-c-dropdown__menu pf-m-align-right"
754
844
  aria-labelledby="data-list-expandable-compact-item-1-dropdown-kebab-button"
755
845
  hidden
846
+ role="menu"
756
847
  >
757
- <li>
758
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
848
+ <li role="none">
849
+ <a
850
+ class="pf-v5-c-dropdown__menu-item"
851
+ role="menuitem"
852
+ href="#"
853
+ >Link</a>
759
854
  </li>
760
- <li>
761
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
855
+ <li role="none">
856
+ <button
857
+ class="pf-v5-c-dropdown__menu-item"
858
+ role="menuitem"
859
+ type="button"
860
+ >Action</button>
762
861
  </li>
763
- <li>
862
+ <li role="none">
764
863
  <a
765
864
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
865
+ role="menuitem"
766
866
  href="#"
767
867
  aria-disabled="true"
768
868
  tabindex="-1"
769
869
  >Disabled link</a>
770
870
  </li>
771
- <li>
871
+ <li role="none">
772
872
  <button
773
873
  class="pf-v5-c-dropdown__menu-item"
874
+ role="menuitem"
774
875
  type="button"
775
876
  disabled
776
877
  >Disabled action</button>
777
878
  </li>
778
879
  <li class="pf-v5-c-divider" role="separator"></li>
779
- <li>
780
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
880
+ <li role="none">
881
+ <a
882
+ class="pf-v5-c-dropdown__menu-item"
883
+ role="menuitem"
884
+ href="#"
885
+ >Separated link</a>
781
886
  </li>
782
887
  </ul>
783
888
  </div>
@@ -848,31 +953,46 @@ When a list item includes more than one block of content, it can be difficult fo
848
953
  class="pf-v5-c-dropdown__menu pf-m-align-right"
849
954
  aria-labelledby="data-list-expandable-compact-item-2-dropdown-kebab-button"
850
955
  hidden
956
+ role="menu"
851
957
  >
852
- <li>
853
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
958
+ <li role="none">
959
+ <a
960
+ class="pf-v5-c-dropdown__menu-item"
961
+ role="menuitem"
962
+ href="#"
963
+ >Link</a>
854
964
  </li>
855
- <li>
856
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
965
+ <li role="none">
966
+ <button
967
+ class="pf-v5-c-dropdown__menu-item"
968
+ role="menuitem"
969
+ type="button"
970
+ >Action</button>
857
971
  </li>
858
- <li>
972
+ <li role="none">
859
973
  <a
860
974
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
975
+ role="menuitem"
861
976
  href="#"
862
977
  aria-disabled="true"
863
978
  tabindex="-1"
864
979
  >Disabled link</a>
865
980
  </li>
866
- <li>
981
+ <li role="none">
867
982
  <button
868
983
  class="pf-v5-c-dropdown__menu-item"
984
+ role="menuitem"
869
985
  type="button"
870
986
  disabled
871
987
  >Disabled action</button>
872
988
  </li>
873
989
  <li class="pf-v5-c-divider" role="separator"></li>
874
- <li>
875
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
990
+ <li role="none">
991
+ <a
992
+ class="pf-v5-c-dropdown__menu-item"
993
+ role="menuitem"
994
+ href="#"
995
+ >Separated link</a>
876
996
  </li>
877
997
  </ul>
878
998
  </div>
@@ -944,31 +1064,46 @@ When a list item includes more than one block of content, it can be difficult fo
944
1064
  class="pf-v5-c-dropdown__menu pf-m-align-right"
945
1065
  aria-labelledby="data-list-expandable-compact-item-3-dropdown-kebab-button"
946
1066
  hidden
1067
+ role="menu"
947
1068
  >
948
- <li>
949
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1069
+ <li role="none">
1070
+ <a
1071
+ class="pf-v5-c-dropdown__menu-item"
1072
+ role="menuitem"
1073
+ href="#"
1074
+ >Link</a>
950
1075
  </li>
951
- <li>
952
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1076
+ <li role="none">
1077
+ <button
1078
+ class="pf-v5-c-dropdown__menu-item"
1079
+ role="menuitem"
1080
+ type="button"
1081
+ >Action</button>
953
1082
  </li>
954
- <li>
1083
+ <li role="none">
955
1084
  <a
956
1085
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1086
+ role="menuitem"
957
1087
  href="#"
958
1088
  aria-disabled="true"
959
1089
  tabindex="-1"
960
1090
  >Disabled link</a>
961
1091
  </li>
962
- <li>
1092
+ <li role="none">
963
1093
  <button
964
1094
  class="pf-v5-c-dropdown__menu-item"
1095
+ role="menuitem"
965
1096
  type="button"
966
1097
  disabled
967
1098
  >Disabled action</button>
968
1099
  </li>
969
1100
  <li class="pf-v5-c-divider" role="separator"></li>
970
- <li>
971
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1101
+ <li role="none">
1102
+ <a
1103
+ class="pf-v5-c-dropdown__menu-item"
1104
+ role="menuitem"
1105
+ href="#"
1106
+ >Separated link</a>
972
1107
  </li>
973
1108
  </ul>
974
1109
  </div>
@@ -1052,31 +1187,46 @@ When a list item includes more than one block of content, it can be difficult fo
1052
1187
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1053
1188
  aria-labelledby="data-list-expandable-nested-item-1-dropdown-kebab-button"
1054
1189
  hidden
1190
+ role="menu"
1055
1191
  >
1056
- <li>
1057
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1192
+ <li role="none">
1193
+ <a
1194
+ class="pf-v5-c-dropdown__menu-item"
1195
+ role="menuitem"
1196
+ href="#"
1197
+ >Link</a>
1058
1198
  </li>
1059
- <li>
1060
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1199
+ <li role="none">
1200
+ <button
1201
+ class="pf-v5-c-dropdown__menu-item"
1202
+ role="menuitem"
1203
+ type="button"
1204
+ >Action</button>
1061
1205
  </li>
1062
- <li>
1206
+ <li role="none">
1063
1207
  <a
1064
1208
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1209
+ role="menuitem"
1065
1210
  href="#"
1066
1211
  aria-disabled="true"
1067
1212
  tabindex="-1"
1068
1213
  >Disabled link</a>
1069
1214
  </li>
1070
- <li>
1215
+ <li role="none">
1071
1216
  <button
1072
1217
  class="pf-v5-c-dropdown__menu-item"
1218
+ role="menuitem"
1073
1219
  type="button"
1074
1220
  disabled
1075
1221
  >Disabled action</button>
1076
1222
  </li>
1077
1223
  <li class="pf-v5-c-divider" role="separator"></li>
1078
- <li>
1079
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1224
+ <li role="none">
1225
+ <a
1226
+ class="pf-v5-c-dropdown__menu-item"
1227
+ role="menuitem"
1228
+ href="#"
1229
+ >Separated link</a>
1080
1230
  </li>
1081
1231
  </ul>
1082
1232
  </div>
@@ -1273,31 +1423,46 @@ When a list item includes more than one block of content, it can be difficult fo
1273
1423
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1274
1424
  aria-labelledby="data-list-expandable-nested-item-2-dropdown-kebab-button"
1275
1425
  hidden
1426
+ role="menu"
1276
1427
  >
1277
- <li>
1278
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1428
+ <li role="none">
1429
+ <a
1430
+ class="pf-v5-c-dropdown__menu-item"
1431
+ role="menuitem"
1432
+ href="#"
1433
+ >Link</a>
1279
1434
  </li>
1280
- <li>
1281
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1435
+ <li role="none">
1436
+ <button
1437
+ class="pf-v5-c-dropdown__menu-item"
1438
+ role="menuitem"
1439
+ type="button"
1440
+ >Action</button>
1282
1441
  </li>
1283
- <li>
1442
+ <li role="none">
1284
1443
  <a
1285
1444
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1445
+ role="menuitem"
1286
1446
  href="#"
1287
1447
  aria-disabled="true"
1288
1448
  tabindex="-1"
1289
1449
  >Disabled link</a>
1290
1450
  </li>
1291
- <li>
1451
+ <li role="none">
1292
1452
  <button
1293
1453
  class="pf-v5-c-dropdown__menu-item"
1454
+ role="menuitem"
1294
1455
  type="button"
1295
1456
  disabled
1296
1457
  >Disabled action</button>
1297
1458
  </li>
1298
1459
  <li class="pf-v5-c-divider" role="separator"></li>
1299
- <li>
1300
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1460
+ <li role="none">
1461
+ <a
1462
+ class="pf-v5-c-dropdown__menu-item"
1463
+ role="menuitem"
1464
+ href="#"
1465
+ >Separated link</a>
1301
1466
  </li>
1302
1467
  </ul>
1303
1468
  </div>
@@ -1369,31 +1534,46 @@ When a list item includes more than one block of content, it can be difficult fo
1369
1534
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1370
1535
  aria-labelledby="data-list-expandable-nested-item-3-dropdown-kebab-button"
1371
1536
  hidden
1537
+ role="menu"
1372
1538
  >
1373
- <li>
1374
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1539
+ <li role="none">
1540
+ <a
1541
+ class="pf-v5-c-dropdown__menu-item"
1542
+ role="menuitem"
1543
+ href="#"
1544
+ >Link</a>
1375
1545
  </li>
1376
- <li>
1377
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1546
+ <li role="none">
1547
+ <button
1548
+ class="pf-v5-c-dropdown__menu-item"
1549
+ role="menuitem"
1550
+ type="button"
1551
+ >Action</button>
1378
1552
  </li>
1379
- <li>
1553
+ <li role="none">
1380
1554
  <a
1381
1555
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1556
+ role="menuitem"
1382
1557
  href="#"
1383
1558
  aria-disabled="true"
1384
1559
  tabindex="-1"
1385
1560
  >Disabled link</a>
1386
1561
  </li>
1387
- <li>
1562
+ <li role="none">
1388
1563
  <button
1389
1564
  class="pf-v5-c-dropdown__menu-item"
1565
+ role="menuitem"
1390
1566
  type="button"
1391
1567
  disabled
1392
1568
  >Disabled action</button>
1393
1569
  </li>
1394
1570
  <li class="pf-v5-c-divider" role="separator"></li>
1395
- <li>
1396
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1571
+ <li role="none">
1572
+ <a
1573
+ class="pf-v5-c-dropdown__menu-item"
1574
+ role="menuitem"
1575
+ href="#"
1576
+ >Separated link</a>
1397
1577
  </li>
1398
1578
  </ul>
1399
1579
  </div>
@@ -1473,31 +1653,46 @@ When a list item includes more than one block of content, it can be difficult fo
1473
1653
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1474
1654
  aria-labelledby="data-list-compact-item-1-dropdown-kebab-button"
1475
1655
  hidden
1656
+ role="menu"
1476
1657
  >
1477
- <li>
1478
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1658
+ <li role="none">
1659
+ <a
1660
+ class="pf-v5-c-dropdown__menu-item"
1661
+ role="menuitem"
1662
+ href="#"
1663
+ >Link</a>
1479
1664
  </li>
1480
- <li>
1481
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1665
+ <li role="none">
1666
+ <button
1667
+ class="pf-v5-c-dropdown__menu-item"
1668
+ role="menuitem"
1669
+ type="button"
1670
+ >Action</button>
1482
1671
  </li>
1483
- <li>
1672
+ <li role="none">
1484
1673
  <a
1485
1674
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1675
+ role="menuitem"
1486
1676
  href="#"
1487
1677
  aria-disabled="true"
1488
1678
  tabindex="-1"
1489
1679
  >Disabled link</a>
1490
1680
  </li>
1491
- <li>
1681
+ <li role="none">
1492
1682
  <button
1493
1683
  class="pf-v5-c-dropdown__menu-item"
1684
+ role="menuitem"
1494
1685
  type="button"
1495
1686
  disabled
1496
1687
  >Disabled action</button>
1497
1688
  </li>
1498
1689
  <li class="pf-v5-c-divider" role="separator"></li>
1499
- <li>
1500
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1690
+ <li role="none">
1691
+ <a
1692
+ class="pf-v5-c-dropdown__menu-item"
1693
+ role="menuitem"
1694
+ href="#"
1695
+ >Separated link</a>
1501
1696
  </li>
1502
1697
  </ul>
1503
1698
  </div>
@@ -1547,31 +1742,46 @@ When a list item includes more than one block of content, it can be difficult fo
1547
1742
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1548
1743
  aria-labelledby="data-list-compact-item-2-dropdown-kebab-button"
1549
1744
  hidden
1745
+ role="menu"
1550
1746
  >
1551
- <li>
1552
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1747
+ <li role="none">
1748
+ <a
1749
+ class="pf-v5-c-dropdown__menu-item"
1750
+ role="menuitem"
1751
+ href="#"
1752
+ >Link</a>
1553
1753
  </li>
1554
- <li>
1555
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1754
+ <li role="none">
1755
+ <button
1756
+ class="pf-v5-c-dropdown__menu-item"
1757
+ role="menuitem"
1758
+ type="button"
1759
+ >Action</button>
1556
1760
  </li>
1557
- <li>
1761
+ <li role="none">
1558
1762
  <a
1559
1763
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1764
+ role="menuitem"
1560
1765
  href="#"
1561
1766
  aria-disabled="true"
1562
1767
  tabindex="-1"
1563
1768
  >Disabled link</a>
1564
1769
  </li>
1565
- <li>
1770
+ <li role="none">
1566
1771
  <button
1567
1772
  class="pf-v5-c-dropdown__menu-item"
1773
+ role="menuitem"
1568
1774
  type="button"
1569
1775
  disabled
1570
1776
  >Disabled action</button>
1571
1777
  </li>
1572
1778
  <li class="pf-v5-c-divider" role="separator"></li>
1573
- <li>
1574
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1779
+ <li role="none">
1780
+ <a
1781
+ class="pf-v5-c-dropdown__menu-item"
1782
+ role="menuitem"
1783
+ href="#"
1784
+ >Separated link</a>
1575
1785
  </li>
1576
1786
  </ul>
1577
1787
  </div>
@@ -1627,31 +1837,46 @@ When a list item includes more than one block of content, it can be difficult fo
1627
1837
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1628
1838
  aria-labelledby="data-list-compact-item-3-dropdown-kebab-button"
1629
1839
  hidden
1840
+ role="menu"
1630
1841
  >
1631
- <li>
1632
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1842
+ <li role="none">
1843
+ <a
1844
+ class="pf-v5-c-dropdown__menu-item"
1845
+ role="menuitem"
1846
+ href="#"
1847
+ >Link</a>
1633
1848
  </li>
1634
- <li>
1635
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
1849
+ <li role="none">
1850
+ <button
1851
+ class="pf-v5-c-dropdown__menu-item"
1852
+ role="menuitem"
1853
+ type="button"
1854
+ >Action</button>
1636
1855
  </li>
1637
- <li>
1856
+ <li role="none">
1638
1857
  <a
1639
1858
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1859
+ role="menuitem"
1640
1860
  href="#"
1641
1861
  aria-disabled="true"
1642
1862
  tabindex="-1"
1643
1863
  >Disabled link</a>
1644
1864
  </li>
1645
- <li>
1865
+ <li role="none">
1646
1866
  <button
1647
1867
  class="pf-v5-c-dropdown__menu-item"
1868
+ role="menuitem"
1648
1869
  type="button"
1649
1870
  disabled
1650
1871
  >Disabled action</button>
1651
1872
  </li>
1652
1873
  <li class="pf-v5-c-divider" role="separator"></li>
1653
- <li>
1654
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
1874
+ <li role="none">
1875
+ <a
1876
+ class="pf-v5-c-dropdown__menu-item"
1877
+ role="menuitem"
1878
+ href="#"
1879
+ >Separated link</a>
1655
1880
  </li>
1656
1881
  </ul>
1657
1882
  </div>
@@ -1794,31 +2019,46 @@ When a list item includes more than one block of content, it can be difficult fo
1794
2019
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1795
2020
  aria-labelledby="data-list-flex-modifiers-item-1-dropdown-kebab-button"
1796
2021
  hidden
2022
+ role="menu"
1797
2023
  >
1798
- <li>
1799
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2024
+ <li role="none">
2025
+ <a
2026
+ class="pf-v5-c-dropdown__menu-item"
2027
+ role="menuitem"
2028
+ href="#"
2029
+ >Link</a>
1800
2030
  </li>
1801
- <li>
1802
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2031
+ <li role="none">
2032
+ <button
2033
+ class="pf-v5-c-dropdown__menu-item"
2034
+ role="menuitem"
2035
+ type="button"
2036
+ >Action</button>
1803
2037
  </li>
1804
- <li>
2038
+ <li role="none">
1805
2039
  <a
1806
2040
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2041
+ role="menuitem"
1807
2042
  href="#"
1808
2043
  aria-disabled="true"
1809
2044
  tabindex="-1"
1810
2045
  >Disabled link</a>
1811
2046
  </li>
1812
- <li>
2047
+ <li role="none">
1813
2048
  <button
1814
2049
  class="pf-v5-c-dropdown__menu-item"
2050
+ role="menuitem"
1815
2051
  type="button"
1816
2052
  disabled
1817
2053
  >Disabled action</button>
1818
2054
  </li>
1819
2055
  <li class="pf-v5-c-divider" role="separator"></li>
1820
- <li>
1821
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2056
+ <li role="none">
2057
+ <a
2058
+ class="pf-v5-c-dropdown__menu-item"
2059
+ role="menuitem"
2060
+ href="#"
2061
+ >Separated link</a>
1822
2062
  </li>
1823
2063
  </ul>
1824
2064
  </div>
@@ -1909,31 +2149,46 @@ When a list item includes more than one block of content, it can be difficult fo
1909
2149
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1910
2150
  aria-labelledby="data-list-flex-modifiers-2-item-1-dropdown-kebab-button"
1911
2151
  hidden
2152
+ role="menu"
1912
2153
  >
1913
- <li>
1914
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
2154
+ <li role="none">
2155
+ <a
2156
+ class="pf-v5-c-dropdown__menu-item"
2157
+ role="menuitem"
2158
+ href="#"
2159
+ >Link</a>
1915
2160
  </li>
1916
- <li>
1917
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
2161
+ <li role="none">
2162
+ <button
2163
+ class="pf-v5-c-dropdown__menu-item"
2164
+ role="menuitem"
2165
+ type="button"
2166
+ >Action</button>
1918
2167
  </li>
1919
- <li>
2168
+ <li role="none">
1920
2169
  <a
1921
2170
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
2171
+ role="menuitem"
1922
2172
  href="#"
1923
2173
  aria-disabled="true"
1924
2174
  tabindex="-1"
1925
2175
  >Disabled link</a>
1926
2176
  </li>
1927
- <li>
2177
+ <li role="none">
1928
2178
  <button
1929
2179
  class="pf-v5-c-dropdown__menu-item"
2180
+ role="menuitem"
1930
2181
  type="button"
1931
2182
  disabled
1932
2183
  >Disabled action</button>
1933
2184
  </li>
1934
2185
  <li class="pf-v5-c-divider" role="separator"></li>
1935
- <li>
1936
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
2186
+ <li role="none">
2187
+ <a
2188
+ class="pf-v5-c-dropdown__menu-item"
2189
+ role="menuitem"
2190
+ href="#"
2191
+ >Separated link</a>
1937
2192
  </li>
1938
2193
  </ul>
1939
2194
  </div>