@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/FormControl/examples/FormControl.md CHANGED
@@ -177,6 +177,7 @@ cssPrefix: pf-v5-c-form-control
177
177
  <option value="Mrs">Mrs</option>
178
178
  <option value="Ms">Ms</option>
179
179
  <option value="Dr">Dr</option>
180
+ <option value="Dr" disabled>Disabled option</option>
180
181
  <option value="Other">Other</option>
181
182
  </select>
182
183
  <span class="pf-v5-c-form-control__utilities">
@@ -221,7 +222,7 @@ cssPrefix: pf-v5-c-form-control
221
222
  </optgroup>
222
223
  <optgroup label="Group 2">
223
224
  <option value="Option 3">The third option</option>
224
- <option value="Option 4">The fourth option</option>
225
+ <option value="Option 4" disabled>The fourth option (disabled)</option>
225
226
  </optgroup>
226
227
  </select>
227
228
  <span class="pf-v5-c-form-control__utilities">
package/docs/components/Hint/examples/Hint.md CHANGED
@@ -23,31 +23,42 @@ cssPrefix: pf-v5-c-hint
23
23
  class="pf-v5-c-dropdown__menu"
24
24
  aria-labelledby="hint-with-title-dropdown-kebab-button"
25
25
  hidden
26
+ role="menu"
26
27
  >
27
- <li>
28
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
28
+ <li role="none">
29
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
29
30
  </li>
30
- <li>
31
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
31
+ <li role="none">
32
+ <button
33
+ class="pf-v5-c-dropdown__menu-item"
34
+ role="menuitem"
35
+ type="button"
36
+ >Action</button>
32
37
  </li>
33
- <li>
38
+ <li role="none">
34
39
  <a
35
40
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
41
+ role="menuitem"
36
42
  href="#"
37
43
  aria-disabled="true"
38
44
  tabindex="-1"
39
45
  >Disabled link</a>
40
46
  </li>
41
- <li>
47
+ <li role="none">
42
48
  <button
43
49
  class="pf-v5-c-dropdown__menu-item"
50
+ role="menuitem"
44
51
  type="button"
45
52
  disabled
46
53
  >Disabled action</button>
47
54
  </li>
48
55
  <li class="pf-v5-c-divider" role="separator"></li>
49
- <li>
50
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
56
+ <li role="none">
57
+ <a
58
+ class="pf-v5-c-dropdown__menu-item"
59
+ role="menuitem"
60
+ href="#"
61
+ >Separated link</a>
51
62
  </li>
52
63
  </ul>
53
64
  </div>
@@ -76,31 +87,42 @@ cssPrefix: pf-v5-c-hint
76
87
  class="pf-v5-c-dropdown__menu"
77
88
  aria-labelledby="hint-with-title-with-footer-dropdown-kebab-button"
78
89
  hidden
90
+ role="menu"
79
91
  >
80
- <li>
81
- <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>
82
94
  </li>
83
- <li>
84
- <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>
85
101
  </li>
86
- <li>
102
+ <li role="none">
87
103
  <a
88
104
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
105
+ role="menuitem"
89
106
  href="#"
90
107
  aria-disabled="true"
91
108
  tabindex="-1"
92
109
  >Disabled link</a>
93
110
  </li>
94
- <li>
111
+ <li role="none">
95
112
  <button
96
113
  class="pf-v5-c-dropdown__menu-item"
114
+ role="menuitem"
97
115
  type="button"
98
116
  disabled
99
117
  >Disabled action</button>
100
118
  </li>
101
119
  <li class="pf-v5-c-divider" role="separator"></li>
102
- <li>
103
- <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>
104
126
  </li>
105
127
  </ul>
106
128
  </div>
@@ -147,31 +169,42 @@ cssPrefix: pf-v5-c-hint
147
169
  class="pf-v5-c-dropdown__menu"
148
170
  aria-labelledby="hint-with-no-title-dropdown-kebab-button"
149
171
  hidden
172
+ role="menu"
150
173
  >
151
- <li>
152
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
174
+ <li role="none">
175
+ <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
153
176
  </li>
154
- <li>
155
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
177
+ <li role="none">
178
+ <button
179
+ class="pf-v5-c-dropdown__menu-item"
180
+ role="menuitem"
181
+ type="button"
182
+ >Action</button>
156
183
  </li>
157
- <li>
184
+ <li role="none">
158
185
  <a
159
186
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
187
+ role="menuitem"
160
188
  href="#"
161
189
  aria-disabled="true"
