@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/demos/Tabs/examples/Tabs.md CHANGED
@@ -199,63 +199,70 @@ section: components
199
199
  <div class="pf-v5-c-page__main-body">
200
200
  <div
201
201
  class="pf-v5-c-tabs pf-m-page-insets"
202
+ role="region"
202
203
  id="tabs-tables-and-tabs-example-tabs"
203
204
  >
204
- <ul class="pf-v5-c-tabs__list">
205
- <li class="pf-v5-c-tabs__item pf-m-current">
205
+ <ul class="pf-v5-c-tabs__list" role="tablist">
206
+ <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
206
207
  <button
207
208
  type="button"
208
209
  class="pf-v5-c-tabs__link"
210
+ role="tab"
209
211
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
210
212
  id="tabs-tables-and-tabs-example-tabs-details-link"
211
213
  >
212
214
  <span class="pf-v5-c-tabs__item-text">Details</span>
213
215
  </button>
214
216
  </li>
215
- <li class="pf-v5-c-tabs__item">
217
+ <li class="pf-v5-c-tabs__item" role="presentation">
216
218
  <button
217
219
  type="button"
218
220
  class="pf-v5-c-tabs__link"
221
+ role="tab"
219
222
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
220
223
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
221
224
  >
222
225
  <span class="pf-v5-c-tabs__item-text">YAML</span>
223
226
  </button>
224
227
  </li>
225
- <li class="pf-v5-c-tabs__item">
228
+ <li class="pf-v5-c-tabs__item" role="presentation">
226
229
  <button
227
230
  type="button"
228
231
  class="pf-v5-c-tabs__link"
232
+ role="tab"
229
233
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
230
234
  id="tabs-tables-and-tabs-example-tabs-environment-link"
231
235
  >
232
236
  <span class="pf-v5-c-tabs__item-text">Environment</span>
233
237
  </button>
234
238
  </li>
235
- <li class="pf-v5-c-tabs__item">
239
+ <li class="pf-v5-c-tabs__item" role="presentation">
236
240
  <button
237
241
  type="button"
238
242
  class="pf-v5-c-tabs__link"
243
+ role="tab"
239
244
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
240
245
  id="tabs-tables-and-tabs-example-tabs-logs-link"
241
246
  >
242
247
  <span class="pf-v5-c-tabs__item-text">Logs</span>
243
248
  </button>
244
249
  </li>
245
- <li class="pf-v5-c-tabs__item">
250
+ <li class="pf-v5-c-tabs__item" role="presentation">
246
251
  <button
247
252
  type="button"
248
253
  class="pf-v5-c-tabs__link"
254
+ role="tab"
249
255
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
250
256
  id="tabs-tables-and-tabs-example-tabs-events-link"
251
257
  >
252
258
  <span class="pf-v5-c-tabs__item-text">Events</span>
253
259
  </button>
254
260
  </li>
255
- <li class="pf-v5-c-tabs__item">
261
+ <li class="pf-v5-c-tabs__item" role="presentation">
256
262
  <button
257
263
  type="button"
258
264
  class="pf-v5-c-tabs__link"
265
+ role="tab"
259
266
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
260
267
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
261
268
  >
@@ -683,63 +690,70 @@ section: components
683
690
  <div class="pf-v5-c-page__main-body">
684
691
  <div
685
692
  class="pf-v5-c-tabs pf-m-page-insets"
693
+ role="region"
686
694
  id="tabs-tables-and-tabs-example-tabs"
687
695
  >
688
- <ul class="pf-v5-c-tabs__list">
689
- <li class="pf-v5-c-tabs__item pf-m-current">
696
+ <ul class="pf-v5-c-tabs__list" role="tablist">
697
+ <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
690
698
  <button
691
699
  type="button"
692
700
  class="pf-v5-c-tabs__link"
701
+ role="tab"
693
702
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
694
703
  id="tabs-tables-and-tabs-example-tabs-details-link"
695
704
  >
696
705
  <span class="pf-v5-c-tabs__item-text">Details</span>
697
706
  </button>
698
707
  </li>
699
- <li class="pf-v5-c-tabs__item">
708
+ <li class="pf-v5-c-tabs__item" role="presentation">
700
709
  <button
701
710
  type="button"
702
711
  class="pf-v5-c-tabs__link"
712
+ role="tab"
703
713
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
704
714
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
705
715
  >
706
716
  <span class="pf-v5-c-tabs__item-text">YAML</span>
707
717
  </button>
708
718
  </li>