162
190
  tabindex="-1"
163
191
  >Disabled link</a>
164
192
  </li>
165
- <li>
193
+ <li role="none">
166
194
  <button
167
195
  class="pf-v5-c-dropdown__menu-item"
196
+ role="menuitem"
168
197
  type="button"
169
198
  disabled
170
199
  >Disabled action</button>
171
200
  </li>
172
201
  <li class="pf-v5-c-divider" role="separator"></li>
173
- <li>
174
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
202
+ <li role="none">
203
+ <a
204
+ class="pf-v5-c-dropdown__menu-item"
205
+ role="menuitem"
206
+ href="#"
207
+ >Separated link</a>
175
208
  </li>
176
209
  </ul>
177
210
  </div>
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -620,31 +620,46 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
620
620
  class="pf-v5-c-dropdown__menu pf-m-align-right"
621
621
  aria-labelledby="inline-edit-table-row-example-row-1--dropdown-kebab-button"
622
622
  hidden
623
+ role="menu"
623
624
  >
624
- <li>
625
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
625
+ <li role="none">
626
+ <a
627
+ class="pf-v5-c-dropdown__menu-item"
628
+ role="menuitem"
629
+ href="#"
630
+ >Link</a>
626
631
  </li>
627
- <li>
628
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
632
+ <li role="none">
633
+ <button
634
+ class="pf-v5-c-dropdown__menu-item"
635
+ role="menuitem"
636
+ type="button"
637
+ >Action</button>
629
638
  </li>
630
- <li>
639
+ <li role="none">
631
640
  <a
632
641
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
642
+ role="menuitem"
633
643
  href="#"
634
644
  aria-disabled="true"
635
645
  tabindex="-1"
636
646
  >Disabled link</a>
637
647
  </li>
638
- <li>
648
+ <li role="none">
639
649
  <button
640
650
  class="pf-v5-c-dropdown__menu-item"
651
+ role="menuitem"
641
652
  type="button"
642
653
  disabled
643
654
  >Disabled action</button>
644
655
  </li>
645
656
  <li class="pf-v5-c-divider" role="separator"></li>
646
- <li>
647
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
657
+ <li role="none">
658
+ <a
659
+ class="pf-v5-c-dropdown__menu-item"
660
+ role="menuitem"
661
+ href="#"
662
+ >Separated link</a>
648
663
  </li>
649
664
  </ul>
650
665
  </div>
@@ -829,31 +844,46 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
829
844
  class="pf-v5-c-dropdown__menu pf-m-align-right"
830
845
  aria-labelledby="inline-edit-table-row-example-row-2--dropdown-kebab-button"
831
846
  hidden
847
+ role="menu"
832
848
  >
833
- <li>
834
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
849
+ <li role="none">
850
+ <a
851
+ class="pf-v5-c-dropdown__menu-item"
852
+ role="menuitem"
853
+ href="#"
854
+ >Link</a>
835
855
  </li>
836
- <li>
837
- <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
856
+ <li role="none">
857
+ <button
858
+ class="pf-v5-c-dropdown__menu-item"
859
+ role="menuitem"
860
+ type="button"
861
+ >Action</button>
838
862
  </li>
839
- <li>
863
+ <li role="none">
840
864
  <a
841
865
  class="pf-v5-c-dropdown__menu-item pf-m-disabled"
866
+ role="menuitem"
842
867
  href="#"
843
868
  aria-disabled="true"
844
869
  tabindex="-1"
845
870
  >Disabled link</a>
846
871
  </li>
847
- <li>
872
+ <li role="none">
848
873
  <button
849
874
  class="pf-v5-c-dropdown__menu-item"
875
+ role="menuitem"
850
876
  type="button"
851
877
  disabled
852
878
  >Disabled action</button>
853
879
  </li>
854
880
  <li class="pf-v5-c-divider" role="separator"></li>
855
- <li>
856
- <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
881
+ <li role="none">
882
+ <a
883
+ class="pf-v5-c-dropdown__menu-item"
884
+ role="menuitem"
885
+ href="#"
886
+ >Separated link</a>
857
887
  </li>
858
888
  </ul>
859
889
  </div>
package/docs/components/LogViewer/examples/LogViewer.md CHANGED
@@ -350,8 +350,9 @@ cssPrefix: pf-v5-c-log-viewer
350
350
  class="pf-v5-c-dropdown__menu pf-m-align-right"
351
351
  aria-labelledby="log-viewer-basic-example-settings-dropdown-button"
352
352
  hidden
353
+ role="menu"
353
354
  >
354
- <li>
355
+ <li role="menuitem">
355
356
  <div class="pf-v5-c-dropdown__menu-item">
356
357
  <label
357
358
  class="pf-v5-c-check"
@@ -368,7 +369,7 @@ cssPrefix: pf-v5-c-log-viewer
368
369
  </label>
369
370
  </div>
370
371
  </li>
371
- <li>
372
+ <li role="menuitem">
372
373
  <div class="pf-v5-c-dropdown__menu-item">
373
374
  <label
374
375
  class="pf-v5-c-check"
@@ -385,7 +386,7 @@ cssPrefix: pf-v5-c-log-viewer
385
386
  </label>
386
387
  </div>
387
388
  </li>
388
- <li>
389
+ <li role="menuitem">
389
390
  <div class="pf-v5-c-dropdown__menu-item">
390
391
  <label
391
392
  class="pf-v5-c-check"
@@ -910,8 +911,9 @@ cssPrefix: pf-v5-c-log-viewer
910
911
  class="pf-v5-c-dropdown__menu pf-m-align-right"
911
912
  aria-labelledby="log-viewer-line-number-example-settings-dropdown-button"
912
913
  hidden
914
+ role="menu"
913
915
  >
914
- <li>
916
+ <li role="menuitem">
915
917
  <div class="pf-v5-c-dropdown__menu-item">
916
918
  <label
917
919
  class="pf-v5-c-check"
@@ -928,7 +930,7 @@ cssPrefix: pf-v5-c-log-viewer
928
930
  </label>
929
931
  </div>
930
932
  </li>
931
- <li>
933
+ <li role="menuitem">
932
934
  <div class="pf-v5-c-dropdown__menu-item">
933
935
  <label
934
936
  class="pf-v5-c-check"
@@ -945,7 +947,7 @@ cssPrefix: pf-v5-c-log-viewer
945
947
  </label>
946
948
  </div>
947
949
  </li>
948
- <li>
950
+ <li role="menuitem">
949
951
  <div class="pf-v5-c-dropdown__menu-item">
950
952
  <label
951
953
  class="pf-v5-c-check"
@@ -1470,8 +1472,9 @@ cssPrefix: pf-v5-c-log-viewer
1470
1472
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1471
1473
  aria-labelledby="log-viewer-line-number-chars-example-settings-dropdown-button"
1472
1474
  hidden
1475
+ role="menu"
1473
1476
  >
1474
- <li>
1477
+ <li role="menuitem">
1475
1478
  <div class="pf-v5-c-dropdown__menu-item">
1476
1479
  <label
1477
1480
  class="pf-v5-c-check"
@@ -1488,7 +1491,7 @@ cssPrefix: pf-v5-c-log-viewer
1488
1491
  </label>
1489
1492
  </div>
1490
1493
  </li>
1491
- <li>
1494
+ <li role="menuitem">
1492
1495
  <div class="pf-v5-c-dropdown__menu-item">
1493
1496
  <label
1494
1497
  class="pf-v5-c-check"
@@ -1505,7 +1508,7 @@ cssPrefix: pf-v5-c-log-viewer
1505
1508
  </label>
1506
1509
  </div>
1507
1510
  </li>
1508
- <li>
1511
+ <li role="menuitem">
1509
1512
  <div class="pf-v5-c-dropdown__menu-item">
1510
1513
  <label
1511
1514
  class="pf-v5-c-check"
@@ -2030,8 +2033,9 @@ cssPrefix: pf-v5-c-log-viewer
2030
2033
  class="pf-v5-c-dropdown__menu pf-m-align-right"
2031
2034
  aria-labelledby="log-viewer-text-wrap-example-settings-dropdown-button"
2032
2035
  hidden
2036
+ role="menu"
2033
2037
  >
2034
- <li>
2038
+ <li role="menuitem">
2035
2039
  <div class="pf-v5-c-dropdown__menu-item">
2036
2040
  <label
2037
2041
  class="pf-v5-c-check"
@@ -2048,7 +2052,7 @@ cssPrefix: pf-v5-c-log-viewer
2048
2052
  </label>
2049
2053
  </div>
2050
2054
  </li>
2051
- <li>
2055
+ <li role="menuitem">
2052
2056
  <div class="pf-v5-c-dropdown__menu-item">
2053
2057
  <label
2054
2058
  class="pf-v5-c-check"
@@ -2065,7 +2069,7 @@ cssPrefix: pf-v5-c-log-viewer
2065
2069
  </label>