709
- <li class="pf-v5-c-tabs__item">
719
+ <li class="pf-v5-c-tabs__item" role="presentation">
710
720
  <button
711
721
  type="button"
712
722
  class="pf-v5-c-tabs__link"
723
+ role="tab"
713
724
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
714
725
  id="tabs-tables-and-tabs-example-tabs-environment-link"
715
726
  >
716
727
  <span class="pf-v5-c-tabs__item-text">Environment</span>
717
728
  </button>
718
729
  </li>
719
- <li class="pf-v5-c-tabs__item">
730
+ <li class="pf-v5-c-tabs__item" role="presentation">
720
731
  <button
721
732
  type="button"
722
733
  class="pf-v5-c-tabs__link"
734
+ role="tab"
723
735
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
724
736
  id="tabs-tables-and-tabs-example-tabs-logs-link"
725
737
  >
726
738
  <span class="pf-v5-c-tabs__item-text">Logs</span>
727
739
  </button>
728
740
  </li>
729
- <li class="pf-v5-c-tabs__item">
741
+ <li class="pf-v5-c-tabs__item" role="presentation">
730
742
  <button
731
743
  type="button"
732
744
  class="pf-v5-c-tabs__link"
745
+ role="tab"
733
746
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
734
747
  id="tabs-tables-and-tabs-example-tabs-events-link"
735
748
  >
736
749
  <span class="pf-v5-c-tabs__item-text">Events</span>
737
750
  </button>
738
751
  </li>
739
- <li class="pf-v5-c-tabs__item">
752
+ <li class="pf-v5-c-tabs__item" role="presentation">
740
753
  <button
741
754
  type="button"
742
755
  class="pf-v5-c-tabs__link"
756
+ role="tab"
743
757
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
744
758
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
745
759
  >
@@ -756,23 +770,26 @@ section: components
756
770
  <div class="pf-v5-c-page__main-body">
757
771
  <div
758
772
  class="pf-v5-c-tabs pf-m-secondary pf-m-page-insets"
773
+ role="region"
759
774
  id="tabs-tables-and-tabs-example-tabs-secondary"
760
775
  >
761
- <ul class="pf-v5-c-tabs__list">
762
- <li class="pf-v5-c-tabs__item pf-m-current">
776
+ <ul class="pf-v5-c-tabs__list" role="tablist">
777
+ <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
763
778
  <button
764
779
  type="button"
765
780
  class="pf-v5-c-tabs__link"
781
+ role="tab"
766
782
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
767
783
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
768
784
  >
769
785
  <span class="pf-v5-c-tabs__item-text">Pod information</span>
770
786
  </button>
771
787
  </li>
772
- <li class="pf-v5-c-tabs__item">
788
+ <li class="pf-v5-c-tabs__item" role="presentation">
773
789
  <button
774
790
  type="button"
775
791
  class="pf-v5-c-tabs__link"
792
+ role="tab"
776
793
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
777
794
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
778
795
  >
@@ -1170,23 +1187,26 @@ section: components
1170
1187
  <div class="pf-v5-c-page__main-body">
1171
1188
  <div
1172
1189
  class="pf-v5-c-tabs pf-m-page-insets"
1190
+ role="region"
1173
1191
  id="nested-tabs-example-tabs-tabs"
1174
1192
  >
1175
- <ul class="pf-v5-c-tabs__list">
1176
- <li class="pf-v5-c-tabs__item pf-m-current">
1193
+ <ul class="pf-v5-c-tabs__list" role="tablist">
1194
+ <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
1177
1195
  <button
1178
1196
  type="button"
1179
1197
  class="pf-v5-c-tabs__link"
1198
+ role="tab"
1180
1199
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1181
1200
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
1182
1201
  >
1183
1202
  <span class="pf-v5-c-tabs__item-text">Cluster 1</span>
1184
1203
  </button>
1185
1204
  </li>
1186
- <li class="pf-v5-c-tabs__item">
1205
+ <li class="pf-v5-c-tabs__item" role="presentation">
1187
1206
  <button
1188
1207
  type="button"
1189
1208
  class="pf-v5-c-tabs__link"
1209
+ role="tab"
1190
1210
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1191
1211
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
1192
1212
  >
@@ -1218,23 +1238,29 @@ section: components
1218
1238
  <div class="pf-v5-l-flex__item">
1219
1239
  <div
1220
1240
  class="pf-v5-c-tabs pf-m-secondary"
1241
+ role="region"
1221
1242
  id="nested-tabs-example-tabs-tabs-subtabs"
1222
1243
  >
1223
- <ul class="pf-v5-c-tabs__list">
1224
- <li class="pf-v5-c-tabs__item pf-m-current">
1244
+ <ul class="pf-v5-c-tabs__list" role="tablist">
1245
+ <li
1246
+ class="pf-v5-c-tabs__item pf-m-current"
1247
+ role="presentation"
1248
+ >
1225
1249
  <button
1226
1250
  type="button"
1227
1251
  class="pf-v5-c-tabs__link"
1252
+ role="tab"
1228
1253
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1229
1254
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1230
1255
  >
1231
1256
  <span class="pf-v5-c-tabs__item-text">Cluster</span>
1232
1257
  </button>
1233
1258
  </li>
1234
- <li class="pf-v5-c-tabs__item">
1259
+ <li class="pf-v5-c-tabs__item" role="presentation">
1235
1260
  <button
1236
1261
  type="button"
1237
1262
  class="pf-v5-c-tabs__link"
1263
+ role="tab"
1238
1264
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1239
1265
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1240
1266
  >
@@ -1243,20 +1269,22 @@ section: components
1243
1269
  >Control plane</span>
1244
1270
  </button>
1245
1271
  </li>
1246
- <li class="pf-v5-c-tabs__item">
1272
+ <li class="pf-v5-c-tabs__item" role="presentation">
1247
1273
  <button
1248
1274
  type="button"
1249
1275
  class="pf-v5-c-tabs__link"
1276
+ role="tab"
1250
1277
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1251
1278
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1252
1279
  >
1253
1280
  <span class="pf-v5-c-tabs__item-text">Operators</span>
1254
1281
  </button>
1255
1282
  </li>
1256
- <li class="pf-v5-c-tabs__item">
1283
+ <li class="pf-v5-c-tabs__item" role="presentation">
1257
1284
  <button
1258
1285
  type="button"
1259
1286
  class="pf-v5-c-tabs__link"
1287
+ role="tab"
1260
1288
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1261
1289
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1262
1290
  >
@@ -1583,7 +1611,7 @@ section: components
1583
1611
  <span
1584
1612
  id="table-tabs-example-tabs-toolbar-select-checkbox-status-label"
1585
1613
  hidden
1586
- >Choose one</span>
1614
+ >Choose many</span>
1587
1615
 
1588
1616
  <button
1589
1617
  class="pf-v5-c-select__toggle"
@@ -1729,11 +1757,15 @@ section: components
1729
1757
  </button>
1730
1758
  <ul
1731
1759
  class="pf-v5-c-dropdown__menu"
1760
+ role="menu"
1732
1761
  aria-labelledby="table-tabs-example-tabs-toolbar-overflow-menu-dropdown-toggle"
1733
1762
  hidden
1734
1763
  >
1735
- <li>
1736
- <button class="pf-v5-c-dropdown__menu-item">Action 7</button>
1764
+ <li role="none">
1765
+ <button
1766
+ role="menuitem"
1767
+ class="pf-v5-c-dropdown__menu-item"
1768
+ >Action 7</button>
1737
1769
  </li>
1738
1770
  </ul>
1739
1771
  </div>
@@ -1891,11 +1923,13 @@ section: components
1891
1923
  </button>
1892
1924
  <ul
1893
1925
  class="pf-v5-c-dropdown__menu pf-m-align-right"
1926
+ role="menu"
1894
1927
  aria-labelledby="table-tabs-example-table-dropdown-kebab-1-dropdown-toggle"
1895
1928
  hidden
1896
1929
  >
1897
- <li>
1930
+ <li role="none">
1898
1931
  <button
1932
+ role="menuitem"
1899
1933
  class="pf-v5-c-dropdown__menu-item"
1900
1934
  >Action Link</button>
1901
1935
  </li>
@@ -1992,11 +2026,13 @@ section: components
1992
2026
  </button>
1993
2027
  <ul
1994
2028
  class="pf-v5-c-dropdown__menu pf-m-align-right"
2029
+ role="menu"
1995
2030
  aria-labelledby="table-tabs-example-table-dropdown-kebab-2-dropdown-toggle"
1996
2031
  hidden
1997
2032
  >
1998
- <li>
2033
+ <li role="none">
1999
2034
  <button
2035
+ role="menuitem"
2000
2036
  class="pf-v5-c-dropdown__menu-item"
2001
2037
  >Action Link</button>
2002
2038
  </li>
@@ -2093,11 +2129,13 @@ section: components
2093
2129
  </button>
2094
2130
  <ul
2095
2131
  class="pf-v5-c-dropdown__menu pf-m-align-right"