2066
2070
  </div>
2067
2071
  </li>
2068
- <li>
2072
+ <li role="menuitem">
2069
2073
  <div class="pf-v5-c-dropdown__menu-item">
2070
2074
  <label
2071
2075
  class="pf-v5-c-check"
@@ -2590,8 +2594,9 @@ cssPrefix: pf-v5-c-log-viewer
2590
2594
  class="pf-v5-c-dropdown__menu pf-m-align-right"
2591
2595
  aria-labelledby="log-viewer-text-nowrap-example-settings-dropdown-button"
2592
2596
  hidden
2597
+ role="menu"
2593
2598
  >
2594
- <li>
2599
+ <li role="menuitem">
2595
2600
  <div class="pf-v5-c-dropdown__menu-item">
2596
2601
  <label
2597
2602
  class="pf-v5-c-check"
@@ -2608,7 +2613,7 @@ cssPrefix: pf-v5-c-log-viewer
2608
2613
  </label>
2609
2614
  </div>
2610
2615
  </li>
2611
- <li>
2616
+ <li role="menuitem">
2612
2617
  <div class="pf-v5-c-dropdown__menu-item">
2613
2618
  <label
2614
2619
  class="pf-v5-c-check"
@@ -2625,7 +2630,7 @@ cssPrefix: pf-v5-c-log-viewer
2625
2630
  </label>
2626
2631
  </div>
2627
2632
  </li>
2628
- <li>
2633
+ <li role="menuitem">
2629
2634
  <div class="pf-v5-c-dropdown__menu-item">
2630
2635
  <label
2631
2636
  class="pf-v5-c-check"
@@ -3177,8 +3182,9 @@ cssPrefix: pf-v5-c-log-viewer
3177
3182
  class="pf-v5-c-dropdown__menu pf-m-align-right"
3178
3183
  aria-labelledby="log-viewer-search-results-example-settings-dropdown-button"
3179
3184
  hidden
3185
+ role="menu"
3180
3186
  >
3181
- <li>
3187
+ <li role="menuitem">
3182
3188
  <div class="pf-v5-c-dropdown__menu-item">
3183
3189
  <label
3184
3190
  class="pf-v5-c-check"
@@ -3195,7 +3201,7 @@ cssPrefix: pf-v5-c-log-viewer
3195
3201
  </label>
3196
3202
  </div>
3197
3203
  </li>
3198
- <li>
3204
+ <li role="menuitem">
3199
3205
  <div class="pf-v5-c-dropdown__menu-item">
3200
3206
  <label
3201
3207
  class="pf-v5-c-check"
@@ -3212,7 +3218,7 @@ cssPrefix: pf-v5-c-log-viewer
3212
3218
  </label>
3213
3219
  </div>
3214
3220
  </li>
3215
- <li>
3221
+ <li role="menuitem">
3216
3222
  <div class="pf-v5-c-dropdown__menu-item">
3217
3223
  <label
3218
3224
  class="pf-v5-c-check"
@@ -3780,8 +3786,9 @@ cssPrefix: pf-v5-c-log-viewer
3780
3786
  class="pf-v5-c-dropdown__menu pf-m-align-right"
3781
3787
  aria-labelledby="log-viewer-max-height-example-settings-dropdown-button"
3782
3788
  hidden
3789
+ role="menu"
3783
3790
  >
3784
- <li>
3791
+ <li role="menuitem">
3785
3792
  <div class="pf-v5-c-dropdown__menu-item">
3786
3793
  <label
3787
3794
  class="pf-v5-c-check"
@@ -3798,7 +3805,7 @@ cssPrefix: pf-v5-c-log-viewer
3798
3805
  </label>
3799
3806
  </div>
3800
3807
  </li>
3801
- <li>
3808
+ <li role="menuitem">
3802
3809
  <div class="pf-v5-c-dropdown__menu-item">
3803
3810
  <label
3804
3811
  class="pf-v5-c-check"
@@ -3815,7 +3822,7 @@ cssPrefix: pf-v5-c-log-viewer
3815
3822
  </label>
3816
3823
  </div>
3817
3824
  </li>
3818
- <li>
3825
+ <li role="menuitem">
3819
3826
  <div class="pf-v5-c-dropdown__menu-item">
3820
3827
  <label
3821
3828
  class="pf-v5-c-check"
@@ -4338,8 +4345,9 @@ cssPrefix: pf-v5-c-log-viewer
4338
4345
  <ul