2132
+ role="menu"
2096
2133
  aria-labelledby="table-tabs-example-table-dropdown-kebab-3-dropdown-toggle"
2097
2134
  hidden
2098
2135
  >
2099
- <li>
2136
+ <li role="none">
2100
2137
  <button
2138
+ role="menuitem"
2101
2139
  class="pf-v5-c-dropdown__menu-item"
2102
2140
  >Action Link</button>
2103
2141
  </li>
@@ -2194,11 +2232,13 @@ section: components
2194
2232
  </button>
2195
2233
  <ul
2196
2234
  class="pf-v5-c-dropdown__menu pf-m-align-right"
2235
+ role="menu"
2197
2236
  aria-labelledby="table-tabs-example-table-dropdown-kebab-4-dropdown-toggle"
2198
2237
  hidden
2199
2238
  >
2200
- <li>
2239
+ <li role="none">
2201
2240
  <button
2241
+ role="menuitem"
2202
2242
  class="pf-v5-c-dropdown__menu-item"
2203
2243
  >Action Link</button>
2204
2244
  </li>
@@ -2295,11 +2335,13 @@ section: components
2295
2335
  </button>
2296
2336
  <ul
2297
2337
  class="pf-v5-c-dropdown__menu pf-m-align-right"
2338
+ role="menu"
2298
2339
  aria-labelledby="table-tabs-example-table-dropdown-kebab-5-dropdown-toggle"
2299
2340
  hidden
2300
2341
  >
2301
- <li>
2342
+ <li role="none">
2302
2343
  <button
2344
+ role="menuitem"
2303
2345
  class="pf-v5-c-dropdown__menu-item"
2304
2346
  >Action Link</button>
2305
2347
  </li>
@@ -2340,7 +2382,11 @@ section: components
2340
2382
  </div>
2341
2383
  </div>
2342
2384
  <div class="pf-v5-c-drawer__body pf-m-no-padding">
2343
- <div class="pf-v5-c-tabs pf-m-box pf-m-fill" id="-tabs">
2385
+ <div
2386
+ class="pf-v5-c-tabs pf-m-box pf-m-fill"
2387
+ role="region"
2388
+ id="-tabs"
2389
+ >
2344
2390
  <button
2345
2391
  class="pf-v5-c-tabs__scroll-button"
2346
2392
  type="button"
@@ -2348,21 +2394,26 @@ section: components
2348
2394
  >
2349
2395
  <i class="fas fa-angle-left" aria-hidden="true"></i>
2350
2396
  </button>
2351
- <ul class="pf-v5-c-tabs__list">
2352
- <li class="pf-v5-c-tabs__item pf-m-current">
2397
+ <ul class="pf-v5-c-tabs__list" role="tablist">
2398
+ <li
2399
+ class="pf-v5-c-tabs__item pf-m-current"
2400
+ role="presentation"
2401
+ >
2353
2402
  <button
2354
2403
  type="button"
2355
2404
  class="pf-v5-c-tabs__link"
2405
+ role="tab"
2356
2406
  aria-controls="-tabs-tab1-panel"
2357
2407
  id="-tabs-tab1-link"
2358
2408
  >
2359
2409
  <span class="pf-v5-c-tabs__item-text">Overview</span>
2360
2410
  </button>
2361
2411
  </li>
2362
- <li class="pf-v5-c-tabs__item">
2412
+ <li class="pf-v5-c-tabs__item" role="presentation">
2363
2413
  <button
2364
2414
  type="button"
2365
2415
  class="pf-v5-c-tabs__link"
2416
+ role="tab"
2366
2417
  aria-controls="-tabs-tab2-panel"
2367
2418
  id="-tabs-tab2-link"
2368
2419
  >
@@ -2560,23 +2611,26 @@ section: components
2560
2611
  <div class="pf-v5-l-grid__item">
2561
2612
  <div
2562
2613
  class="pf-v5-c-tabs pf-m-secondary pf-m-inset-none"
2614
+ role="region"
2563
2615
  id="modal-tabs-example-tabs"
2564
2616
  >
2565
- <ul class="pf-v5-c-tabs__list">
2566
- <li class="pf-v5-c-tabs__item pf-m-current">
2617
+ <ul class="pf-v5-c-tabs__list" role="tablist">
2618
+ <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
2567
2619
  <button
2568
2620
  type="button"
2569
2621
  class="pf-v5-c-tabs__link"
2622
+ role="tab"
2570
2623
  aria-controls="modal-tabs-example-tabs-details-panel"
2571
2624
  id="modal-tabs-example-tabs-details-link"