4339
4346
  class="pf-v5-c-dropdown__menu pf-m-align-right"
4340
4347
  aria-labelledby="log-viewer-dropdowns-expanded-example-settings-dropdown-button"
4348
+ role="menu"
4341
4349
  >
4342
- <li>
4350
+ <li role="menuitem">
4343
4351
  <div class="pf-v5-c-dropdown__menu-item">
4344
4352
  <label
4345
4353
  class="pf-v5-c-check"
@@ -4356,7 +4364,7 @@ cssPrefix: pf-v5-c-log-viewer
4356
4364
  </label>
4357
4365
  </div>
4358
4366
  </li>
4359
- <li>
4367
+ <li role="menuitem">
4360
4368
  <div class="pf-v5-c-dropdown__menu-item">
4361
4369
  <label
4362
4370
  class="pf-v5-c-check"
@@ -4373,7 +4381,7 @@ cssPrefix: pf-v5-c-log-viewer
4373
4381
  </label>
4374
4382
  </div>
4375
4383
  </li>
4376
- <li>
4384
+ <li role="menuitem">
4377
4385
  <div class="pf-v5-c-dropdown__menu-item">
4378
4386
  <label
4379
4387
  class="pf-v5-c-check"
@@ -4898,8 +4906,9 @@ cssPrefix: pf-v5-c-log-viewer
4898
4906
  class="pf-v5-c-dropdown__menu pf-m-align-right"
4899
4907
  aria-labelledby="log-viewer-popover-expanded-example-settings-dropdown-button"
4900
4908
  hidden
4909
+ role="menu"
4901
4910
  >
4902
- <li>
4911
+ <li role="menuitem">
4903
4912
  <div class="pf-v5-c-dropdown__menu-item">
4904
4913
  <label
4905
4914
  class="pf-v5-c-check"
@@ -4916,7 +4925,7 @@ cssPrefix: pf-v5-c-log-viewer
4916
4925
  </label>
4917
4926
  </div>
4918
4927
  </li>
4919
- <li>
4928
+ <li role="menuitem">
4920
4929
  <div class="pf-v5-c-dropdown__menu-item">
4921
4930
  <label
4922
4931
  class="pf-v5-c-check"
@@ -4933,7 +4942,7 @@ cssPrefix: pf-v5-c-log-viewer
4933
4942
  </label>
4934
4943
  </div>
4935
4944
  </li>
4936
- <li>
4945
+ <li role="menuitem">
4937
4946
  <div class="pf-v5-c-dropdown__menu-item">
4938
4947
  <label
4939
4948
  class="pf-v5-c-check"
@@ -5518,8 +5527,9 @@ cssPrefix: pf-v5-c-log-viewer
5518
5527
  class="pf-v5-c-dropdown__menu pf-m-align-right"
5519
5528
  aria-labelledby="log-viewer-dark-example-settings-dropdown-button"
5520
5529
  hidden
5530
+ role="menu"
5521
5531
  >
5522
- <li>
5532
+ <li role="menuitem">
5523
5533
  <div class="pf-v5-c-dropdown__menu-item">
5524
5534
  <label
5525
5535
  class="pf-v5-c-check"
@@ -5536,7 +5546,7 @@ cssPrefix: pf-v5-c-log-viewer
5536
5546
  </label>
5537
5547
  </div>
5538
5548
  </li>
5539
- <li>
5549
+ <li role="menuitem">
5540
5550
  <div class="pf-v5-c-dropdown__menu-item">
5541
5551
  <label
5542
5552
  class="pf-v5-c-check"
@@ -5553,7 +5563,7 @@ cssPrefix: pf-v5-c-log-viewer
5553
5563
  </label>
5554
5564
  </div>
5555
5565
  </li>
5556
- <li>
5566
+ <li role="menuitem">
5557
5567
  <div class="pf-v5-c-dropdown__menu-item">
5558
5568
  <label
5559
5569
  class="pf-v5-c-check"
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -4795,9 +4795,14 @@ cssPrefix: pf-v5-c-menu
4795
4795
  <ul
4796
4796
  class="pf-v5-c-dropdown__menu"
4797
4797
  aria-labelledby="drilldown-with-breadcrumbs-level-3-breadcrumb-breadcrumb-dropdown-button"
4798
+ role="menu"
4798
4799
  >
4799
- <li>
4800
- <button class="pf-v5-c-dropdown__menu-item" type="button">
4800
+ <li role="none">
4801
+ <button
4802
+ class="pf-v5-c-dropdown__menu-item"
4803
+ role="menuitem"
4804
+ type="button"
4805
+ >
4801
4806
  <span class="pf-v5-c-dropdown__menu-item-icon">