2572
2625
  >
2573
2626
  <span class="pf-v5-c-tabs__item-text">Details</span>
2574
2627
  </button>
2575
2628
  </li>
2576
- <li class="pf-v5-c-tabs__item">
2629
+ <li class="pf-v5-c-tabs__item" role="presentation">
2577
2630
  <button
2578
2631
  type="button"
2579
2632
  class="pf-v5-c-tabs__link"
2633
+ role="tab"
2580
2634
  aria-controls="modal-tabs-example-tabs-documentation-panel"
2581
2635
  id="modal-tabs-example-tabs-documentation-link"
2582
2636
  >
@@ -3052,43 +3106,48 @@ section: components
3052
3106
  <div class="pf-v5-c-page__main-body">
3053
3107
  <div
3054
3108
  class="pf-v5-c-tabs pf-m-page-insets"
3109
+ role="region"
3055
3110
  id="gray-tabs-example-tabs-tabs"
3056
3111
  >
3057
- <ul class="pf-v5-c-tabs__list">
3058
- <li class="pf-v5-c-tabs__item">
3112
+ <ul class="pf-v5-c-tabs__list" role="tablist">
3113
+ <li class="pf-v5-c-tabs__item" role="presentation">
3059
3114
  <button
3060
3115
  type="button"
3061
3116
  class="pf-v5-c-tabs__link"
3117
+ role="tab"
3062
3118
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3063
3119
  id="gray-tabs-example-tabs-tabs-new-link"
3064
3120
  >
3065
3121
  <span class="pf-v5-c-tabs__item-text">What's new</span>
3066
3122
  </button>
3067
3123
  </li>
3068
- <li class="pf-v5-c-tabs__item pf-m-current">
3124
+ <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
3069
3125
  <button
3070
3126
  type="button"
3071
3127
  class="pf-v5-c-tabs__link"
3128
+ role="tab"
3072
3129
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3073
3130
  id="gray-tabs-example-tabs-tabs-get-started-link"
3074
3131
  >
3075
3132
  <span class="pf-v5-c-tabs__item-text">Get started</span>
3076
3133
  </button>
3077
3134
  </li>
3078
- <li class="pf-v5-c-tabs__item">
3135
+ <li class="pf-v5-c-tabs__item" role="presentation">
3079
3136
  <button
3080
3137
  type="button"
3081
3138
  class="pf-v5-c-tabs__link"
3139
+ role="tab"
3082
3140
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3083
3141
  id="gray-tabs-example-tabs-tabs-knowledge-link"
3084
3142
  >
3085
3143
  <span class="pf-v5-c-tabs__item-text">Knowledge</span>
3086
3144
  </button>
3087
3145
  </li>
3088
- <li class="pf-v5-c-tabs__item">
3146
+ <li class="pf-v5-c-tabs__item" role="presentation">
3089
3147
  <button
3090
3148
  type="button"
3091
3149
  class="pf-v5-c-tabs__link"
3150
+ role="tab"
3092
3151
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3093
3152
  id="gray-tabs-example-tabs-tabs-support-link"
3094
3153
  >
@@ -3128,23 +3187,29 @@ section: components
3128
3187
  <div class="pf-v5-l-grid__item">
3129
3188
  <div
3130
3189
  class="pf-v5-c-tabs pf-m-secondary pf-m-inset-none"
3190
+ role="region"
3131
3191
  id="gray-tabs-example-tabs-subtabs"
3132
3192
  >
3133
- <ul class="pf-v5-c-tabs__list">
3134
- <li class="pf-v5-c-tabs__item pf-m-current">
3193
+ <ul class="pf-v5-c-tabs__list" role="tablist">
3194
+ <li
3195
+ class="pf-v5-c-tabs__item pf-m-current"
3196
+ role="presentation"
3197
+ >
3135
3198
  <button
3136
3199
  type="button"
3137
3200
  class="pf-v5-c-tabs__link"
3201
+ role="tab"
3138
3202
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3139
3203
  id="gray-tabs-example-tabs-subtabs-x86-link"
3140
3204
  >
3141
3205
  <span class="pf-v5-c-tabs__item-text">x86 architecture</span>
3142
3206
  </button>
3143
3207
  </li>
3144
- <li class="pf-v5-c-tabs__item">
3208
+ <li class="pf-v5-c-tabs__item" role="presentation">
3145
3209
  <button
3146
3210
  type="button"
3147
3211
  class="pf-v5-c-tabs__link"
3212
+ role="tab"
3148
3213
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3149
3214
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3150
3215
  >