4802
4807
  <i class="fas fa-angle-left" aria-hidden="true"></i>
4803
4808
  </span>Edit
@@ -5039,16 +5044,25 @@ cssPrefix: pf-v5-c-menu
5039
5044
  <ul
5040
5045
  class="pf-v5-c-dropdown__menu"
5041
5046
  aria-labelledby="drilldown-with-breadcrumbs-level-4-breadcrumb-breadcrumb-dropdown-button"
5047
+ role="menu"
5042
5048
  >
5043
- <li>
5044
- <button class="pf-v5-c-dropdown__menu-item" type="button">
5049
+ <li role="none">
5050
+ <button
5051
+ class="pf-v5-c-dropdown__menu-item"
5052
+ role="menuitem"
5053
+ type="button"
5054
+ >
5045
5055
  <span class="pf-v5-c-dropdown__menu-item-icon">
5046
5056
  <i class="fas fa-angle-left" aria-hidden="true"></i>
5047
5057
  </span>Edit
5048
5058
  </button>
5049
5059
  </li>
5050
- <li>
5051
- <button class="pf-v5-c-dropdown__menu-item" type="button">
5060
+ <li role="none">
5061
+ <button
5062
+ class="pf-v5-c-dropdown__menu-item"
5063
+ role="menuitem"
5064
+ type="button"
5065
+ >
5052
5066
  <span class="pf-v5-c-dropdown__menu-item-icon">
5053
5067
  <i class="fas fa-angle-left" aria-hidden="true"></i>
5054
5068
  </span>Deployment
@@ -6222,20 +6236,26 @@ cssPrefix: pf-v5-c-menu
6222
6236
  </a>
6223
6237
  </li>
6224
6238
  <li class="pf-v5-c-menu__list-item pf-m-loading" role="none">
6225
- <svg
6226
- class="pf-v5-c-spinner pf-m-lg"
6227
- role="progressbar"
6228
- viewBox="0 0 100 100"
6229
- aria-label="Loading items"
6230
- >
6231
- <circle
6232
- class="pf-v5-c-spinner__path"
6233
- cx="50"
6234
- cy="50"
6235
- r="45"
6236
- fill="none"
6237
- />
6238
- </svg>
6239
+ <button class="pf-v5-c-menu__item" type="button" role="menuitem">
6240
+ <span class="pf-v5-c-menu__item-main">
6241
+ <span class="pf-v5-c-menu__item-text">
6242
+ <svg
6243
+ class="pf-v5-c-spinner pf-m-lg"
6244
+ role="progressbar"
6245
+ viewBox="0 0 100 100"
6246
+ aria-label="Loading items"
6247
+ >
6248
+ <circle
6249
+ class="pf-v5-c-spinner__path"
6250
+ cx="50"
6251
+ cy="50"
6252
+ r="45"
6253
+ fill="none"
6254
+ />
6255
+ </svg>
6256
+ </span>
6257
+ </span>
6258
+ </button>
6239
6259
  </li>
6240
6260
  </ul>
6241
6261
  </div>
@@ -6601,6 +6621,7 @@ cssPrefix: pf-v5-c-menu
6601
6621
  | `aria-disabled="true"` | `.pf-v5-c-menu__item` | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. |
6602
6622
  | `tabindex="-1"` | `a.pf-v5-c-menu__item` | When the menu item uses a link element and has `aria-disabled="true"` passed in, removes it from keyboard focus. This is similar to passing `disabled` to a menu item that uses a button element. |
6603
6623
  | `aria-hidden="true"` | `.pf-v5-c-menu__item-icon`, `.pf-v5-c-menu__item-action-icon`, `.pf-v5-c-menu__item-external-icon`, `.pf-v5-c-menu__item-toggle-icon`, `.pf-v5-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
6624
+ | `aria-label="Descriptive text"` | `.pf-v5-c-menu__item-action-icon` | There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon. |
6604
6625
  | `aria-label="Not starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
6605
6626
  | `aria-label="Starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
6606
6627
 
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -974,7 +974,7 @@ cssPrefix: pf-v5-c-menu-toggle
974
974
  | -- | -- | -- |
975
975
  | `aria-expanded="true"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
976
976
  | `aria-expanded="false"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
977
- | `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
977
+ | `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
978
978
  | `disabled` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
979
979
 
980
980
  ### Usage