@patternfly/patternfly 6.5.0-prerelease.3 → 6.5.0-prerelease.30

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 (246) hide show
  1. package/README.md +1 -1
  2. package/assets/images/RHAiExperienceIcon.svg +27 -0
  3. package/assets/images/RHAutomationsLogo.svg +96 -0
  4. package/assets/images/RHServerStackIcon.svg +16 -0
  5. package/assets/images/compass--hero-bg.png +0 -0
  6. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  8. package/assets/images/compass--wallpaper-dark.png +0 -0
  9. package/assets/images/compass--wallpaper-light.png +0 -0
  10. package/base/normalize.scss +7 -0
  11. package/base/patternfly-common.css +46 -0
  12. package/base/patternfly-common.scss +56 -0
  13. package/base/patternfly-variables.css +42 -0
  14. package/base/tokens/tokens-local.scss +66 -0
  15. package/components/Accordion/accordion.scss +0 -1
  16. package/components/ActionList/action-list.css +2 -0
  17. package/components/ActionList/action-list.scss +2 -0
  18. package/components/Button/button.css +34 -4
  19. package/components/Button/button.scss +40 -4
  20. package/components/Card/card.css +12 -0
  21. package/components/Card/card.scss +15 -1
  22. package/components/Compass/compass.css +306 -0
  23. package/components/Compass/compass.scss +337 -0
  24. package/components/DataList/data-list.css +5 -1
  25. package/components/DataList/data-list.scss +6 -1
  26. package/components/Drawer/drawer.css +43 -3
  27. package/components/Drawer/drawer.scss +52 -4
  28. package/components/ExpandableSection/expandable-section.css +3 -0
  29. package/components/ExpandableSection/expandable-section.scss +3 -0
  30. package/components/Hero/hero.css +74 -0
  31. package/components/Hero/hero.scss +86 -0
  32. package/components/MenuToggle/menu-toggle.css +4 -0
  33. package/components/MenuToggle/menu-toggle.scss +5 -0
  34. package/components/Table/table.css +3 -0
  35. package/components/Table/table.scss +5 -0
  36. package/components/Tabs/tabs.css +16 -1
  37. package/components/Tabs/tabs.scss +21 -1
  38. package/components/_index.css +578 -84
  39. package/components/_index.scss +3 -1
  40. package/docs/components/Avatar/examples/Avatar.md +4 -4
  41. package/docs/components/Brand/examples/Brand.md +2 -2
  42. package/docs/components/Button/examples/Button.md +116 -0
  43. package/docs/components/Card/examples/Card.md +154 -0
  44. package/docs/components/Compass/examples/Compass.css +11 -0
  45. package/docs/components/Compass/examples/Compass.md +91 -0
  46. package/docs/components/DataList/examples/DataList.md +184 -188
  47. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  48. package/docs/components/Divider/examples/Divider.md +2 -2
  49. package/docs/components/Drawer/examples/Drawer.md +83 -17
  50. package/docs/components/Hero/examples/Hero.md +25 -0
  51. package/docs/components/Icon/examples/Icon.md +1 -1
  52. package/docs/components/InputGroup/examples/InputGroup.md +1 -1
  53. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  54. package/docs/components/Masthead/examples/masthead.md +1 -1
  55. package/docs/components/Menu/examples/Menu.md +2 -2
  56. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  57. package/docs/components/Page/examples/Page.md +2 -2
  58. package/docs/components/Pagination/examples/Pagination.md +3 -3
  59. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  60. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  61. package/docs/components/Table/examples/Table.md +91 -3
  62. package/docs/components/Tabs/examples/Tabs.md +998 -83
  63. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  64. package/docs/components/Wizard/examples/Wizard.md +15 -15
  65. package/docs/demos/Card/examples/Card.md +14 -2
  66. package/docs/demos/Compass/examples/Compass.md +6246 -0
  67. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  68. package/docs/demos/DescriptionList/examples/DescriptionList.md +42 -35
  69. package/docs/demos/Drawer/examples/Drawer.md +42 -35
  70. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +143 -165
  71. package/docs/demos/Tabs/examples/Tabs.md +72 -9
  72. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  73. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  74. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  75. package/docs/layouts/Flex/examples/Flex.css +3 -3
  76. package/docs/layouts/Flex/examples/Flex.md +3 -2
  77. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  78. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  79. package/docs/layouts/Grid/examples/Grid.css +1 -1
  80. package/docs/layouts/Grid/examples/Grid.md +6 -5
  81. package/docs/layouts/Level/examples/Level.css +3 -3
  82. package/docs/layouts/Level/examples/Level.md +2 -1
  83. package/docs/layouts/Split/examples/Split.css +1 -1
  84. package/docs/layouts/Split/examples/Split.md +2 -1
  85. package/docs/layouts/Stack/examples/Stack.css +3 -3
  86. package/docs/layouts/Stack/examples/Stack.md +2 -1
  87. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  88. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  89. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  90. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  91. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  92. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  93. package/docs/utilities/Display/examples/Display.css +1 -1
  94. package/docs/utilities/Display/examples/Display.md +3 -2
  95. package/docs/utilities/Flex/examples/Flex.css +7 -7
  96. package/docs/utilities/Flex/examples/Flex.md +3 -2
  97. package/docs/utilities/Float/examples/Float.css +2 -2
  98. package/docs/utilities/Float/examples/Float.md +3 -2
  99. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  100. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  101. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  102. package/docs/utilities/Text/examples/Text.md +5 -4
  103. package/icons/PfIcons/add-circle-o.svg +4 -0
  104. package/icons/PfIcons/ansible-tower.svg +4 -0
  105. package/icons/PfIcons/applications.svg +4 -0
  106. package/icons/PfIcons/arrow.svg +4 -0
  107. package/icons/PfIcons/asleep.svg +4 -0
  108. package/icons/PfIcons/attention-bell.svg +4 -0
  109. package/icons/PfIcons/automation.svg +4 -0
  110. package/icons/PfIcons/bell.svg +4 -0
  111. package/icons/PfIcons/blueprint.svg +4 -0
  112. package/icons/PfIcons/build.svg +4 -0
  113. package/icons/PfIcons/builder-image.svg +4 -0
  114. package/icons/PfIcons/bundle.svg +4 -0
  115. package/icons/PfIcons/catalog.svg +4 -0
  116. package/icons/PfIcons/chat.svg +4 -0
  117. package/icons/PfIcons/close.svg +4 -0
  118. package/icons/PfIcons/cloud-security.svg +4 -0
  119. package/icons/PfIcons/cloud-tenant.svg +4 -0
  120. package/icons/PfIcons/cluster.svg +4 -0
  121. package/icons/PfIcons/connected.svg +4 -0
  122. package/icons/PfIcons/container-node.svg +4 -0
  123. package/icons/PfIcons/cpu.svg +4 -0
  124. package/icons/PfIcons/critical-risk.svg +4 -0
  125. package/icons/PfIcons/data-processor.svg +4 -0
  126. package/icons/PfIcons/data-sink.svg +4 -0
  127. package/icons/PfIcons/data-source.svg +4 -0
  128. package/icons/PfIcons/degraded.svg +4 -0
  129. package/icons/PfIcons/disconnected.svg +4 -0
  130. package/icons/PfIcons/domain.svg +4 -0
  131. package/icons/PfIcons/edit.svg +4 -0
  132. package/icons/PfIcons/enhancement.svg +4 -0
  133. package/icons/PfIcons/enterprise.svg +4 -0
  134. package/icons/PfIcons/equalizer.svg +4 -0
  135. package/icons/PfIcons/error-circle-o.svg +4 -0
  136. package/icons/PfIcons/export.svg +4 -0
  137. package/icons/PfIcons/filter.svg +4 -0
  138. package/icons/PfIcons/flavor.svg +4 -0
  139. package/icons/PfIcons/folder-close.svg +4 -0
  140. package/icons/PfIcons/folder-open.svg +4 -0
  141. package/icons/PfIcons/globe-route.svg +4 -0
  142. package/icons/PfIcons/help.svg +4 -0
  143. package/icons/PfIcons/history.svg +4 -0
  144. package/icons/PfIcons/home.svg +4 -0
  145. package/icons/PfIcons/import.svg +4 -0
  146. package/icons/PfIcons/in-progress.svg +4 -0
  147. package/icons/PfIcons/info.svg +4 -0
  148. package/icons/PfIcons/infrastructure.svg +4 -0
  149. package/icons/PfIcons/integration.svg +4 -0
  150. package/icons/PfIcons/key.svg +4 -0
  151. package/icons/PfIcons/locked.svg +4 -0
  152. package/icons/PfIcons/maintenance.svg +4 -0
  153. package/icons/PfIcons/memory.svg +4 -0
  154. package/icons/PfIcons/messages.svg +4 -0
  155. package/icons/PfIcons/middleware.svg +4 -0
  156. package/icons/PfIcons/migration.svg +4 -0
  157. package/icons/PfIcons/module.svg +4 -0
  158. package/icons/PfIcons/monitoring.svg +4 -0
  159. package/icons/PfIcons/multicluster.svg +4 -0
  160. package/icons/PfIcons/namespaces.svg +4 -0
  161. package/icons/PfIcons/network.svg +4 -0
  162. package/icons/PfIcons/new-process.svg +4 -0
  163. package/icons/PfIcons/not-started.svg +4 -0
  164. package/icons/PfIcons/off.svg +4 -0
  165. package/icons/PfIcons/ok.svg +4 -0
  166. package/icons/PfIcons/on-running.svg +4 -0
  167. package/icons/PfIcons/on.svg +4 -0
  168. package/icons/PfIcons/open-drawer-right.svg +4 -0
  169. package/icons/PfIcons/openshift.svg +4 -0
  170. package/icons/PfIcons/openstack.svg +4 -0
  171. package/icons/PfIcons/optimize.svg +4 -0
  172. package/icons/PfIcons/orders.svg +4 -0
  173. package/icons/PfIcons/os-image.svg +4 -0
  174. package/icons/PfIcons/package.svg +4 -0
  175. package/icons/PfIcons/panel-close.svg +4 -0
  176. package/icons/PfIcons/panel-open.svg +4 -0
  177. package/icons/PfIcons/paused.svg +4 -0
  178. package/icons/PfIcons/pending.svg +4 -0
  179. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  180. package/icons/PfIcons/pficon-history.svg +4 -0
  181. package/icons/PfIcons/pficon-network-range.svg +4 -0
  182. package/icons/PfIcons/pficon-satellite.svg +4 -0
  183. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  184. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  185. package/icons/PfIcons/pficon-template.svg +4 -0
  186. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  187. package/icons/PfIcons/plugged.svg +4 -0
  188. package/icons/PfIcons/port.svg +4 -0
  189. package/icons/PfIcons/print.svg +4 -0
  190. package/icons/PfIcons/private.svg +4 -0
  191. package/icons/PfIcons/process-automation.svg +4 -0
  192. package/icons/PfIcons/project.svg +4 -0
  193. package/icons/PfIcons/rebalance.svg +4 -0
  194. package/icons/PfIcons/rebooting.svg +4 -0
  195. package/icons/PfIcons/regions.svg +4 -0
  196. package/icons/PfIcons/registry.svg +4 -0
  197. package/icons/PfIcons/remove2.svg +4 -0
  198. package/icons/PfIcons/replicator.svg +4 -0
  199. package/icons/PfIcons/repository.svg +4 -0
  200. package/icons/PfIcons/resource-pool.svg +4 -0
  201. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  202. package/icons/PfIcons/resources-almost-full.svg +4 -0
  203. package/icons/PfIcons/resources-empty.svg +4 -0
  204. package/icons/PfIcons/resources-full.svg +4 -0
  205. package/icons/PfIcons/running.svg +4 -0
  206. package/icons/PfIcons/save.svg +4 -0
  207. package/icons/PfIcons/screen.svg +4 -0
  208. package/icons/PfIcons/security.svg +4 -0
  209. package/icons/PfIcons/server-group.svg +4 -0
  210. package/icons/PfIcons/server.svg +4 -0
  211. package/icons/PfIcons/service-catalog.svg +4 -0
  212. package/icons/PfIcons/service.svg +4 -0
  213. package/icons/PfIcons/services.svg +4 -0
  214. package/icons/PfIcons/severity-critical.svg +4 -0
  215. package/icons/PfIcons/severity-important.svg +4 -0
  216. package/icons/PfIcons/severity-minor.svg +4 -0
  217. package/icons/PfIcons/severity-moderate.svg +4 -0
  218. package/icons/PfIcons/severity-none.svg +4 -0
  219. package/icons/PfIcons/severity-undefined.svg +4 -0
  220. package/icons/PfIcons/spinner.svg +4 -0
  221. package/icons/PfIcons/spinner2.svg +4 -0
  222. package/icons/PfIcons/storage-domain.svg +4 -0
  223. package/icons/PfIcons/task.svg +4 -0
  224. package/icons/PfIcons/tenant.svg +4 -0
  225. package/icons/PfIcons/thumb-tack.svg +4 -0
  226. package/icons/PfIcons/topology.svg +4 -0
  227. package/icons/PfIcons/treeview.svg +4 -0
  228. package/icons/PfIcons/trend-down.svg +4 -0
  229. package/icons/PfIcons/trend-up.svg +4 -0
  230. package/icons/PfIcons/unknown.svg +4 -0
  231. package/icons/PfIcons/unlocked.svg +4 -0
  232. package/icons/PfIcons/unplugged.svg +4 -0
  233. package/icons/PfIcons/user.svg +4 -0
  234. package/icons/PfIcons/users.svg +4 -0
  235. package/icons/PfIcons/virtual-machine.svg +4 -0
  236. package/icons/PfIcons/volume.svg +4 -0
  237. package/icons/PfIcons/warning-triangle.svg +4 -0
  238. package/icons/PfIcons/zone.svg +4 -0
  239. package/package.json +28 -13
  240. package/patternfly-base-no-globals.css +88 -0
  241. package/patternfly-base.css +95 -0
  242. package/patternfly-no-globals.css +666 -84
  243. package/patternfly.css +673 -84
  244. package/patternfly.min.css +1 -1
  245. package/patternfly.min.css.map +1 -1
  246. package/sass-utilities/namespaces-components.scss +6 -0
@@ -9,7 +9,12 @@ cssPrefix: pf-v6-c-tabs
9
9
  ### Default tabs example
10
10
 
11
11
  ```html
12
- <div class="pf-v6-c-tabs" role="region" id="default-tabs">
12
+ <div
13
+ class="pf-v6-c-tabs"
14
+ aria-label="Default example"
15
+ role="region"
16
+ id="default-tabs"
17
+ >
13
18
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
14
19
  <button
15
20
  class="pf-v6-c-button pf-m-plain"
@@ -22,12 +27,13 @@ cssPrefix: pf-v6-c-tabs
22
27
  </span>
23
28
  </button>
24
29
  </div>
25
- <ul class="pf-v6-c-tabs__list" role="tablist">
30
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Default example">
26
31
  <li class="pf-v6-c-tabs__item" role="presentation">
27
32
  <button
28
33
  type="button"
29
34
  class="pf-v6-c-tabs__link"
30
35
  role="tab"
36
+ aria-selected="false"
31
37
  id="default-tabs-users-link"
32
38
  >
33
39
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -38,6 +44,7 @@ cssPrefix: pf-v6-c-tabs
38
44
  type="button"
39
45
  class="pf-v6-c-tabs__link"
40
46
  role="tab"
47
+ aria-selected="true"
41
48
  id="default-tabs-containers-link"
42
49
  >
43
50
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -48,6 +55,7 @@ cssPrefix: pf-v6-c-tabs
48
55
  type="button"
49
56
  class="pf-v6-c-tabs__link"
50
57
  role="tab"
58
+ aria-selected="false"
51
59
  id="default-tabs-database-link"
52
60
  >
53
61
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -60,6 +68,7 @@ cssPrefix: pf-v6-c-tabs
60
68
  class="pf-v6-c-tabs__link"
61
69
  disabled
62
70
  role="tab"
71
+ aria-selected="false"
63
72
  id="default-tabs-disabled-link"
64
73
  >
65
74
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -71,6 +80,7 @@ cssPrefix: pf-v6-c-tabs
71
80
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
72
81
  aria-disabled="true"
73
82
  role="tab"
83
+ aria-selected="false"
74
84
  id="default-tabs-aria-disabled-link"
75
85
  >
76
86
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -81,6 +91,7 @@ cssPrefix: pf-v6-c-tabs
81
91
  type="button"
82
92
  class="pf-v6-c-tabs__link"
83
93
  role="tab"
94
+ aria-selected="false"
84
95
  id="default-tabs-network-wired-link"
85
96
  >
86
97
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -118,6 +129,7 @@ cssPrefix: pf-v6-c-tabs
118
129
  ```html
119
130
  <div
120
131
  class="pf-v6-c-tabs pf-m-scrollable"
132
+ aria-label="Overflow beginning of list example"
121
133
  role="region"
122
134
  id="overflow-beginning-of-list"
123
135
  >
@@ -133,12 +145,17 @@ cssPrefix: pf-v6-c-tabs
133
145
  </span>
134
146
  </button>
135
147
  </div>
136
- <ul class="pf-v6-c-tabs__list" role="tablist">
148
+ <ul
149
+ class="pf-v6-c-tabs__list"
150
+ role="tablist"
151
+ aria-label="Overflow beginning of list example"
152
+ >
137
153
  <li class="pf-v6-c-tabs__item" role="presentation">
138
154
  <button
139
155
  type="button"
140
156
  class="pf-v6-c-tabs__link"
141
157
  role="tab"
158
+ aria-selected="false"
142
159
  id="overflow-beginning-of-list-users-link"
143
160
  >
144
161
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -149,6 +166,7 @@ cssPrefix: pf-v6-c-tabs
149
166
  type="button"
150
167
  class="pf-v6-c-tabs__link"
151
168
  role="tab"
169
+ aria-selected="true"
152
170
  id="overflow-beginning-of-list-containers-link"
153
171
  >
154
172
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -159,6 +177,7 @@ cssPrefix: pf-v6-c-tabs
159
177
  type="button"
160
178
  class="pf-v6-c-tabs__link"
161
179
  role="tab"
180
+ aria-selected="false"
162
181
  id="overflow-beginning-of-list-database-link"
163
182
  >
164
183
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -170,6 +189,7 @@ cssPrefix: pf-v6-c-tabs
170
189
  type="button"
171
190
  class="pf-v6-c-tabs__link"
172
191
  role="tab"
192
+ aria-selected="false"
173
193
  id="overflow-beginning-of-list-server-link"
174
194
  >
175
195
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -180,6 +200,7 @@ cssPrefix: pf-v6-c-tabs
180
200
  type="button"
181
201
  class="pf-v6-c-tabs__link"
182
202
  role="tab"
203
+ aria-selected="false"
183
204
  id="overflow-beginning-of-list-system-link"
184
205
  >
185
206
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -190,6 +211,7 @@ cssPrefix: pf-v6-c-tabs
190
211
  type="button"
191
212
  class="pf-v6-c-tabs__link"
192
213
  role="tab"
214
+ aria-selected="false"
193
215
  id="overflow-beginning-of-list-network-wired-link"
194
216
  >
195
217
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -200,6 +222,7 @@ cssPrefix: pf-v6-c-tabs
200
222
  type="button"
201
223
  class="pf-v6-c-tabs__link"
202
224
  role="tab"
225
+ aria-selected="false"
203
226
  id="overflow-beginning-of-list-cloud-link"
204
227
  >
205
228
  <span class="pf-v6-c-tabs__item-text">Hybrid Cloud</span>
@@ -210,6 +233,7 @@ cssPrefix: pf-v6-c-tabs
210
233
  type="button"
211
234
  class="pf-v6-c-tabs__link"
212
235
  role="tab"
236
+ aria-selected="false"
213
237
  id="overflow-beginning-of-list-automation-link"
214
238
  >
215
239
  <span class="pf-v6-c-tabs__item-text">Automation</span>
@@ -220,6 +244,7 @@ cssPrefix: pf-v6-c-tabs
220
244
  type="button"
221
245
  class="pf-v6-c-tabs__link"
222
246
  role="tab"
247
+ aria-selected="false"
223
248
  id="overflow-beginning-of-list-files-link"
224
249
  >
225
250
  <span class="pf-v6-c-tabs__item-text">Files</span>
@@ -252,13 +277,23 @@ cssPrefix: pf-v6-c-tabs
252
277
  ### Horizontal overflow example
253
278
 
254
279
  ```html
255
- <div class="pf-v6-c-tabs pf-m-overflow" role="region" id="horizontal-overflow">
256
- <ul class="pf-v6-c-tabs__list" role="tablist">
280
+ <div
281
+ class="pf-v6-c-tabs pf-m-overflow"
282
+ aria-label="Horizontal overflow example"
283
+ role="region"
284
+ id="horizontal-overflow"
285
+ >
286
+ <ul
287
+ class="pf-v6-c-tabs__list"
288
+ role="tablist"
289
+ aria-label="Horizontal overflow example"
290
+ >
257
291
  <li class="pf-v6-c-tabs__item" role="presentation">
258
292
  <button
259
293
  type="button"
260
294
  class="pf-v6-c-tabs__link"
261
295
  role="tab"
296
+ aria-selected="false"
262
297
  id="horizontal-overflow-users-link"
263
298
  >
264
299
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -269,6 +304,7 @@ cssPrefix: pf-v6-c-tabs
269
304
  type="button"
270
305
  class="pf-v6-c-tabs__link"
271
306
  role="tab"
307
+ aria-selected="true"
272
308
  id="horizontal-overflow-containers-link"
273
309
  >
274
310
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -279,6 +315,7 @@ cssPrefix: pf-v6-c-tabs
279
315
  type="button"
280
316
  class="pf-v6-c-tabs__link"
281
317
  role="tab"
318
+ aria-selected="false"
282
319
  id="horizontal-overflow-database-link"
283
320
  >
284
321
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -290,6 +327,7 @@ cssPrefix: pf-v6-c-tabs
290
327
  type="button"
291
328
  class="pf-v6-c-tabs__link"
292
329
  role="tab"
330
+ aria-selected="false"
293
331
  id="horizontal-overflow-server-link"
294
332
  >
295
333
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -300,6 +338,7 @@ cssPrefix: pf-v6-c-tabs
300
338
  type="button"
301
339
  class="pf-v6-c-tabs__link"
302
340
  role="tab"
341
+ aria-selected="false"
303
342
  id="horizontal-overflow-system-link"
304
343
  >
305
344
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -310,6 +349,7 @@ cssPrefix: pf-v6-c-tabs
310
349
  type="button"
311
350
  class="pf-v6-c-tabs__link"
312
351
  role="tab"
352
+ aria-selected="false"
313
353
  id="horizontal-overflow-network-wired-link"
314
354
  >
315
355
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -320,6 +360,7 @@ cssPrefix: pf-v6-c-tabs
320
360
  type="button"
321
361
  class="pf-v6-c-tabs__link"
322
362
  role="tab"
363
+ aria-selected="false"
323
364
  id="horizontal-overflow-more-link"
324
365
  >
325
366
  <span class="pf-v6-c-tabs__item-text">More</span>
@@ -338,15 +379,21 @@ cssPrefix: pf-v6-c-tabs
338
379
  ```html
339
380
  <div
340
381
  class="pf-v6-c-tabs pf-m-overflow"
382
+ aria-label="Horizontal overflow expanded example"
341
383
  role="region"
342
384
  id="horizontal-overflow-expanded"
343
385
  >
344
- <ul class="pf-v6-c-tabs__list" role="tablist">
386
+ <ul
387
+ class="pf-v6-c-tabs__list"
388
+ role="tablist"
389
+ aria-label="Horizontal overflow expanded example"
390
+ >
345
391
  <li class="pf-v6-c-tabs__item" role="presentation">
346
392
  <button
347
393
  type="button"
348
394
  class="pf-v6-c-tabs__link"
349
395
  role="tab"
396
+ aria-selected="false"
350
397
  id="horizontal-overflow-expanded-users-link"
351
398
  >
352
399
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -357,6 +404,7 @@ cssPrefix: pf-v6-c-tabs
357
404
  type="button"
358
405
  class="pf-v6-c-tabs__link"
359
406
  role="tab"
407
+ aria-selected="true"
360
408
  id="horizontal-overflow-expanded-containers-link"
361
409
  >
362
410
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -367,6 +415,7 @@ cssPrefix: pf-v6-c-tabs
367
415
  type="button"
368
416
  class="pf-v6-c-tabs__link"
369
417
  role="tab"
418
+ aria-selected="false"
370
419
  id="horizontal-overflow-expanded-database-link"
371
420
  >
372
421
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -378,6 +427,7 @@ cssPrefix: pf-v6-c-tabs
378
427
  type="button"
379
428
  class="pf-v6-c-tabs__link"
380
429
  role="tab"
430
+ aria-selected="false"
381
431
  id="horizontal-overflow-expanded-server-link"
382
432
  >
383
433
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -388,6 +438,7 @@ cssPrefix: pf-v6-c-tabs
388
438
  type="button"
389
439
  class="pf-v6-c-tabs__link"
390
440
  role="tab"
441
+ aria-selected="false"
391
442
  id="horizontal-overflow-expanded-system-link"
392
443
  >
393
444
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -398,6 +449,7 @@ cssPrefix: pf-v6-c-tabs
398
449
  type="button"
399
450
  class="pf-v6-c-tabs__link"
400
451
  role="tab"
452
+ aria-selected="false"
401
453
  id="horizontal-overflow-expanded-network-wired-link"
402
454
  >
403
455
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -409,6 +461,7 @@ cssPrefix: pf-v6-c-tabs
409
461
  class="pf-v6-c-tabs__link pf-m-expanded"
410
462
  aria-expanded="true"
411
463
  role="tab"
464
+ aria-selected="false"
412
465
  id="horizontal-overflow-expanded-more-link"
413
466
  >
414
467
  <span class="pf-v6-c-tabs__item-text">More</span>
@@ -427,15 +480,21 @@ cssPrefix: pf-v6-c-tabs
427
480
  ```html
428
481
  <div
429
482
  class="pf-v6-c-tabs pf-m-overflow"
483
+ aria-label="Horizontal overflow selected example"
430
484
  role="region"
431
485
  id="horizontal-overflow-selected"
432
486
  >
433
- <ul class="pf-v6-c-tabs__list" role="tablist">
487
+ <ul
488
+ class="pf-v6-c-tabs__list"
489
+ role="tablist"
490
+ aria-label="Horizontal overflow selected example"
491
+ >
434
492
  <li class="pf-v6-c-tabs__item" role="presentation">
435
493
  <button
436
494
  type="button"
437
495
  class="pf-v6-c-tabs__link"
438
496
  role="tab"
497
+ aria-selected="false"
439
498
  id="horizontal-overflow-selected-users-link"
440
499
  >
441
500
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -446,6 +505,7 @@ cssPrefix: pf-v6-c-tabs
446
505
  type="button"
447
506
  class="pf-v6-c-tabs__link"
448
507
  role="tab"
508
+ aria-selected="false"
449
509
  id="horizontal-overflow-selected-containers-link"
450
510
  >
451
511
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -456,6 +516,7 @@ cssPrefix: pf-v6-c-tabs
456
516
  type="button"
457
517
  class="pf-v6-c-tabs__link"
458
518
  role="tab"
519
+ aria-selected="false"
459
520
  id="horizontal-overflow-selected-database-link"
460
521
  >
461
522
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -467,6 +528,7 @@ cssPrefix: pf-v6-c-tabs
467
528
  type="button"
468
529
  class="pf-v6-c-tabs__link"
469
530
  role="tab"
531
+ aria-selected="false"
470
532
  id="horizontal-overflow-selected-server-link"
471
533
  >
472
534
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -477,6 +539,7 @@ cssPrefix: pf-v6-c-tabs
477
539
  type="button"
478
540
  class="pf-v6-c-tabs__link"
479
541
  role="tab"
542
+ aria-selected="false"
480
543
  id="horizontal-overflow-selected-system-link"
481
544
  >
482
545
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -487,6 +550,7 @@ cssPrefix: pf-v6-c-tabs
487
550
  type="button"
488
551
  class="pf-v6-c-tabs__link"
489
552
  role="tab"
553
+ aria-selected="false"
490
554
  id="horizontal-overflow-selected-network-wired-link"
491
555
  >
492
556
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -500,6 +564,7 @@ cssPrefix: pf-v6-c-tabs
500
564
  type="button"
501
565
  class="pf-v6-c-tabs__link"
502
566
  role="tab"
567
+ aria-selected="true"
503
568
  id="horizontal-overflow-selected-more-link"
504
569
  >
505
570
  <span class="pf-v6-c-tabs__item-text">More</span>
@@ -518,13 +583,23 @@ cssPrefix: pf-v6-c-tabs
518
583
  ### Vertical tabs example
519
584
 
520
585
  ```html
521
- <div class="pf-v6-c-tabs pf-m-vertical" role="region" id="vertical-tabs">
522
- <ul class="pf-v6-c-tabs__list" role="tablist">
586
+ <div
587
+ class="pf-v6-c-tabs pf-m-vertical"
588
+ aria-label="Vertical tabs example"
589
+ role="region"
590
+ id="vertical-tabs"
591
+ >
592
+ <ul
593
+ class="pf-v6-c-tabs__list"
594
+ role="tablist"
595
+ aria-label="Vertical tabs example"
596
+ >
523
597
  <li class="pf-v6-c-tabs__item" role="presentation">
524
598
  <button
525
599
  type="button"
526
600
  class="pf-v6-c-tabs__link"
527
601
  role="tab"
602
+ aria-selected="false"
528
603
  id="vertical-tabs-users-link"
529
604
  >
530
605
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -535,6 +610,7 @@ cssPrefix: pf-v6-c-tabs
535
610
  type="button"
536
611
  class="pf-v6-c-tabs__link"
537
612
  role="tab"
613
+ aria-selected="true"
538
614
  id="vertical-tabs-containers-link"
539
615
  >
540
616
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -545,6 +621,7 @@ cssPrefix: pf-v6-c-tabs
545
621
  type="button"
546
622
  class="pf-v6-c-tabs__link"
547
623
  role="tab"
624
+ aria-selected="false"
548
625
  id="vertical-tabs-database-link"
549
626
  >
550
627
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -557,6 +634,7 @@ cssPrefix: pf-v6-c-tabs
557
634
  class="pf-v6-c-tabs__link"
558
635
  disabled
559
636
  role="tab"
637
+ aria-selected="false"
560
638
  id="vertical-tabs-disabled-link"
561
639
  >
562
640
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -568,6 +646,7 @@ cssPrefix: pf-v6-c-tabs
568
646
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
569
647
  aria-disabled="true"
570
648
  role="tab"
649
+ aria-selected="false"
571
650
  id="vertical-tabs-aria-disabled-link"
572
651
  >
573
652
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -578,6 +657,7 @@ cssPrefix: pf-v6-c-tabs
578
657
  type="button"
579
658
  class="pf-v6-c-tabs__link"
580
659
  role="tab"
660
+ aria-selected="false"
581
661
  id="vertical-tabs-network-wired-link"
582
662
  >
583
663
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -593,6 +673,7 @@ cssPrefix: pf-v6-c-tabs
593
673
  ```html
594
674
  <div
595
675
  class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
676
+ aria-label="Vertical expandable example"
596
677
  role="region"
597
678
  id="vertical-expandable"
598
679
  >
@@ -621,12 +702,17 @@ cssPrefix: pf-v6-c-tabs
621
702
  </div>
622
703
  </div>
623
704
 
624
- <ul class="pf-v6-c-tabs__list" role="tablist">
705
+ <ul
706
+ class="pf-v6-c-tabs__list"
707
+ role="tablist"
708
+ aria-label="Vertical expandable example"
709
+ >
625
710
  <li class="pf-v6-c-tabs__item" role="presentation">
626
711
  <button
627
712
  type="button"
628
713
  class="pf-v6-c-tabs__link"
629
714
  role="tab"
715
+ aria-selected="false"
630
716
  id="vertical-expandable-users-link"
631
717
  >
632
718
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -637,6 +723,7 @@ cssPrefix: pf-v6-c-tabs
637
723
  type="button"
638
724
  class="pf-v6-c-tabs__link"
639
725
  role="tab"
726
+ aria-selected="true"
640
727
  id="vertical-expandable-containers-link"
641
728
  >
642
729
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -647,6 +734,7 @@ cssPrefix: pf-v6-c-tabs
647
734
  type="button"
648
735
  class="pf-v6-c-tabs__link"
649
736
  role="tab"
737
+ aria-selected="false"
650
738
  id="vertical-expandable-database-link"
651
739
  >
652
740
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -658,6 +746,7 @@ cssPrefix: pf-v6-c-tabs
658
746
  type="button"
659
747
  class="pf-v6-c-tabs__link"
660
748
  role="tab"
749
+ aria-selected="false"
661
750
  id="vertical-expandable-server-link"
662
751
  >
663
752
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -668,6 +757,7 @@ cssPrefix: pf-v6-c-tabs
668
757
  type="button"
669
758
  class="pf-v6-c-tabs__link"
670
759
  role="tab"
760
+ aria-selected="false"
671
761
  id="vertical-expandable-system-link"
672
762
  >
673
763
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -678,6 +768,7 @@ cssPrefix: pf-v6-c-tabs
678
768
  type="button"
679
769
  class="pf-v6-c-tabs__link"
680
770
  role="tab"
771
+ aria-selected="false"
681
772
  id="vertical-expandable-network-wired-link"
682
773
  >
683
774
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -693,6 +784,7 @@ cssPrefix: pf-v6-c-tabs
693
784
  ```html
694
785
  <div
695
786
  class="pf-v6-c-tabs pf-m-vertical pf-m-expandable pf-m-expanded"
787
+ aria-label="Vertical expanded example"
696
788
  role="region"
697
789
  id="vertical-expanded"
698
790
  >
@@ -721,12 +813,17 @@ cssPrefix: pf-v6-c-tabs
721
813
  </div>
722
814
  </div>
723
815
 
724
- <ul class="pf-v6-c-tabs__list" role="tablist">
816
+ <ul
817
+ class="pf-v6-c-tabs__list"
818
+ role="tablist"
819
+ aria-label="Vertical expanded example"
820
+ >
725
821
  <li class="pf-v6-c-tabs__item" role="presentation">
726
822
  <button
727
823
  type="button"
728
824
  class="pf-v6-c-tabs__link"
729
825
  role="tab"
826
+ aria-selected="false"
730
827
  id="vertical-expanded-users-link"
731
828
  >
732
829
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -737,6 +834,7 @@ cssPrefix: pf-v6-c-tabs
737
834
  type="button"
738
835
  class="pf-v6-c-tabs__link"
739
836
  role="tab"
837
+ aria-selected="true"
740
838
  id="vertical-expanded-containers-link"
741
839
  >
742
840
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -747,6 +845,7 @@ cssPrefix: pf-v6-c-tabs
747
845
  type="button"
748
846
  class="pf-v6-c-tabs__link"
749
847
  role="tab"
848
+ aria-selected="false"
750
849
  id="vertical-expanded-database-link"
751
850
  >
752
851
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -758,6 +857,7 @@ cssPrefix: pf-v6-c-tabs
758
857
  type="button"
759
858
  class="pf-v6-c-tabs__link"
760
859
  role="tab"
860
+ aria-selected="false"
761
861
  id="vertical-expanded-server-link"
762
862
  >
763
863
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -768,6 +868,7 @@ cssPrefix: pf-v6-c-tabs
768
868
  type="button"
769
869
  class="pf-v6-c-tabs__link"
770
870
  role="tab"
871
+ aria-selected="false"
771
872
  id="vertical-expanded-system-link"
772
873
  >
773
874
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -778,6 +879,7 @@ cssPrefix: pf-v6-c-tabs
778
879
  type="button"
779
880
  class="pf-v6-c-tabs__link"
780
881
  role="tab"
882
+ aria-selected="false"
781
883
  id="vertical-expanded-network-wired-link"
782
884
  >
783
885
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -793,6 +895,7 @@ cssPrefix: pf-v6-c-tabs
793
895
  ```html
794
896
  <div
795
897
  class="pf-v6-c-tabs pf-m-vertical pf-m-expandable pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
898
+ aria-label="Vertical expandable responsive example"
796
899
  role="region"
797
900
  id="vertical-expandable-responsive"
798
901
  >
@@ -821,12 +924,17 @@ cssPrefix: pf-v6-c-tabs
821
924
  </div>
822
925
  </div>
823
926
 
824
- <ul class="pf-v6-c-tabs__list" role="tablist">
927
+ <ul
928
+ class="pf-v6-c-tabs__list"
929
+ role="tablist"
930
+ aria-label="Vertical expandable responsive example"
931
+ >
825
932
  <li class="pf-v6-c-tabs__item" role="presentation">
826
933
  <button
827
934
  type="button"
828
935
  class="pf-v6-c-tabs__link"
829
936
  role="tab"
937
+ aria-selected="false"
830
938
  id="vertical-expandable-responsive-users-link"
831
939
  >
832
940
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -837,6 +945,7 @@ cssPrefix: pf-v6-c-tabs
837
945
  type="button"
838
946
  class="pf-v6-c-tabs__link"
839
947
  role="tab"
948
+ aria-selected="true"
840
949
  id="vertical-expandable-responsive-containers-link"
841
950
  >
842
951
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -847,6 +956,7 @@ cssPrefix: pf-v6-c-tabs
847
956
  type="button"
848
957
  class="pf-v6-c-tabs__link"
849
958
  role="tab"
959
+ aria-selected="false"
850
960
  id="vertical-expandable-responsive-database-link"
851
961
  >
852
962
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -858,6 +968,7 @@ cssPrefix: pf-v6-c-tabs
858
968
  type="button"
859
969
  class="pf-v6-c-tabs__link"
860
970
  role="tab"
971
+ aria-selected="false"
861
972
  id="vertical-expandable-responsive-server-link"
862
973
  >
863
974
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -868,6 +979,7 @@ cssPrefix: pf-v6-c-tabs
868
979
  type="button"
869
980
  class="pf-v6-c-tabs__link"
870
981
  role="tab"
982
+ aria-selected="false"
871
983
  id="vertical-expandable-responsive-system-link"
872
984
  >
873
985
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -878,6 +990,7 @@ cssPrefix: pf-v6-c-tabs
878
990
  type="button"
879
991
  class="pf-v6-c-tabs__link"
880
992
  role="tab"
993
+ aria-selected="false"
881
994
  id="vertical-expandable-responsive-network-wired-link"
882
995
  >
883
996
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -893,6 +1006,7 @@ cssPrefix: pf-v6-c-tabs
893
1006
  ```html isDeprecated
894
1007
  <div
895
1008
  class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
1009
+ aria-label="Vertical expandable deprecated example"
896
1010
  role="region"
897
1011
  id="vertical-expandable-legacy"
898
1012
  >
@@ -919,12 +1033,17 @@ cssPrefix: pf-v6-c-tabs
919
1033
  >Containers</span>
920
1034
  </div>
921
1035
 
922
- <ul class="pf-v6-c-tabs__list" role="tablist">
1036
+ <ul
1037
+ class="pf-v6-c-tabs__list"
1038
+ role="tablist"
1039
+ aria-label="Vertical expandable deprecated example"
1040
+ >
923
1041
  <li class="pf-v6-c-tabs__item" role="presentation">
924
1042
  <button
925
1043
  type="button"
926
1044
  class="pf-v6-c-tabs__link"
927
1045
  role="tab"
1046
+ aria-selected="false"
928
1047
  id="vertical-expandable-legacy-users-link"
929
1048
  >
930
1049
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -935,6 +1054,7 @@ cssPrefix: pf-v6-c-tabs
935
1054
  type="button"
936
1055
  class="pf-v6-c-tabs__link"
937
1056
  role="tab"
1057
+ aria-selected="true"
938
1058
  id="vertical-expandable-legacy-containers-link"
939
1059
  >
940
1060
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -945,6 +1065,7 @@ cssPrefix: pf-v6-c-tabs
945
1065
  type="button"
946
1066
  class="pf-v6-c-tabs__link"
947
1067
  role="tab"
1068
+ aria-selected="false"
948
1069
  id="vertical-expandable-legacy-database-link"
949
1070
  >
950
1071
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -956,6 +1077,7 @@ cssPrefix: pf-v6-c-tabs
956
1077
  type="button"
957
1078
  class="pf-v6-c-tabs__link"
958
1079
  role="tab"
1080
+ aria-selected="false"
959
1081
  id="vertical-expandable-legacy-server-link"
960
1082
  >
961
1083
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -966,6 +1088,7 @@ cssPrefix: pf-v6-c-tabs
966
1088
  type="button"
967
1089
  class="pf-v6-c-tabs__link"
968
1090
  role="tab"
1091
+ aria-selected="false"
969
1092
  id="vertical-expandable-legacy-system-link"
970
1093
  >
971
1094
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -976,6 +1099,7 @@ cssPrefix: pf-v6-c-tabs
976
1099
  type="button"
977
1100
  class="pf-v6-c-tabs__link"
978
1101
  role="tab"
1102
+ aria-selected="false"
979
1103
  id="vertical-expandable-legacy-network-wired-link"
980
1104
  >
981
1105
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -991,6 +1115,7 @@ cssPrefix: pf-v6-c-tabs
991
1115
  ```html isDeprecated
992
1116
  <div
993
1117
  class="pf-v6-c-tabs pf-m-vertical pf-m-expandable pf-m-expanded"
1118
+ aria-label="Vertical expanded deprecated example"
994
1119
  role="region"
995
1120
  id="vertical-expanded-legacy"
996
1121
  >
@@ -1017,12 +1142,17 @@ cssPrefix: pf-v6-c-tabs
1017
1142
  >Containers</span>
1018
1143
  </div>
1019
1144
 
1020
- <ul class="pf-v6-c-tabs__list" role="tablist">
1145
+ <ul
1146
+ class="pf-v6-c-tabs__list"
1147
+ role="tablist"
1148
+ aria-label="Vertical expanded deprecated example"
1149
+ >
1021
1150
  <li class="pf-v6-c-tabs__item" role="presentation">
1022
1151
  <button
1023
1152
  type="button"
1024
1153
  class="pf-v6-c-tabs__link"
1025
1154
  role="tab"
1155
+ aria-selected="false"
1026
1156
  id="vertical-expanded-legacy-users-link"
1027
1157
  >
1028
1158
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1033,6 +1163,7 @@ cssPrefix: pf-v6-c-tabs
1033
1163
  type="button"
1034
1164
  class="pf-v6-c-tabs__link"
1035
1165
  role="tab"
1166
+ aria-selected="true"
1036
1167
  id="vertical-expanded-legacy-containers-link"
1037
1168
  >
1038
1169
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1043,6 +1174,7 @@ cssPrefix: pf-v6-c-tabs
1043
1174
  type="button"
1044
1175
  class="pf-v6-c-tabs__link"
1045
1176
  role="tab"
1177
+ aria-selected="false"
1046
1178
  id="vertical-expanded-legacy-database-link"
1047
1179
  >
1048
1180
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1054,6 +1186,7 @@ cssPrefix: pf-v6-c-tabs
1054
1186
  type="button"
1055
1187
  class="pf-v6-c-tabs__link"
1056
1188
  role="tab"
1189
+ aria-selected="false"
1057
1190
  id="vertical-expanded-legacy-server-link"
1058
1191
  >
1059
1192
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1064,6 +1197,7 @@ cssPrefix: pf-v6-c-tabs
1064
1197
  type="button"
1065
1198
  class="pf-v6-c-tabs__link"
1066
1199
  role="tab"
1200
+ aria-selected="false"
1067
1201
  id="vertical-expanded-legacy-system-link"
1068
1202
  >
1069
1203
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1074,6 +1208,7 @@ cssPrefix: pf-v6-c-tabs
1074
1208
  type="button"
1075
1209
  class="pf-v6-c-tabs__link"
1076
1210
  role="tab"
1211
+ aria-selected="false"
1077
1212
  id="vertical-expanded-legacy-network-wired-link"
1078
1213
  >
1079
1214
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1089,6 +1224,7 @@ cssPrefix: pf-v6-c-tabs
1089
1224
  ```html isDeprecated
1090
1225
  <div
1091
1226
  class="pf-v6-c-tabs pf-m-vertical pf-m-expandable pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
1227
+ aria-label="Vertical expandable responsive deprecated example"
1092
1228
  role="region"
1093
1229
  id="vertical-expandable-responsive-legacy"
1094
1230
  >
@@ -1115,12 +1251,17 @@ cssPrefix: pf-v6-c-tabs
1115
1251
  >Containers</span>
1116
1252
  </div>
1117
1253
 
1118
- <ul class="pf-v6-c-tabs__list" role="tablist">
1254
+ <ul
1255
+ class="pf-v6-c-tabs__list"
1256
+ role="tablist"
1257
+ aria-label="Vertical expandable responsive deprecated example"
1258
+ >
1119
1259
  <li class="pf-v6-c-tabs__item" role="presentation">
1120
1260
  <button
1121
1261
  type="button"
1122
1262
  class="pf-v6-c-tabs__link"
1123
1263
  role="tab"
1264
+ aria-selected="false"
1124
1265
  id="vertical-expandable-responsive-legacy-users-link"
1125
1266
  >
1126
1267
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1131,6 +1272,7 @@ cssPrefix: pf-v6-c-tabs
1131
1272
  type="button"
1132
1273
  class="pf-v6-c-tabs__link"
1133
1274
  role="tab"
1275
+ aria-selected="true"
1134
1276
  id="vertical-expandable-responsive-legacy-containers-link"
1135
1277
  >
1136
1278
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1141,6 +1283,7 @@ cssPrefix: pf-v6-c-tabs
1141
1283
  type="button"
1142
1284
  class="pf-v6-c-tabs__link"
1143
1285
  role="tab"
1286
+ aria-selected="false"
1144
1287
  id="vertical-expandable-responsive-legacy-database-link"
1145
1288
  >
1146
1289
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1152,6 +1295,7 @@ cssPrefix: pf-v6-c-tabs
1152
1295
  type="button"
1153
1296
  class="pf-v6-c-tabs__link"
1154
1297
  role="tab"
1298
+ aria-selected="false"
1155
1299
  id="vertical-expandable-responsive-legacy-server-link"
1156
1300
  >
1157
1301
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1162,6 +1306,7 @@ cssPrefix: pf-v6-c-tabs
1162
1306
  type="button"
1163
1307
  class="pf-v6-c-tabs__link"
1164
1308
  role="tab"
1309
+ aria-selected="false"
1165
1310
  id="vertical-expandable-responsive-legacy-system-link"
1166
1311
  >
1167
1312
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1172,6 +1317,7 @@ cssPrefix: pf-v6-c-tabs
1172
1317
  type="button"
1173
1318
  class="pf-v6-c-tabs__link"
1174
1319
  role="tab"
1320
+ aria-selected="false"
1175
1321
  id="vertical-expandable-responsive-legacy-network-wired-link"
1176
1322
  >
1177
1323
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1187,7 +1333,12 @@ cssPrefix: pf-v6-c-tabs
1187
1333
  ### Box tabs example
1188
1334
 
1189
1335
  ```html
1190
- <div class="pf-v6-c-tabs pf-m-box" role="region" id="box-tabs">
1336
+ <div
1337
+ class="pf-v6-c-tabs pf-m-box"
1338
+ aria-label="Box example"
1339
+ role="region"
1340
+ id="box-tabs"
1341
+ >
1191
1342
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1192
1343
  <button
1193
1344
  class="pf-v6-c-button pf-m-plain"
@@ -1200,12 +1351,13 @@ cssPrefix: pf-v6-c-tabs
1200
1351
  </span>
1201
1352
  </button>
1202
1353
  </div>
1203
- <ul class="pf-v6-c-tabs__list" role="tablist">
1354
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Box example">
1204
1355
  <li class="pf-v6-c-tabs__item" role="presentation">
1205
1356
  <button
1206
1357
  type="button"
1207
1358
  class="pf-v6-c-tabs__link"
1208
1359
  role="tab"
1360
+ aria-selected="false"
1209
1361
  id="box-tabs-users-link"
1210
1362
  >
1211
1363
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1216,6 +1368,7 @@ cssPrefix: pf-v6-c-tabs
1216
1368
  type="button"
1217
1369
  class="pf-v6-c-tabs__link"
1218
1370
  role="tab"
1371
+ aria-selected="true"
1219
1372
  id="box-tabs-containers-link"
1220
1373
  >
1221
1374
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1226,6 +1379,7 @@ cssPrefix: pf-v6-c-tabs
1226
1379
  type="button"
1227
1380
  class="pf-v6-c-tabs__link"
1228
1381
  role="tab"
1382
+ aria-selected="false"
1229
1383
  id="box-tabs-database-link"
1230
1384
  >
1231
1385
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1238,6 +1392,7 @@ cssPrefix: pf-v6-c-tabs
1238
1392
  class="pf-v6-c-tabs__link"
1239
1393
  disabled
1240
1394
  role="tab"
1395
+ aria-selected="false"
1241
1396
  id="box-tabs-disabled-link"
1242
1397
  >
1243
1398
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -1249,6 +1404,7 @@ cssPrefix: pf-v6-c-tabs
1249
1404
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
1250
1405
  aria-disabled="true"
1251
1406
  role="tab"
1407
+ aria-selected="false"
1252
1408
  id="box-tabs-aria-disabled-link"
1253
1409
  >
1254
1410
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -1259,6 +1415,7 @@ cssPrefix: pf-v6-c-tabs
1259
1415
  type="button"
1260
1416
  class="pf-v6-c-tabs__link"
1261
1417
  role="tab"
1418
+ aria-selected="false"
1262
1419
  id="box-tabs-network-wired-link"
1263
1420
  >
1264
1421
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1287,6 +1444,7 @@ cssPrefix: pf-v6-c-tabs
1287
1444
  ```html
1288
1445
  <div
1289
1446
  class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
1447
+ aria-label="Box overflow example"
1290
1448
  role="region"
1291
1449
  id="box-overflow"
1292
1450
  >
@@ -1302,12 +1460,17 @@ cssPrefix: pf-v6-c-tabs
1302
1460
  </span>
1303
1461
  </button>
1304
1462
  </div>
1305
- <ul class="pf-v6-c-tabs__list" role="tablist">
1463
+ <ul
1464
+ class="pf-v6-c-tabs__list"
1465
+ role="tablist"
1466
+ aria-label="Box overflow example"
1467
+ >
1306
1468
  <li class="pf-v6-c-tabs__item" role="presentation">
1307
1469
  <button
1308
1470
  type="button"
1309
1471
  class="pf-v6-c-tabs__link"
1310
1472
  role="tab"
1473
+ aria-selected="false"
1311
1474
  id="box-overflow-users-link"
1312
1475
  >
1313
1476
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1318,6 +1481,7 @@ cssPrefix: pf-v6-c-tabs
1318
1481
  type="button"
1319
1482
  class="pf-v6-c-tabs__link"
1320
1483
  role="tab"
1484
+ aria-selected="true"
1321
1485
  id="box-overflow-containers-link"
1322
1486
  >
1323
1487
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1328,6 +1492,7 @@ cssPrefix: pf-v6-c-tabs
1328
1492
  type="button"
1329
1493
  class="pf-v6-c-tabs__link"
1330
1494
  role="tab"
1495
+ aria-selected="false"
1331
1496
  id="box-overflow-database-link"
1332
1497
  >
1333
1498
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1339,6 +1504,7 @@ cssPrefix: pf-v6-c-tabs
1339
1504
  type="button"
1340
1505
  class="pf-v6-c-tabs__link"
1341
1506
  role="tab"
1507
+ aria-selected="false"
1342
1508
  id="box-overflow-server-link"
1343
1509
  >
1344
1510
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1349,6 +1515,7 @@ cssPrefix: pf-v6-c-tabs
1349
1515
  type="button"
1350
1516
  class="pf-v6-c-tabs__link"
1351
1517
  role="tab"
1518
+ aria-selected="false"
1352
1519
  id="box-overflow-system-link"
1353
1520
  >
1354
1521
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1359,6 +1526,7 @@ cssPrefix: pf-v6-c-tabs
1359
1526
  type="button"
1360
1527
  class="pf-v6-c-tabs__link"
1361
1528
  role="tab"
1529
+ aria-selected="false"
1362
1530
  id="box-overflow-network-wired-link"
1363
1531
  >
1364
1532
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1369,6 +1537,7 @@ cssPrefix: pf-v6-c-tabs
1369
1537
  type="button"
1370
1538
  class="pf-v6-c-tabs__link"
1371
1539
  role="tab"
1540
+ aria-selected="false"
1372
1541
  id="box-overflow-cloud-link"
1373
1542
  >
1374
1543
  <span class="pf-v6-c-tabs__item-text">Hybrid Cloud</span>
@@ -1379,6 +1548,7 @@ cssPrefix: pf-v6-c-tabs
1379
1548
  type="button"
1380
1549
  class="pf-v6-c-tabs__link"
1381
1550
  role="tab"
1551
+ aria-selected="false"
1382
1552
  id="box-overflow-automation-link"
1383
1553
  >
1384
1554
  <span class="pf-v6-c-tabs__item-text">Automation</span>
@@ -1389,6 +1559,7 @@ cssPrefix: pf-v6-c-tabs
1389
1559
  type="button"
1390
1560
  class="pf-v6-c-tabs__link"
1391
1561
  role="tab"
1562
+ aria-selected="false"
1392
1563
  id="box-overflow-files-link"
1393
1564
  >
1394
1565
  <span class="pf-v6-c-tabs__item-text">Files</span>
@@ -1416,15 +1587,21 @@ cssPrefix: pf-v6-c-tabs
1416
1587
  ```html
1417
1588
  <div
1418
1589
  class="pf-v6-c-tabs pf-m-vertical pf-m-box"
1590
+ aria-label="Box vertical example"
1419
1591
  role="region"
1420
1592
  id="box-vertical"
1421
1593
  >
1422
- <ul class="pf-v6-c-tabs__list" role="tablist">
1594
+ <ul
1595
+ class="pf-v6-c-tabs__list"
1596
+ role="tablist"
1597
+ aria-label="Box vertical example"
1598
+ >
1423
1599
  <li class="pf-v6-c-tabs__item" role="presentation">
1424
1600
  <button
1425
1601
  type="button"
1426
1602
  class="pf-v6-c-tabs__link"
1427
1603
  role="tab"
1604
+ aria-selected="false"
1428
1605
  id="box-vertical-users-link"
1429
1606
  >
1430
1607
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1435,6 +1612,7 @@ cssPrefix: pf-v6-c-tabs
1435
1612
  type="button"
1436
1613
  class="pf-v6-c-tabs__link"
1437
1614
  role="tab"
1615
+ aria-selected="true"
1438
1616
  id="box-vertical-containers-link"
1439
1617
  >
1440
1618
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1445,6 +1623,7 @@ cssPrefix: pf-v6-c-tabs
1445
1623
  type="button"
1446
1624
  class="pf-v6-c-tabs__link"
1447
1625
  role="tab"
1626
+ aria-selected="false"
1448
1627
  id="box-vertical-database-link"
1449
1628
  >
1450
1629
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1457,6 +1636,7 @@ cssPrefix: pf-v6-c-tabs
1457
1636
  class="pf-v6-c-tabs__link"
1458
1637
  disabled
1459
1638
  role="tab"
1639
+ aria-selected="false"
1460
1640
  id="box-vertical-disabled-link"
1461
1641
  >
1462
1642
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -1468,6 +1648,7 @@ cssPrefix: pf-v6-c-tabs
1468
1648
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
1469
1649
  aria-disabled="true"
1470
1650
  role="tab"
1651
+ aria-selected="false"
1471
1652
  id="box-vertical-aria-disabled-link"
1472
1653
  >
1473
1654
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -1478,6 +1659,7 @@ cssPrefix: pf-v6-c-tabs
1478
1659
  type="button"
1479
1660
  class="pf-v6-c-tabs__link"
1480
1661
  role="tab"
1662
+ aria-selected="false"
1481
1663
  id="box-vertical-network-wired-link"
1482
1664
  >
1483
1665
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1493,6 +1675,7 @@ cssPrefix: pf-v6-c-tabs
1493
1675
  ```html
1494
1676
  <div
1495
1677
  class="pf-v6-c-tabs pf-m-box pf-m-secondary"
1678
+ aria-label="Box secondary variant example"
1496
1679
  role="region"
1497
1680
  id="box-tabs-secondary"
1498
1681
  >
@@ -1508,12 +1691,17 @@ cssPrefix: pf-v6-c-tabs
1508
1691
  </span>
1509
1692
  </button>
1510
1693
  </div>
1511
- <ul class="pf-v6-c-tabs__list" role="tablist">
1694
+ <ul
1695
+ class="pf-v6-c-tabs__list"
1696
+ role="tablist"
1697
+ aria-label="Box secondary variant example"
1698
+ >
1512
1699
  <li class="pf-v6-c-tabs__item" role="presentation">
1513
1700
  <button
1514
1701
  type="button"
1515
1702
  class="pf-v6-c-tabs__link"
1516
1703
  role="tab"
1704
+ aria-selected="false"
1517
1705
  id="box-tabs-secondary-users-link"
1518
1706
  >
1519
1707
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1524,6 +1712,7 @@ cssPrefix: pf-v6-c-tabs
1524
1712
  type="button"
1525
1713
  class="pf-v6-c-tabs__link"
1526
1714
  role="tab"
1715
+ aria-selected="true"
1527
1716
  id="box-tabs-secondary-containers-link"
1528
1717
  >
1529
1718
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1534,6 +1723,7 @@ cssPrefix: pf-v6-c-tabs
1534
1723
  type="button"
1535
1724
  class="pf-v6-c-tabs__link"
1536
1725
  role="tab"
1726
+ aria-selected="false"
1537
1727
  id="box-tabs-secondary-database-link"
1538
1728
  >
1539
1729
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1546,6 +1736,7 @@ cssPrefix: pf-v6-c-tabs
1546
1736
  class="pf-v6-c-tabs__link"
1547
1737
  disabled
1548
1738
  role="tab"
1739
+ aria-selected="false"
1549
1740
  id="box-tabs-secondary-disabled-link"
1550
1741
  >
1551
1742
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -1557,6 +1748,7 @@ cssPrefix: pf-v6-c-tabs
1557
1748
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
1558
1749
  aria-disabled="true"
1559
1750
  role="tab"
1751
+ aria-selected="false"
1560
1752
  id="box-tabs-secondary-aria-disabled-link"
1561
1753
  >
1562
1754
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -1567,6 +1759,7 @@ cssPrefix: pf-v6-c-tabs
1567
1759
  type="button"
1568
1760
  class="pf-v6-c-tabs__link"
1569
1761
  role="tab"
1762
+ aria-selected="false"
1570
1763
  id="box-tabs-secondary-network-wired-link"
1571
1764
  >
1572
1765
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1598,6 +1791,7 @@ cssPrefix: pf-v6-c-tabs
1598
1791
  ```html
1599
1792
  <div
1600
1793
  class="pf-v6-c-tabs pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl"
1794
+ aria-label="Default tab insets example"
1601
1795
  role="region"
1602
1796
  id="default-tab-insets"
1603
1797
  >
@@ -1613,12 +1807,17 @@ cssPrefix: pf-v6-c-tabs
1613
1807
  </span>
1614
1808
  </button>
1615
1809
  </div>
1616
- <ul class="pf-v6-c-tabs__list" role="tablist">
1810
+ <ul
1811
+ class="pf-v6-c-tabs__list"
1812
+ role="tablist"
1813
+ aria-label="Default tab insets example"
1814
+ >
1617
1815
  <li class="pf-v6-c-tabs__item" role="presentation">
1618
1816
  <button
1619
1817
  type="button"
1620
1818
  class="pf-v6-c-tabs__link"
1621
1819
  role="tab"
1820
+ aria-selected="false"
1622
1821
  id="default-tab-insets-users-link"
1623
1822
  >
1624
1823
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1629,6 +1828,7 @@ cssPrefix: pf-v6-c-tabs
1629
1828
  type="button"
1630
1829
  class="pf-v6-c-tabs__link"
1631
1830
  role="tab"
1831
+ aria-selected="true"
1632
1832
  id="default-tab-insets-containers-link"
1633
1833
  >
1634
1834
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1639,6 +1839,7 @@ cssPrefix: pf-v6-c-tabs
1639
1839
  type="button"
1640
1840
  class="pf-v6-c-tabs__link"
1641
1841
  role="tab"
1842
+ aria-selected="false"
1642
1843
  id="default-tab-insets-database-link"
1643
1844
  >
1644
1845
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1650,6 +1851,7 @@ cssPrefix: pf-v6-c-tabs
1650
1851
  type="button"
1651
1852
  class="pf-v6-c-tabs__link"
1652
1853
  role="tab"
1854
+ aria-selected="false"
1653
1855
  id="default-tab-insets-server-link"
1654
1856
  >
1655
1857
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1660,6 +1862,7 @@ cssPrefix: pf-v6-c-tabs
1660
1862
  type="button"
1661
1863
  class="pf-v6-c-tabs__link"
1662
1864
  role="tab"
1865
+ aria-selected="false"
1663
1866
  id="default-tab-insets-system-link"
1664
1867
  >
1665
1868
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1670,6 +1873,7 @@ cssPrefix: pf-v6-c-tabs
1670
1873
  type="button"
1671
1874
  class="pf-v6-c-tabs__link"
1672
1875
  role="tab"
1876
+ aria-selected="false"
1673
1877
  id="default-tab-insets-network-wired-link"
1674
1878
  >
1675
1879
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1698,6 +1902,7 @@ cssPrefix: pf-v6-c-tabs
1698
1902
  ```html
1699
1903
  <div
1700
1904
  class="pf-v6-c-tabs pf-m-box pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl"
1905
+ aria-label="Box tab insets example"
1701
1906
  role="region"
1702
1907
  id="box-tab-insets"
1703
1908
  >
@@ -1713,12 +1918,17 @@ cssPrefix: pf-v6-c-tabs
1713
1918
  </span>
1714
1919
  </button>
1715
1920
  </div>
1716
- <ul class="pf-v6-c-tabs__list" role="tablist">
1921
+ <ul
1922
+ class="pf-v6-c-tabs__list"
1923
+ role="tablist"
1924
+ aria-label="Box tab insets example"
1925
+ >
1717
1926
  <li class="pf-v6-c-tabs__item" role="presentation">
1718
1927
  <button
1719
1928
  type="button"
1720
1929
  class="pf-v6-c-tabs__link"
1721
1930
  role="tab"
1931
+ aria-selected="false"
1722
1932
  id="box-tab-insets-users-link"
1723
1933
  >
1724
1934
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1729,6 +1939,7 @@ cssPrefix: pf-v6-c-tabs
1729
1939
  type="button"
1730
1940
  class="pf-v6-c-tabs__link"
1731
1941
  role="tab"
1942
+ aria-selected="true"
1732
1943
  id="box-tab-insets-containers-link"
1733
1944
  >
1734
1945
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1739,6 +1950,7 @@ cssPrefix: pf-v6-c-tabs
1739
1950
  type="button"
1740
1951
  class="pf-v6-c-tabs__link"
1741
1952
  role="tab"
1953
+ aria-selected="false"
1742
1954
  id="box-tab-insets-database-link"
1743
1955
  >
1744
1956
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1750,6 +1962,7 @@ cssPrefix: pf-v6-c-tabs
1750
1962
  type="button"
1751
1963
  class="pf-v6-c-tabs__link"
1752
1964
  role="tab"
1965
+ aria-selected="false"
1753
1966
  id="box-tab-insets-server-link"
1754
1967
  >
1755
1968
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1760,6 +1973,7 @@ cssPrefix: pf-v6-c-tabs
1760
1973
  type="button"
1761
1974
  class="pf-v6-c-tabs__link"
1762
1975
  role="tab"
1976
+ aria-selected="false"
1763
1977
  id="box-tab-insets-system-link"
1764
1978
  >
1765
1979
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1770,6 +1984,7 @@ cssPrefix: pf-v6-c-tabs
1770
1984
  type="button"
1771
1985
  class="pf-v6-c-tabs__link"
1772
1986
  role="tab"
1987
+ aria-selected="false"
1773
1988
  id="box-tab-insets-network-wired-link"
1774
1989
  >
1775
1990
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1796,7 +2011,12 @@ cssPrefix: pf-v6-c-tabs
1796
2011
  ### Page insets example
1797
2012
 
1798
2013
  ```html
1799
- <div class="pf-v6-c-tabs pf-m-page-insets" role="region" id="page-insets">
2014
+ <div
2015
+ class="pf-v6-c-tabs pf-m-page-insets"
2016
+ aria-label="Page insets example"
2017
+ role="region"
2018
+ id="page-insets"
2019
+ >
1800
2020
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1801
2021
  <button
1802
2022
  class="pf-v6-c-button pf-m-plain"
@@ -1809,12 +2029,17 @@ cssPrefix: pf-v6-c-tabs
1809
2029
  </span>
1810
2030
  </button>
1811
2031
  </div>
1812
- <ul class="pf-v6-c-tabs__list" role="tablist">
2032
+ <ul
2033
+ class="pf-v6-c-tabs__list"
2034
+ role="tablist"
2035
+ aria-label="Page insets example"
2036
+ >
1813
2037
  <li class="pf-v6-c-tabs__item" role="presentation">
1814
2038
  <button
1815
2039
  type="button"
1816
2040
  class="pf-v6-c-tabs__link"
1817
2041
  role="tab"
2042
+ aria-selected="false"
1818
2043
  id="page-insets-users-link"
1819
2044
  >
1820
2045
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -1825,6 +2050,7 @@ cssPrefix: pf-v6-c-tabs
1825
2050
  type="button"
1826
2051
  class="pf-v6-c-tabs__link"
1827
2052
  role="tab"
2053
+ aria-selected="true"
1828
2054
  id="page-insets-containers-link"
1829
2055
  >
1830
2056
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -1835,6 +2061,7 @@ cssPrefix: pf-v6-c-tabs
1835
2061
  type="button"
1836
2062
  class="pf-v6-c-tabs__link"
1837
2063
  role="tab"
2064
+ aria-selected="false"
1838
2065
  id="page-insets-database-link"
1839
2066
  >
1840
2067
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -1846,6 +2073,7 @@ cssPrefix: pf-v6-c-tabs
1846
2073
  type="button"
1847
2074
  class="pf-v6-c-tabs__link"
1848
2075
  role="tab"
2076
+ aria-selected="false"
1849
2077
  id="page-insets-server-link"
1850
2078
  >
1851
2079
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -1856,6 +2084,7 @@ cssPrefix: pf-v6-c-tabs
1856
2084
  type="button"
1857
2085
  class="pf-v6-c-tabs__link"
1858
2086
  role="tab"
2087
+ aria-selected="false"
1859
2088
  id="page-insets-system-link"
1860
2089
  >
1861
2090
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -1866,6 +2095,7 @@ cssPrefix: pf-v6-c-tabs
1866
2095
  type="button"
1867
2096
  class="pf-v6-c-tabs__link"
1868
2097
  role="tab"
2098
+ aria-selected="false"
1869
2099
  id="page-insets-network-wired-link"
1870
2100
  >
1871
2101
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -1901,7 +2131,12 @@ cssPrefix: pf-v6-c-tabs
1901
2131
  ### Icons and text example
1902
2132
 
1903
2133
  ```html
1904
- <div class="pf-v6-c-tabs" role="region" id="icons-and-text">
2134
+ <div
2135
+ class="pf-v6-c-tabs"
2136
+ aria-label="Icons and text example"
2137
+ role="region"
2138
+ id="icons-and-text"
2139
+ >
1905
2140
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1906
2141
  <button
1907
2142
  class="pf-v6-c-button pf-m-plain"
@@ -1914,12 +2149,17 @@ cssPrefix: pf-v6-c-tabs
1914
2149
  </span>
1915
2150
  </button>
1916
2151
  </div>
1917
- <ul class="pf-v6-c-tabs__list" role="tablist">
2152
+ <ul
2153
+ class="pf-v6-c-tabs__list"
2154
+ role="tablist"
2155
+ aria-label="Icons and text example"
2156
+ >
1918
2157
  <li class="pf-v6-c-tabs__item" role="presentation">
1919
2158
  <button
1920
2159
  type="button"
1921
2160
  class="pf-v6-c-tabs__link"
1922
2161
  role="tab"
2162
+ aria-selected="false"
1923
2163
  id="icons-and-text-users-link"
1924
2164
  >
1925
2165
  <span class="pf-v6-c-tabs__item-icon">
@@ -1933,6 +2173,7 @@ cssPrefix: pf-v6-c-tabs
1933
2173
  type="button"
1934
2174
  class="pf-v6-c-tabs__link"
1935
2175
  role="tab"
2176
+ aria-selected="true"
1936
2177
  id="icons-and-text-containers-link"
1937
2178
  >
1938
2179
  <span class="pf-v6-c-tabs__item-icon">
@@ -1946,6 +2187,7 @@ cssPrefix: pf-v6-c-tabs
1946
2187
  type="button"
1947
2188
  class="pf-v6-c-tabs__link"
1948
2189
  role="tab"
2190
+ aria-selected="false"
1949
2191
  id="icons-and-text-database-link"
1950
2192
  >
1951
2193
  <span class="pf-v6-c-tabs__item-icon">
@@ -1960,6 +2202,7 @@ cssPrefix: pf-v6-c-tabs
1960
2202
  type="button"
1961
2203
  class="pf-v6-c-tabs__link"
1962
2204
  role="tab"
2205
+ aria-selected="false"
1963
2206
  id="icons-and-text-server-link"
1964
2207
  >
1965
2208
  <span class="pf-v6-c-tabs__item-icon">
@@ -1973,6 +2216,7 @@ cssPrefix: pf-v6-c-tabs
1973
2216
  type="button"
1974
2217
  class="pf-v6-c-tabs__link"
1975
2218
  role="tab"
2219
+ aria-selected="false"
1976
2220
  id="icons-and-text-system-link"
1977
2221
  >
1978
2222
  <span class="pf-v6-c-tabs__item-icon">
@@ -1986,6 +2230,7 @@ cssPrefix: pf-v6-c-tabs
1986
2230
  type="button"
1987
2231
  class="pf-v6-c-tabs__link"
1988
2232
  role="tab"
2233
+ aria-selected="false"
1989
2234
  id="icons-and-text-network-wired-link"
1990
2235
  >
1991
2236
  <span class="pf-v6-c-tabs__item-icon">
@@ -2017,7 +2262,12 @@ cssPrefix: pf-v6-c-tabs
2017
2262
  ### Tabs with sub tabs example
2018
2263
 
2019
2264
  ```html
2020
- <div class="pf-v6-c-tabs pf-m-scrollable" role="region" id="tabs-with-sub-tabs">
2265
+ <div
2266
+ class="pf-v6-c-tabs pf-m-scrollable"
2267
+ aria-label="With sub tabs example, primary"
2268
+ role="region"
2269
+ id="tabs-with-sub-tabs"
2270
+ >
2021
2271
  <div class="pf-v6-c-tabs__scroll-button">
2022
2272
  <button
2023
2273
  class="pf-v6-c-button pf-m-plain"
@@ -2029,12 +2279,17 @@ cssPrefix: pf-v6-c-tabs
2029
2279
  </span>
2030
2280
  </button>
2031
2281
  </div>
2032
- <ul class="pf-v6-c-tabs__list" role="tablist">
2282
+ <ul
2283
+ class="pf-v6-c-tabs__list"
2284
+ role="tablist"
2285
+ aria-label="With sub tabs example, primary"
2286
+ >
2033
2287
  <li class="pf-v6-c-tabs__item" role="presentation">
2034
2288
  <button
2035
2289
  type="button"
2036
2290
  class="pf-v6-c-tabs__link"
2037
2291
  role="tab"
2292
+ aria-selected="false"
2038
2293
  id="tabs-with-sub-tabs-users-link"
2039
2294
  >
2040
2295
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2045,6 +2300,7 @@ cssPrefix: pf-v6-c-tabs
2045
2300
  type="button"
2046
2301
  class="pf-v6-c-tabs__link"
2047
2302
  role="tab"
2303
+ aria-selected="true"
2048
2304
  id="tabs-with-sub-tabs-containers-link"
2049
2305
  >
2050
2306
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -2055,6 +2311,7 @@ cssPrefix: pf-v6-c-tabs
2055
2311
  type="button"
2056
2312
  class="pf-v6-c-tabs__link"
2057
2313
  role="tab"
2314
+ aria-selected="false"
2058
2315
  id="tabs-with-sub-tabs-database-link"
2059
2316
  >
2060
2317
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -2066,6 +2323,7 @@ cssPrefix: pf-v6-c-tabs
2066
2323
  type="button"
2067
2324
  class="pf-v6-c-tabs__link"
2068
2325
  role="tab"
2326
+ aria-selected="false"
2069
2327
  id="tabs-with-sub-tabs-server-link"
2070
2328
  >
2071
2329
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -2076,6 +2334,7 @@ cssPrefix: pf-v6-c-tabs
2076
2334
  type="button"
2077
2335
  class="pf-v6-c-tabs__link"
2078
2336
  role="tab"
2337
+ aria-selected="false"
2079
2338
  id="tabs-with-sub-tabs-system-link"
2080
2339
  >
2081
2340
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -2086,6 +2345,7 @@ cssPrefix: pf-v6-c-tabs
2086
2345
  type="button"
2087
2346
  class="pf-v6-c-tabs__link"
2088
2347
  role="tab"
2348
+ aria-selected="false"
2089
2349
  id="tabs-with-sub-tabs-network-wired-link"
2090
2350
  >
2091
2351
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -2108,6 +2368,7 @@ cssPrefix: pf-v6-c-tabs
2108
2368
 
2109
2369
  <div
2110
2370
  class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
2371
+ aria-label="With sub tabs example, Containers"
2111
2372
  role="region"
2112
2373
  id="tabs-with-sub-tabs-subtab"
2113
2374
  >
@@ -2122,12 +2383,17 @@ cssPrefix: pf-v6-c-tabs
2122
2383
  </span>
2123
2384
  </button>
2124
2385
  </div>
2125
- <ul class="pf-v6-c-tabs__list" role="tablist">
2386
+ <ul
2387
+ class="pf-v6-c-tabs__list"
2388
+ role="tablist"
2389
+ aria-label="With sub tabs example, Containers"
2390
+ >
2126
2391
  <li class="pf-v6-c-tabs__item" role="presentation">
2127
2392
  <button
2128
2393
  type="button"
2129
2394
  class="pf-v6-c-tabs__link"
2130
2395
  role="tab"
2396
+ aria-selected="false"
2131
2397
  id="tabs-with-sub-tabs-subtab-sub-1-link"
2132
2398
  >
2133
2399
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -2138,6 +2404,7 @@ cssPrefix: pf-v6-c-tabs
2138
2404
  type="button"
2139
2405
  class="pf-v6-c-tabs__link"
2140
2406
  role="tab"
2407
+ aria-selected="false"
2141
2408
  id="tabs-with-sub-tabs-subtab-sub-2-link"
2142
2409
  >
2143
2410
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -2148,6 +2415,7 @@ cssPrefix: pf-v6-c-tabs
2148
2415
  type="button"
2149
2416
  class="pf-v6-c-tabs__link"
2150
2417
  role="tab"
2418
+ aria-selected="true"
2151
2419
  id="tabs-with-sub-tabs-subtab-sub-3-link"
2152
2420
  >
2153
2421
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -2159,6 +2427,7 @@ cssPrefix: pf-v6-c-tabs
2159
2427
  type="button"
2160
2428
  class="pf-v6-c-tabs__link"
2161
2429
  role="tab"
2430
+ aria-selected="false"
2162
2431
  id="tabs-with-sub-tabs-subtab-sub-4-link"
2163
2432
  >
2164
2433
  <span class="pf-v6-c-tabs__item-text">Item 4</span>
@@ -2169,6 +2438,7 @@ cssPrefix: pf-v6-c-tabs
2169
2438
  type="button"
2170
2439
  class="pf-v6-c-tabs__link"
2171
2440
  role="tab"
2441
+ aria-selected="false"
2172
2442
  id="tabs-with-sub-tabs-subtab-sub-5-link"
2173
2443
  >
2174
2444
  <span class="pf-v6-c-tabs__item-text">Item 5</span>
@@ -2179,6 +2449,7 @@ cssPrefix: pf-v6-c-tabs
2179
2449
  type="button"
2180
2450
  class="pf-v6-c-tabs__link"
2181
2451
  role="tab"
2452
+ aria-selected="false"
2182
2453
  id="tabs-with-sub-tabs-subtab-sub-6-link"
2183
2454
  >
2184
2455
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -2206,6 +2477,7 @@ cssPrefix: pf-v6-c-tabs
2206
2477
  ```html
2207
2478
  <div
2208
2479
  class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
2480
+ aria-label="Box with sub tabs example, primary"
2209
2481
  role="region"
2210
2482
  id="box-tabs-with-sub-tabs"
2211
2483
  >
@@ -2220,12 +2492,17 @@ cssPrefix: pf-v6-c-tabs
2220
2492
  </span>
2221
2493
  </button>
2222
2494
  </div>
2223
- <ul class="pf-v6-c-tabs__list" role="tablist">
2495
+ <ul
2496
+ class="pf-v6-c-tabs__list"
2497
+ role="tablist"
2498
+ aria-label="Box with sub tabs example, primary"
2499
+ >
2224
2500
  <li class="pf-v6-c-tabs__item" role="presentation">
2225
2501
  <button
2226
2502
  type="button"
2227
2503
  class="pf-v6-c-tabs__link"
2228
2504
  role="tab"
2505
+ aria-selected="false"
2229
2506
  id="box-tabs-with-sub-tabs-users-link"
2230
2507
  >
2231
2508
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2236,6 +2513,7 @@ cssPrefix: pf-v6-c-tabs
2236
2513
  type="button"
2237
2514
  class="pf-v6-c-tabs__link"
2238
2515
  role="tab"
2516
+ aria-selected="true"
2239
2517
  id="box-tabs-with-sub-tabs-containers-link"
2240
2518
  >
2241
2519
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -2246,6 +2524,7 @@ cssPrefix: pf-v6-c-tabs
2246
2524
  type="button"
2247
2525
  class="pf-v6-c-tabs__link"
2248
2526
  role="tab"
2527
+ aria-selected="false"
2249
2528
  id="box-tabs-with-sub-tabs-database-link"
2250
2529
  >
2251
2530
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -2257,6 +2536,7 @@ cssPrefix: pf-v6-c-tabs
2257
2536
  type="button"
2258
2537
  class="pf-v6-c-tabs__link"
2259
2538
  role="tab"
2539
+ aria-selected="false"
2260
2540
  id="box-tabs-with-sub-tabs-server-link"
2261
2541
  >
2262
2542
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -2267,6 +2547,7 @@ cssPrefix: pf-v6-c-tabs
2267
2547
  type="button"
2268
2548
  class="pf-v6-c-tabs__link"
2269
2549
  role="tab"
2550
+ aria-selected="false"
2270
2551
  id="box-tabs-with-sub-tabs-system-link"
2271
2552
  >
2272
2553
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -2277,6 +2558,7 @@ cssPrefix: pf-v6-c-tabs
2277
2558
  type="button"
2278
2559
  class="pf-v6-c-tabs__link"
2279
2560
  role="tab"
2561
+ aria-selected="false"
2280
2562
  id="box-tabs-with-sub-tabs-network-wired-link"
2281
2563
  >
2282
2564
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -2299,6 +2581,7 @@ cssPrefix: pf-v6-c-tabs
2299
2581
 
2300
2582
  <div
2301
2583
  class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
2584
+ aria-label="Box with sub tabs example, Containers"
2302
2585
  role="region"
2303
2586
  id="box-tabs-with-sub-tabs-subtab"
2304
2587
  >
@@ -2313,12 +2596,17 @@ cssPrefix: pf-v6-c-tabs
2313
2596
  </span>
2314
2597
  </button>
2315
2598
  </div>
2316
- <ul class="pf-v6-c-tabs__list" role="tablist">
2599
+ <ul
2600
+ class="pf-v6-c-tabs__list"
2601
+ role="tablist"
2602
+ aria-label="Box with sub tabs example, Containers"
2603
+ >
2317
2604
  <li class="pf-v6-c-tabs__item" role="presentation">
2318
2605
  <button
2319
2606
  type="button"
2320
2607
  class="pf-v6-c-tabs__link"
2321
2608
  role="tab"
2609
+ aria-selected="false"
2322
2610
  id="box-tabs-with-sub-tabs-subtab-sub-1-link"
2323
2611
  >
2324
2612
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -2329,6 +2617,7 @@ cssPrefix: pf-v6-c-tabs
2329
2617
  type="button"
2330
2618
  class="pf-v6-c-tabs__link"
2331
2619
  role="tab"
2620
+ aria-selected="false"
2332
2621
  id="box-tabs-with-sub-tabs-subtab-sub-2-link"
2333
2622
  >
2334
2623
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -2339,6 +2628,7 @@ cssPrefix: pf-v6-c-tabs
2339
2628
  type="button"
2340
2629
  class="pf-v6-c-tabs__link"
2341
2630
  role="tab"
2631
+ aria-selected="true"
2342
2632
  id="box-tabs-with-sub-tabs-subtab-sub-3-link"
2343
2633
  >
2344
2634
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -2350,6 +2640,7 @@ cssPrefix: pf-v6-c-tabs
2350
2640
  type="button"
2351
2641
  class="pf-v6-c-tabs__link"
2352
2642
  role="tab"
2643
+ aria-selected="false"
2353
2644
  id="box-tabs-with-sub-tabs-subtab-sub-4-link"
2354
2645
  >
2355
2646
  <span class="pf-v6-c-tabs__item-text">Item 4</span>
@@ -2360,6 +2651,7 @@ cssPrefix: pf-v6-c-tabs
2360
2651
  type="button"
2361
2652
  class="pf-v6-c-tabs__link"
2362
2653
  role="tab"
2654
+ aria-selected="false"
2363
2655
  id="box-tabs-with-sub-tabs-subtab-sub-5-link"
2364
2656
  >
2365
2657
  <span class="pf-v6-c-tabs__item-text">Item 5</span>
@@ -2370,6 +2662,7 @@ cssPrefix: pf-v6-c-tabs
2370
2662
  type="button"
2371
2663
  class="pf-v6-c-tabs__link"
2372
2664
  role="tab"
2665
+ aria-selected="false"
2373
2666
  id="box-tabs-with-sub-tabs-subtab-sub-6-link"
2374
2667
  >
2375
2668
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -2397,7 +2690,12 @@ cssPrefix: pf-v6-c-tabs
2397
2690
  ### Filled tabs example
2398
2691
 
2399
2692
  ```html
2400
- <div class="pf-v6-c-tabs pf-m-fill" role="region" id="filled-tabs">
2693
+ <div
2694
+ class="pf-v6-c-tabs pf-m-fill"
2695
+ aria-label="Filled example"
2696
+ role="region"
2697
+ id="filled-tabs"
2698
+ >
2401
2699
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2402
2700
  <button
2403
2701
  class="pf-v6-c-button pf-m-plain"
@@ -2410,12 +2708,13 @@ cssPrefix: pf-v6-c-tabs
2410
2708
  </span>
2411
2709
  </button>
2412
2710
  </div>
2413
- <ul class="pf-v6-c-tabs__list" role="tablist">
2711
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Filled example">
2414
2712
  <li class="pf-v6-c-tabs__item" role="presentation">
2415
2713
  <button
2416
2714
  type="button"
2417
2715
  class="pf-v6-c-tabs__link"
2418
2716
  role="tab"
2717
+ aria-selected="false"
2419
2718
  id="filled-tabs-users-link"
2420
2719
  >
2421
2720
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2426,6 +2725,7 @@ cssPrefix: pf-v6-c-tabs
2426
2725
  type="button"
2427
2726
  class="pf-v6-c-tabs__link"
2428
2727
  role="tab"
2728
+ aria-selected="true"
2429
2729
  id="filled-tabs-containers-link"
2430
2730
  >
2431
2731
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -2436,6 +2736,7 @@ cssPrefix: pf-v6-c-tabs
2436
2736
  type="button"
2437
2737
  class="pf-v6-c-tabs__link"
2438
2738
  role="tab"
2739
+ aria-selected="false"
2439
2740
  id="filled-tabs-database-link"
2440
2741
  >
2441
2742
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -2462,7 +2763,12 @@ cssPrefix: pf-v6-c-tabs
2462
2763
  ### Filled with icons example
2463
2764
 
2464
2765
  ```html
2465
- <div class="pf-v6-c-tabs pf-m-fill" role="region" id="filled-with-icons">
2766
+ <div
2767
+ class="pf-v6-c-tabs pf-m-fill"
2768
+ aria-label="Filled with icons example"
2769
+ role="region"
2770
+ id="filled-with-icons"
2771
+ >
2466
2772
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2467
2773
  <button
2468
2774
  class="pf-v6-c-button pf-m-plain"
@@ -2475,12 +2781,17 @@ cssPrefix: pf-v6-c-tabs
2475
2781
  </span>
2476
2782
  </button>
2477
2783
  </div>
2478
- <ul class="pf-v6-c-tabs__list" role="tablist">
2784
+ <ul
2785
+ class="pf-v6-c-tabs__list"
2786
+ role="tablist"
2787
+ aria-label="Filled with icons example"
2788
+ >
2479
2789
  <li class="pf-v6-c-tabs__item" role="presentation">
2480
2790
  <button
2481
2791
  type="button"
2482
2792
  class="pf-v6-c-tabs__link"
2483
2793
  role="tab"
2794
+ aria-selected="false"
2484
2795
  id="filled-with-icons-users-link"
2485
2796
  >
2486
2797
  <span class="pf-v6-c-tabs__item-icon">
@@ -2494,6 +2805,7 @@ cssPrefix: pf-v6-c-tabs
2494
2805
  type="button"
2495
2806
  class="pf-v6-c-tabs__link"
2496
2807
  role="tab"
2808
+ aria-selected="true"
2497
2809
  id="filled-with-icons-containers-link"
2498
2810
  >
2499
2811
  <span class="pf-v6-c-tabs__item-icon">
@@ -2507,6 +2819,7 @@ cssPrefix: pf-v6-c-tabs
2507
2819
  type="button"
2508
2820
  class="pf-v6-c-tabs__link"
2509
2821
  role="tab"
2822
+ aria-selected="false"
2510
2823
  id="filled-with-icons-database-link"
2511
2824
  >
2512
2825
  <span class="pf-v6-c-tabs__item-icon">
@@ -2536,7 +2849,12 @@ cssPrefix: pf-v6-c-tabs
2536
2849
  ### Filled box example
2537
2850
 
2538
2851
  ```html
2539
- <div class="pf-v6-c-tabs pf-m-fill pf-m-box" role="region" id="filled-box">
2852
+ <div
2853
+ class="pf-v6-c-tabs pf-m-fill pf-m-box"
2854
+ aria-label="Filled box example"
2855
+ role="region"
2856
+ id="filled-box"
2857
+ >
2540
2858
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2541
2859
  <button
2542
2860
  class="pf-v6-c-button pf-m-plain"
@@ -2549,12 +2867,13 @@ cssPrefix: pf-v6-c-tabs
2549
2867
  </span>
2550
2868
  </button>
2551
2869
  </div>
2552
- <ul class="pf-v6-c-tabs__list" role="tablist">
2870
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Filled box example">
2553
2871
  <li class="pf-v6-c-tabs__item" role="presentation">
2554
2872
  <button
2555
2873
  type="button"
2556
2874
  class="pf-v6-c-tabs__link"
2557
2875
  role="tab"
2876
+ aria-selected="false"
2558
2877
  id="filled-box-users-link"
2559
2878
  >
2560
2879
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2565,6 +2884,7 @@ cssPrefix: pf-v6-c-tabs
2565
2884
  type="button"
2566
2885
  class="pf-v6-c-tabs__link"
2567
2886
  role="tab"
2887
+ aria-selected="true"
2568
2888
  id="filled-box-containers-link"
2569
2889
  >
2570
2890
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -2575,6 +2895,7 @@ cssPrefix: pf-v6-c-tabs
2575
2895
  type="button"
2576
2896
  class="pf-v6-c-tabs__link"
2577
2897
  role="tab"
2898
+ aria-selected="false"
2578
2899
  id="filled-box-database-link"
2579
2900
  >
2580
2901
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -2603,6 +2924,7 @@ cssPrefix: pf-v6-c-tabs
2603
2924
  ```html
2604
2925
  <div
2605
2926
  class="pf-v6-c-tabs pf-m-fill pf-m-box"
2927
+ aria-label="Filled box with icons example"
2606
2928
  role="region"
2607
2929
  id="filled-box-with-icons"
2608
2930
  >
@@ -2618,12 +2940,17 @@ cssPrefix: pf-v6-c-tabs
2618
2940
  </span>
2619
2941
  </button>
2620
2942
  </div>
2621
- <ul class="pf-v6-c-tabs__list" role="tablist">
2943
+ <ul
2944
+ class="pf-v6-c-tabs__list"
2945
+ role="tablist"
2946
+ aria-label="Filled box with icons example"
2947
+ >
2622
2948
  <li class="pf-v6-c-tabs__item" role="presentation">
2623
2949
  <button
2624
2950
  type="button"
2625
2951
  class="pf-v6-c-tabs__link"
2626
2952
  role="tab"
2953
+ aria-selected="false"
2627
2954
  id="filled-box-with-icons-users-link"
2628
2955
  >
2629
2956
  <span class="pf-v6-c-tabs__item-icon">
@@ -2637,6 +2964,7 @@ cssPrefix: pf-v6-c-tabs
2637
2964
  type="button"
2638
2965
  class="pf-v6-c-tabs__link"
2639
2966
  role="tab"
2967
+ aria-selected="true"
2640
2968
  id="filled-box-with-icons-containers-link"
2641
2969
  >
2642
2970
  <span class="pf-v6-c-tabs__item-icon">
@@ -2650,6 +2978,7 @@ cssPrefix: pf-v6-c-tabs
2650
2978
  type="button"
2651
2979
  class="pf-v6-c-tabs__link"
2652
2980
  role="tab"
2981
+ aria-selected="false"
2653
2982
  id="filled-box-with-icons-database-link"
2654
2983
  >
2655
2984
  <span class="pf-v6-c-tabs__item-icon">
@@ -2689,9 +3018,7 @@ cssPrefix: pf-v6-c-tabs
2689
3018
  ```html
2690
3019
  <nav
2691
3020
  class="pf-v6-c-tabs pf-m-scrollable"
2692
- aria-label="Tabs nav"
2693
- role="region"
2694
- id="using-the-nav-element"
3021
+ aria-label="Using nav element example"
2695
3022
  >
2696
3023
  <div class="pf-v6-c-tabs__scroll-button">
2697
3024
  <button
@@ -2704,12 +3031,17 @@ cssPrefix: pf-v6-c-tabs
2704
3031
  </span>
2705
3032
  </button>
2706
3033
  </div>
2707
- <ul class="pf-v6-c-tabs__list" role="tablist">
3034
+ <ul
3035
+ class="pf-v6-c-tabs__list"
3036
+ role="tablist"
3037
+ aria-label="Using nav element example"
3038
+ >
2708
3039
  <li class="pf-v6-c-tabs__item" role="presentation">
2709
3040
  <a
2710
3041
  class="pf-v6-c-tabs__link"
2711
3042
  href="#"
2712
3043
  role="tab"
3044
+ aria-selected="false"
2713
3045
  id="using-the-nav-element-users-link"
2714
3046
  >
2715
3047
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2720,6 +3052,7 @@ cssPrefix: pf-v6-c-tabs
2720
3052
  class="pf-v6-c-tabs__link"
2721
3053
  href="#"
2722
3054
  role="tab"
3055
+ aria-selected="true"
2723
3056
  id="using-the-nav-element-containers-link"
2724
3057
  >
2725
3058
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -2730,6 +3063,7 @@ cssPrefix: pf-v6-c-tabs
2730
3063
  class="pf-v6-c-tabs__link"
2731
3064
  href="#"
2732
3065
  role="tab"
3066
+ aria-selected="false"
2733
3067
  id="using-the-nav-element-database-link"
2734
3068
  >
2735
3069
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -2743,6 +3077,7 @@ cssPrefix: pf-v6-c-tabs
2743
3077
  tabindex="-1"
2744
3078
  href="#"
2745
3079
  role="tab"
3080
+ aria-selected="false"
2746
3081
  id="using-the-nav-element-disabled-link"
2747
3082
  >
2748
3083
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -2754,6 +3089,7 @@ cssPrefix: pf-v6-c-tabs
2754
3089
  aria-disabled="true"
2755
3090
  href="#"
2756
3091
  role="tab"
3092
+ aria-selected="false"
2757
3093
  id="using-the-nav-element-aria-disabled-link"
2758
3094
  >
2759
3095
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -2764,6 +3100,7 @@ cssPrefix: pf-v6-c-tabs
2764
3100
  class="pf-v6-c-tabs__link"
2765
3101
  href="#"
2766
3102
  role="tab"
3103
+ aria-selected="false"
2767
3104
  id="using-the-nav-element-network-wired-link"
2768
3105
  >
2769
3106
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -2791,9 +3128,7 @@ cssPrefix: pf-v6-c-tabs
2791
3128
  ```html
2792
3129
  <nav
2793
3130
  class="pf-v6-c-tabs"
2794
- aria-label="Tabs primary nav"
2795
- role="region"
2796
- id="sub-tabs-using-the-nav-element"
3131
+ aria-label="Using nav element with sub tabs example, primary"
2797
3132
  >
2798
3133
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2799
3134
  <button
@@ -2807,12 +3142,17 @@ cssPrefix: pf-v6-c-tabs
2807
3142
  </span>
2808
3143
  </button>
2809
3144
  </div>
2810
- <ul class="pf-v6-c-tabs__list" role="tablist">
3145
+ <ul
3146
+ class="pf-v6-c-tabs__list"
3147
+ role="tablist"
3148
+ aria-label="Using nav element with sub tabs example, primary"
3149
+ >
2811
3150
  <li class="pf-v6-c-tabs__item" role="presentation">
2812
3151
  <a
2813
3152
  class="pf-v6-c-tabs__link"
2814
3153
  href="#"
2815
3154
  role="tab"
3155
+ aria-selected="false"
2816
3156
  id="sub-tabs-using-the-nav-element-users-link"
2817
3157
  >
2818
3158
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -2823,6 +3163,7 @@ cssPrefix: pf-v6-c-tabs
2823
3163
  class="pf-v6-c-tabs__link"
2824
3164
  href="#"
2825
3165
  role="tab"
3166
+ aria-selected="true"
2826
3167
  id="sub-tabs-using-the-nav-element-containers-link"
2827
3168
  >
2828
3169
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -2833,6 +3174,7 @@ cssPrefix: pf-v6-c-tabs
2833
3174
  class="pf-v6-c-tabs__link"
2834
3175
  href="#"
2835
3176
  role="tab"
3177
+ aria-selected="false"
2836
3178
  id="sub-tabs-using-the-nav-element-database-link"
2837
3179
  >
2838
3180
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -2844,6 +3186,7 @@ cssPrefix: pf-v6-c-tabs
2844
3186
  class="pf-v6-c-tabs__link"
2845
3187
  href="#"
2846
3188
  role="tab"
3189
+ aria-selected="false"
2847
3190
  id="sub-tabs-using-the-nav-element-server-link"
2848
3191
  >
2849
3192
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -2854,6 +3197,7 @@ cssPrefix: pf-v6-c-tabs
2854
3197
  class="pf-v6-c-tabs__link"
2855
3198
  href="#"
2856
3199
  role="tab"
3200
+ aria-selected="false"
2857
3201
  id="sub-tabs-using-the-nav-element-system-link"
2858
3202
  >
2859
3203
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -2864,6 +3208,7 @@ cssPrefix: pf-v6-c-tabs
2864
3208
  class="pf-v6-c-tabs__link"
2865
3209
  href="#"
2866
3210
  role="tab"
3211
+ aria-selected="false"
2867
3212
  id="sub-tabs-using-the-nav-element-network-wired-link"
2868
3213
  >
2869
3214
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -2887,9 +3232,7 @@ cssPrefix: pf-v6-c-tabs
2887
3232
 
2888
3233
  <nav
2889
3234
  class="pf-v6-c-tabs pf-m-subtab"
2890
- aria-label="Tabs subtab nav"
2891
- role="region"
2892
- id="sub-tabs-using-the-nav-element-subtab"
3235
+ aria-label="Using nav element with sub tabs example, Containers"
2893
3236
  >
2894
3237
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2895
3238
  <button
@@ -2903,12 +3246,17 @@ cssPrefix: pf-v6-c-tabs
2903
3246
  </span>
2904
3247
  </button>
2905
3248
  </div>
2906
- <ul class="pf-v6-c-tabs__list" role="tablist">
3249
+ <ul
3250
+ class="pf-v6-c-tabs__list"
3251
+ role="tablist"
3252
+ aria-label="Using nav element with sub tabs example, Containers"
3253
+ >
2907
3254
  <li class="pf-v6-c-tabs__item" role="presentation">
2908
3255
  <a
2909
3256
  class="pf-v6-c-tabs__link"
2910
3257
  href="#"
2911
3258
  role="tab"
3259
+ aria-selected="false"
2912
3260
  id="sub-tabs-using-the-nav-element-subtab-sub-1-link"
2913
3261
  >
2914
3262
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -2919,6 +3267,7 @@ cssPrefix: pf-v6-c-tabs
2919
3267
  class="pf-v6-c-tabs__link"
2920
3268
  href="#"
2921
3269
  role="tab"
3270
+ aria-selected="false"
2922
3271
  id="sub-tabs-using-the-nav-element-subtab-sub-2-link"
2923
3272
  >
2924
3273
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -2929,6 +3278,7 @@ cssPrefix: pf-v6-c-tabs
2929
3278
  class="pf-v6-c-tabs__link"
2930
3279
  href="#"
2931
3280
  role="tab"
3281
+ aria-selected="true"
2932
3282
  id="sub-tabs-using-the-nav-element-subtab-sub-3-link"
2933
3283
  >
2934
3284
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -2942,6 +3292,7 @@ cssPrefix: pf-v6-c-tabs
2942
3292
  tabindex="-1"
2943
3293
  href="#"
2944
3294
  role="tab"
3295
+ aria-selected="false"
2945
3296
  id="sub-tabs-using-the-nav-element-subtab-sub-disabled-link"
2946
3297
  >
2947
3298
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -2953,6 +3304,7 @@ cssPrefix: pf-v6-c-tabs
2953
3304
  aria-disabled="true"
2954
3305
  href="#"
2955
3306
  role="tab"
3307
+ aria-selected="false"
2956
3308
  id="sub-tabs-using-the-nav-element-subtab-sub-aria-disabled-link"
2957
3309
  >
2958
3310
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -2963,6 +3315,7 @@ cssPrefix: pf-v6-c-tabs
2963
3315
  class="pf-v6-c-tabs__link"
2964
3316
  href="#"
2965
3317
  role="tab"
3318
+ aria-selected="false"
2966
3319
  id="sub-tabs-using-the-nav-element-subtab-sub-6-link"
2967
3320
  >
2968
3321
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -2986,6 +3339,219 @@ cssPrefix: pf-v6-c-tabs
2986
3339
 
2987
3340
  ```
2988
3341
 
3342
+ ### Site navigation variation
3343
+
3344
+ ```html isBeta
3345
+ <nav
3346
+ class="pf-v6-c-tabs pf-m-nav"
3347
+ aria-label="Site navigation variation example"
3348
+ >
3349
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3350
+ <button
3351
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3352
+ type="button"
3353
+ aria-label="Scroll left"
3354
+ disabled
3355
+ >
3356
+ <span class="pf-v6-c-button__icon">
3357
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3358
+ </span>
3359
+ </button>
3360
+ </div>
3361
+ <ul
3362
+ class="pf-v6-c-tabs__list"
3363
+ role="tablist"
3364
+ aria-label="Site navigation variation example"
3365
+ >
3366
+ <li class="pf-v6-c-tabs__item" role="presentation">
3367
+ <button
3368
+ type="button"
3369
+ class="pf-v6-c-tabs__link"
3370
+ role="tab"
3371
+ aria-selected="false"
3372
+ id="nav-tabs-users-link"
3373
+ >
3374
+ <span class="pf-v6-c-tabs__item-text">Users</span>
3375
+ </button>
3376
+ </li>
3377
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3378
+ <button
3379
+ type="button"
3380
+ class="pf-v6-c-tabs__link"
3381
+ role="tab"
3382
+ aria-selected="true"
3383
+ id="nav-tabs-containers-link"
3384
+ >
3385
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
3386
+ </button>
3387
+ </li>
3388
+ <li class="pf-v6-c-tabs__item" role="presentation">
3389
+ <button
3390
+ type="button"
3391
+ class="pf-v6-c-tabs__link"
3392
+ role="tab"
3393
+ aria-selected="false"
3394
+ id="nav-tabs-database-link"
3395
+ >
3396
+ <span class="pf-v6-c-tabs__item-text">Database</span>
3397
+ </button>
3398
+ </li>
3399
+
3400
+ <li class="pf-v6-c-tabs__item" role="presentation">
3401
+ <button
3402
+ type="button"
3403
+ class="pf-v6-c-tabs__link"
3404
+ role="tab"
3405
+ aria-selected="false"
3406
+ id="nav-tabs-server-link"
3407
+ >
3408
+ <span class="pf-v6-c-tabs__item-text">Server</span>
3409
+ </button>
3410
+ </li>
3411
+ <li class="pf-v6-c-tabs__item" role="presentation">
3412
+ <button
3413
+ type="button"
3414
+ class="pf-v6-c-tabs__link"
3415
+ role="tab"
3416
+ aria-selected="false"
3417
+ id="nav-tabs-system-link"
3418
+ >
3419
+ <span class="pf-v6-c-tabs__item-text">System</span>
3420
+ </button>
3421
+ </li>
3422
+ <li class="pf-v6-c-tabs__item" role="presentation">
3423
+ <button
3424
+ type="button"
3425
+ class="pf-v6-c-tabs__link"
3426
+ role="tab"
3427
+ aria-selected="false"
3428
+ id="nav-tabs-network-wired-link"
3429
+ >
3430
+ <span class="pf-v6-c-tabs__item-text">Network</span>
3431
+ </button>
3432
+ </li>
3433
+ </ul>
3434
+
3435
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3436
+ <button
3437
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3438
+ type="button"
3439
+ aria-label="Scroll right"
3440
+ disabled
3441
+ >
3442
+ <span class="pf-v6-c-button__icon">
3443
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3444
+ </span>
3445
+ </button>
3446
+ </div>
3447
+ </nav><br/ >
3448
+ As sub navigation:
3449
+ <nav
3450
+ class="pf-v6-c-tabs pf-m-subtab pf-m-nav"
3451
+ aria-label="Site navigation variation as sub tabs example"
3452
+ >
3453
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3454
+ <button
3455
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3456
+ type="button"
3457
+ aria-label="Scroll left"
3458
+ disabled
3459
+ >
3460
+ <span class="pf-v6-c-button__icon">
3461
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3462
+ </span>
3463
+ </button>
3464
+ </div>
3465
+ <ul
3466
+ class="pf-v6-c-tabs__list"
3467
+ role="tablist"
3468
+ aria-label="Site navigation variation as sub tabs example"
3469
+ >
3470
+ <li class="pf-v6-c-tabs__item" role="presentation">
3471
+ <button
3472
+ type="button"
3473
+ class="pf-v6-c-tabs__link"
3474
+ role="tab"
3475
+ aria-selected="false"
3476
+ id="nav-tabs-users-link"
3477
+ >
3478
+ <span class="pf-v6-c-tabs__item-text">Users</span>
3479
+ </button>
3480
+ </li>
3481
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3482
+ <button
3483
+ type="button"
3484
+ class="pf-v6-c-tabs__link"
3485
+ role="tab"
3486
+ aria-selected="true"
3487
+ id="nav-tabs-containers-link"
3488
+ >
3489
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
3490
+ </button>
3491
+ </li>
3492
+ <li class="pf-v6-c-tabs__item" role="presentation">
3493
+ <button
3494
+ type="button"
3495
+ class="pf-v6-c-tabs__link"
3496
+ role="tab"
3497
+ aria-selected="false"
3498
+ id="nav-tabs-database-link"
3499
+ >
3500
+ <span class="pf-v6-c-tabs__item-text">Database</span>
3501
+ </button>
3502
+ </li>
3503
+
3504
+ <li class="pf-v6-c-tabs__item" role="presentation">
3505
+ <button
3506
+ type="button"
3507
+ class="pf-v6-c-tabs__link"
3508
+ role="tab"
3509
+ aria-selected="false"
3510
+ id="nav-tabs-server-link"
3511
+ >
3512
+ <span class="pf-v6-c-tabs__item-text">Server</span>
3513
+ </button>
3514
+ </li>
3515
+ <li class="pf-v6-c-tabs__item" role="presentation">
3516
+ <button
3517
+ type="button"
3518
+ class="pf-v6-c-tabs__link"
3519
+ role="tab"
3520
+ aria-selected="false"
3521
+ id="nav-tabs-system-link"
3522
+ >
3523
+ <span class="pf-v6-c-tabs__item-text">System</span>
3524
+ </button>
3525
+ </li>
3526
+ <li class="pf-v6-c-tabs__item" role="presentation">
3527
+ <button
3528
+ type="button"
3529
+ class="pf-v6-c-tabs__link"
3530
+ role="tab"
3531
+ aria-selected="false"
3532
+ id="nav-tabs-network-wired-link"
3533
+ >
3534
+ <span class="pf-v6-c-tabs__item-text">Network</span>
3535
+ </button>
3536
+ </li>
3537
+ </ul>
3538
+
3539
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3540
+ <button
3541
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3542
+ type="button"
3543
+ aria-label="Scroll right"
3544
+ disabled
3545
+ >
3546
+ <span class="pf-v6-c-button__icon">
3547
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3548
+ </span>
3549
+ </button>
3550
+ </div>
3551
+ </nav>
3552
+
3553
+ ```
3554
+
2989
3555
  ## Tab item actions
2990
3556
 
2991
3557
  ### Help button example
@@ -2993,6 +3559,7 @@ cssPrefix: pf-v6-c-tabs
2993
3559
  ```html
2994
3560
  <div
2995
3561
  class="pf-v6-c-tabs pf-m-scrollable"
3562
+ aria-label="Help button default example"
2996
3563
  role="region"
2997
3564
  id="help-button-default-example"
2998
3565
  >
@@ -3008,12 +3575,17 @@ cssPrefix: pf-v6-c-tabs
3008
3575
  </span>
3009
3576
  </button>
3010
3577
  </div>
3011
- <ul class="pf-v6-c-tabs__list" role="tablist">
3578
+ <ul
3579
+ class="pf-v6-c-tabs__list"
3580
+ role="tablist"
3581
+ aria-label="Help button default example"
3582
+ >
3012
3583
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
3013
3584
  <button
3014
3585
  type="button"
3015
3586
  class="pf-v6-c-tabs__link"
3016
3587
  role="tab"
3588
+ aria-selected="false"
3017
3589
  id="help-button-default-example-users-link"
3018
3590
  >
3019
3591
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -3037,6 +3609,7 @@ cssPrefix: pf-v6-c-tabs
3037
3609
  type="button"
3038
3610
  class="pf-v6-c-tabs__link"
3039
3611
  role="tab"
3612
+ aria-selected="true"
3040
3613
  id="help-button-default-example-containers-link"
3041
3614
  >
3042
3615
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -3060,6 +3633,7 @@ cssPrefix: pf-v6-c-tabs
3060
3633
  type="button"
3061
3634
  class="pf-v6-c-tabs__link"
3062
3635
  role="tab"
3636
+ aria-selected="false"
3063
3637
  id="help-button-default-example-database-link"
3064
3638
  >
3065
3639
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -3088,6 +3662,7 @@ cssPrefix: pf-v6-c-tabs
3088
3662
  class="pf-v6-c-tabs__link"
3089
3663
  disabled
3090
3664
  role="tab"
3665
+ aria-selected="false"
3091
3666
  id="help-button-default-example-disabled-link"
3092
3667
  >
3093
3668
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -3116,6 +3691,7 @@ cssPrefix: pf-v6-c-tabs
3116
3691
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
3117
3692
  aria-disabled="true"
3118
3693
  role="tab"
3694
+ aria-selected="false"
3119
3695
  id="help-button-default-example-aria-disabled-link"
3120
3696
  >
3121
3697
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -3144,6 +3720,7 @@ cssPrefix: pf-v6-c-tabs
3144
3720
  class="pf-v6-c-tabs__link"
3145
3721
  disabled
3146
3722
  role="tab"
3723
+ aria-selected="false"
3147
3724
  id="help-button-default-example-help-disabled-link"
3148
3725
  >
3149
3726
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -3168,6 +3745,7 @@ cssPrefix: pf-v6-c-tabs
3168
3745
  type="button"
3169
3746
  class="pf-v6-c-tabs__link"
3170
3747
  role="tab"
3748
+ aria-selected="false"
3171
3749
  id="help-button-default-example-network-wired-link"
3172
3750
  >
3173
3751
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -3206,6 +3784,7 @@ cssPrefix: pf-v6-c-tabs
3206
3784
 
3207
3785
  <div
3208
3786
  class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
3787
+ aria-label="Help button box example"
3209
3788
  role="region"
3210
3789
  id="help-button-box-example"
3211
3790
  >
@@ -3221,12 +3800,17 @@ cssPrefix: pf-v6-c-tabs
3221
3800
  </span>
3222
3801
  </button>
3223
3802
  </div>
3224
- <ul class="pf-v6-c-tabs__list" role="tablist">
3803
+ <ul
3804
+ class="pf-v6-c-tabs__list"
3805
+ role="tablist"
3806
+ aria-label="Help button box example"
3807
+ >
3225
3808
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
3226
3809
  <button
3227
3810
  type="button"
3228
3811
  class="pf-v6-c-tabs__link"
3229
3812
  role="tab"
3813
+ aria-selected="false"
3230
3814
  id="help-button-box-example-users-link"
3231
3815
  >
3232
3816
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -3250,6 +3834,7 @@ cssPrefix: pf-v6-c-tabs
3250
3834
  type="button"
3251
3835
  class="pf-v6-c-tabs__link"
3252
3836
  role="tab"
3837
+ aria-selected="true"
3253
3838
  id="help-button-box-example-containers-link"
3254
3839
  >
3255
3840
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -3273,6 +3858,7 @@ cssPrefix: pf-v6-c-tabs
3273
3858
  type="button"
3274
3859
  class="pf-v6-c-tabs__link"
3275
3860
  role="tab"
3861
+ aria-selected="false"
3276
3862
  id="help-button-box-example-database-link"
3277
3863
  >
3278
3864
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -3301,6 +3887,7 @@ cssPrefix: pf-v6-c-tabs
3301
3887
  class="pf-v6-c-tabs__link"
3302
3888
  disabled
3303
3889
  role="tab"
3890
+ aria-selected="false"
3304
3891
  id="help-button-box-example-disabled-link"
3305
3892
  >
3306
3893
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -3329,6 +3916,7 @@ cssPrefix: pf-v6-c-tabs
3329
3916
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
3330
3917
  aria-disabled="true"
3331
3918
  role="tab"
3919
+ aria-selected="false"
3332
3920
  id="help-button-box-example-aria-disabled-link"
3333
3921
  >
3334
3922
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -3357,6 +3945,7 @@ cssPrefix: pf-v6-c-tabs
3357
3945
  class="pf-v6-c-tabs__link"
3358
3946
  disabled
3359
3947
  role="tab"
3948
+ aria-selected="false"
3360
3949
  id="help-button-box-example-help-disabled-link"
3361
3950
  >
3362
3951
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -3381,6 +3970,7 @@ cssPrefix: pf-v6-c-tabs
3381
3970
  type="button"
3382
3971
  class="pf-v6-c-tabs__link"
3383
3972
  role="tab"
3973
+ aria-selected="false"
3384
3974
  id="help-button-box-example-network-wired-link"
3385
3975
  >
3386
3976
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -3419,6 +4009,7 @@ cssPrefix: pf-v6-c-tabs
3419
4009
 
3420
4010
  <div
3421
4011
  class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
4012
+ aria-label="Help button box secondary variant example"
3422
4013
  role="region"
3423
4014
  id="help-button-box-secondary-example"
3424
4015
  >
@@ -3434,12 +4025,17 @@ cssPrefix: pf-v6-c-tabs
3434
4025
  </span>
3435
4026
  </button>
3436
4027
  </div>
3437
- <ul class="pf-v6-c-tabs__list" role="tablist">
4028
+ <ul
4029
+ class="pf-v6-c-tabs__list"
4030
+ role="tablist"
4031
+ aria-label="Help button box secondary variant example"
4032
+ >
3438
4033
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
3439
4034
  <button
3440
4035
  type="button"
3441
4036
  class="pf-v6-c-tabs__link"
3442
4037
  role="tab"
4038
+ aria-selected="false"
3443
4039
  id="help-button-box-secondary-example-users-link"
3444
4040
  >
3445
4041
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -3463,6 +4059,7 @@ cssPrefix: pf-v6-c-tabs
3463
4059
  type="button"
3464
4060
  class="pf-v6-c-tabs__link"
3465
4061
  role="tab"
4062
+ aria-selected="true"
3466
4063
  id="help-button-box-secondary-example-containers-link"
3467
4064
  >
3468
4065
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -3486,6 +4083,7 @@ cssPrefix: pf-v6-c-tabs
3486
4083
  type="button"
3487
4084
  class="pf-v6-c-tabs__link"
3488
4085
  role="tab"
4086
+ aria-selected="false"
3489
4087
  id="help-button-box-secondary-example-database-link"
3490
4088
  >
3491
4089
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -3514,6 +4112,7 @@ cssPrefix: pf-v6-c-tabs
3514
4112
  class="pf-v6-c-tabs__link"
3515
4113
  disabled
3516
4114
  role="tab"
4115
+ aria-selected="false"
3517
4116
  id="help-button-box-secondary-example-disabled-link"
3518
4117
  >
3519
4118
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -3542,6 +4141,7 @@ cssPrefix: pf-v6-c-tabs
3542
4141
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
3543
4142
  aria-disabled="true"
3544
4143
  role="tab"
4144
+ aria-selected="false"
3545
4145
  id="help-button-box-secondary-example-aria-disabled-link"
3546
4146
  >
3547
4147
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -3570,6 +4170,7 @@ cssPrefix: pf-v6-c-tabs
3570
4170
  class="pf-v6-c-tabs__link"
3571
4171
  disabled
3572
4172
  role="tab"
4173
+ aria-selected="false"
3573
4174
  id="help-button-box-secondary-example-help-disabled-link"
3574
4175
  >
3575
4176
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -3594,6 +4195,7 @@ cssPrefix: pf-v6-c-tabs
3594
4195
  type="button"
3595
4196
  class="pf-v6-c-tabs__link"
3596
4197
  role="tab"
4198
+ aria-selected="false"
3597
4199
  id="help-button-box-secondary-example-network-wired-link"
3598
4200
  >
3599
4201
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -3632,6 +4234,7 @@ cssPrefix: pf-v6-c-tabs
3632
4234
 
3633
4235
  <div
3634
4236
  class="pf-v6-c-tabs pf-m-scrollable"
4237
+ aria-label="Help button with icons example"
3635
4238
  role="region"
3636
4239
  id="help-button-icons-text-example"
3637
4240
  >
@@ -3647,12 +4250,17 @@ cssPrefix: pf-v6-c-tabs
3647
4250
  </span>
3648
4251
  </button>
3649
4252
  </div>
3650
- <ul class="pf-v6-c-tabs__list" role="tablist">
4253
+ <ul
4254
+ class="pf-v6-c-tabs__list"
4255
+ role="tablist"
4256
+ aria-label="Help button with icons example"
4257
+ >
3651
4258
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
3652
4259
  <button
3653
4260
  type="button"
3654
4261
  class="pf-v6-c-tabs__link"
3655
4262
  role="tab"
4263
+ aria-selected="false"
3656
4264
  id="help-button-icons-text-example-users-link"
3657
4265
  >
3658
4266
  <span class="pf-v6-c-tabs__item-icon">
@@ -3679,6 +4287,7 @@ cssPrefix: pf-v6-c-tabs
3679
4287
  type="button"
3680
4288
  class="pf-v6-c-tabs__link"
3681
4289
  role="tab"
4290
+ aria-selected="true"
3682
4291
  id="help-button-icons-text-example-containers-link"
3683
4292
  >
3684
4293
  <span class="pf-v6-c-tabs__item-icon">
@@ -3705,6 +4314,7 @@ cssPrefix: pf-v6-c-tabs
3705
4314
  type="button"
3706
4315
  class="pf-v6-c-tabs__link"
3707
4316
  role="tab"
4317
+ aria-selected="false"
3708
4318
  id="help-button-icons-text-example-database-link"
3709
4319
  >
3710
4320
  <span class="pf-v6-c-tabs__item-icon">
@@ -3736,6 +4346,7 @@ cssPrefix: pf-v6-c-tabs
3736
4346
  class="pf-v6-c-tabs__link"
3737
4347
  disabled
3738
4348
  role="tab"
4349
+ aria-selected="false"
3739
4350
  id="help-button-icons-text-example-disabled-link"
3740
4351
  >
3741
4352
  <span class="pf-v6-c-tabs__item-icon">
@@ -3767,6 +4378,7 @@ cssPrefix: pf-v6-c-tabs
3767
4378
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
3768
4379
  aria-disabled="true"
3769
4380
  role="tab"
4381
+ aria-selected="false"
3770
4382
  id="help-button-icons-text-example-aria-disabled-link"
3771
4383
  >
3772
4384
  <span class="pf-v6-c-tabs__item-icon">
@@ -3798,6 +4410,7 @@ cssPrefix: pf-v6-c-tabs
3798
4410
  class="pf-v6-c-tabs__link"
3799
4411
  disabled
3800
4412
  role="tab"
4413
+ aria-selected="false"
3801
4414
  id="help-button-icons-text-example-help-disabled-link"
3802
4415
  >
3803
4416
  <span class="pf-v6-c-tabs__item-icon">
@@ -3825,6 +4438,7 @@ cssPrefix: pf-v6-c-tabs
3825
4438
  type="button"
3826
4439
  class="pf-v6-c-tabs__link"
3827
4440
  role="tab"
4441
+ aria-selected="false"
3828
4442
  id="help-button-icons-text-example-network-wired-link"
3829
4443
  >
3830
4444
  <span class="pf-v6-c-tabs__item-icon">
@@ -3866,6 +4480,7 @@ cssPrefix: pf-v6-c-tabs
3866
4480
 
3867
4481
  <div
3868
4482
  class="pf-v6-c-tabs pf-m-fill"
4483
+ aria-label="Help button filled example"
3869
4484
  role="region"
3870
4485
  id="help-button-filled-example"
3871
4486
  >
@@ -3881,12 +4496,17 @@ cssPrefix: pf-v6-c-tabs
3881
4496
  </span>
3882
4497
  </button>
3883
4498
  </div>
3884
- <ul class="pf-v6-c-tabs__list" role="tablist">
4499
+ <ul
4500
+ class="pf-v6-c-tabs__list"
4501
+ role="tablist"
4502
+ aria-label="Help button filled example"
4503
+ >
3885
4504
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
3886
4505
  <button
3887
4506
  type="button"
3888
4507
  class="pf-v6-c-tabs__link"
3889
4508
  role="tab"
4509
+ aria-selected="false"
3890
4510
  id="help-button-filled-example-users-link"
3891
4511
  >
3892
4512
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -3910,6 +4530,7 @@ cssPrefix: pf-v6-c-tabs
3910
4530
  type="button"
3911
4531
  class="pf-v6-c-tabs__link"
3912
4532
  role="tab"
4533
+ aria-selected="true"
3913
4534
  id="help-button-filled-example-containers-link"
3914
4535
  >
3915
4536
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -3933,6 +4554,7 @@ cssPrefix: pf-v6-c-tabs
3933
4554
  type="button"
3934
4555
  class="pf-v6-c-tabs__link"
3935
4556
  role="tab"
4557
+ aria-selected="false"
3936
4558
  id="help-button-filled-example-database-link"
3937
4559
  >
3938
4560
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -3972,6 +4594,7 @@ cssPrefix: pf-v6-c-tabs
3972
4594
 
3973
4595
  <div
3974
4596
  class="pf-v6-c-tabs pf-m-scrollable"
4597
+ aria-label="Help button with sub tabs example, primary"
3975
4598
  role="region"
3976
4599
  id="help-button-secondary-primary-example"
3977
4600
  >
@@ -3987,12 +4610,17 @@ cssPrefix: pf-v6-c-tabs
3987
4610
  </span>
3988
4611
  </button>
3989
4612
  </div>
3990
- <ul class="pf-v6-c-tabs__list" role="tablist">
4613
+ <ul
4614
+ class="pf-v6-c-tabs__list"
4615
+ role="tablist"
4616
+ aria-label="Help button with sub tabs example, primary"
4617
+ >
3991
4618
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
3992
4619
  <button
3993
4620
  type="button"
3994
4621
  class="pf-v6-c-tabs__link"
3995
4622
  role="tab"
4623
+ aria-selected="false"
3996
4624
  id="help-button-secondary-primary-example-users-link"
3997
4625
  >
3998
4626
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4016,6 +4644,7 @@ cssPrefix: pf-v6-c-tabs
4016
4644
  type="button"
4017
4645
  class="pf-v6-c-tabs__link"
4018
4646
  role="tab"
4647
+ aria-selected="true"
4019
4648
  id="help-button-secondary-primary-example-containers-link"
4020
4649
  >
4021
4650
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4039,6 +4668,7 @@ cssPrefix: pf-v6-c-tabs
4039
4668
  type="button"
4040
4669
  class="pf-v6-c-tabs__link"
4041
4670
  role="tab"
4671
+ aria-selected="false"
4042
4672
  id="help-button-secondary-primary-example-database-link"
4043
4673
  >
4044
4674
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4067,6 +4697,7 @@ cssPrefix: pf-v6-c-tabs
4067
4697
  class="pf-v6-c-tabs__link"
4068
4698
  disabled
4069
4699
  role="tab"
4700
+ aria-selected="false"
4070
4701
  id="help-button-secondary-primary-example-disabled-link"
4071
4702
  >
4072
4703
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -4095,6 +4726,7 @@ cssPrefix: pf-v6-c-tabs
4095
4726
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
4096
4727
  aria-disabled="true"
4097
4728
  role="tab"
4729
+ aria-selected="false"
4098
4730
  id="help-button-secondary-primary-example-aria-disabled-link"
4099
4731
  >
4100
4732
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -4123,6 +4755,7 @@ cssPrefix: pf-v6-c-tabs
4123
4755
  class="pf-v6-c-tabs__link"
4124
4756
  disabled
4125
4757
  role="tab"
4758
+ aria-selected="false"
4126
4759
  id="help-button-secondary-primary-example-help-disabled-link"
4127
4760
  >
4128
4761
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -4147,6 +4780,7 @@ cssPrefix: pf-v6-c-tabs
4147
4780
  type="button"
4148
4781
  class="pf-v6-c-tabs__link"
4149
4782
  role="tab"
4783
+ aria-selected="false"
4150
4784
  id="help-button-secondary-primary-example-network-wired-link"
4151
4785
  >
4152
4786
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -4181,6 +4815,7 @@ cssPrefix: pf-v6-c-tabs
4181
4815
  </div>
4182
4816
  <div
4183
4817
  class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
4818
+ aria-label="Help button with sub tabs example, Containers"
4184
4819
  role="region"
4185
4820
  id="help-button-secondary-secondary-example"
4186
4821
  >
@@ -4196,12 +4831,17 @@ cssPrefix: pf-v6-c-tabs
4196
4831
  </span>
4197
4832
  </button>
4198
4833
  </div>
4199
- <ul class="pf-v6-c-tabs__list" role="tablist">
4834
+ <ul
4835
+ class="pf-v6-c-tabs__list"
4836
+ role="tablist"
4837
+ aria-label="Help button with sub tabs example, Containers"
4838
+ >
4200
4839
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
4201
4840
  <button
4202
4841
  type="button"
4203
4842
  class="pf-v6-c-tabs__link"
4204
4843
  role="tab"
4844
+ aria-selected="false"
4205
4845
  id="help-button-secondary-secondary-example-users-link"
4206
4846
  >
4207
4847
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4225,6 +4865,7 @@ cssPrefix: pf-v6-c-tabs
4225
4865
  type="button"
4226
4866
  class="pf-v6-c-tabs__link"
4227
4867
  role="tab"
4868
+ aria-selected="true"
4228
4869
  id="help-button-secondary-secondary-example-containers-link"
4229
4870
  >
4230
4871
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4248,6 +4889,7 @@ cssPrefix: pf-v6-c-tabs
4248
4889
  type="button"
4249
4890
  class="pf-v6-c-tabs__link"
4250
4891
  role="tab"
4892
+ aria-selected="false"
4251
4893
  id="help-button-secondary-secondary-example-database-link"
4252
4894
  >
4253
4895
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4276,6 +4918,7 @@ cssPrefix: pf-v6-c-tabs
4276
4918
  class="pf-v6-c-tabs__link"
4277
4919
  disabled
4278
4920
  role="tab"
4921
+ aria-selected="false"
4279
4922
  id="help-button-secondary-secondary-example-disabled-link"
4280
4923
  >
4281
4924
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -4304,6 +4947,7 @@ cssPrefix: pf-v6-c-tabs
4304
4947
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
4305
4948
  aria-disabled="true"
4306
4949
  role="tab"
4950
+ aria-selected="false"
4307
4951
  id="help-button-secondary-secondary-example-aria-disabled-link"
4308
4952
  >
4309
4953
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -4332,6 +4976,7 @@ cssPrefix: pf-v6-c-tabs
4332
4976
  class="pf-v6-c-tabs__link"
4333
4977
  disabled
4334
4978
  role="tab"
4979
+ aria-selected="false"
4335
4980
  id="help-button-secondary-secondary-example-help-disabled-link"
4336
4981
  >
4337
4982
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -4356,6 +5001,7 @@ cssPrefix: pf-v6-c-tabs
4356
5001
  type="button"
4357
5002
  class="pf-v6-c-tabs__link"
4358
5003
  role="tab"
5004
+ aria-selected="false"
4359
5005
  id="help-button-secondary-secondary-example-network-wired-link"
4360
5006
  >
4361
5007
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -4396,6 +5042,7 @@ cssPrefix: pf-v6-c-tabs
4396
5042
  ```html
4397
5043
  <div
4398
5044
  class="pf-v6-c-tabs pf-m-scrollable"
5045
+ aria-label="Close button default example"
4399
5046
  role="region"
4400
5047
  id="close-button-default-example"
4401
5048
  >
@@ -4411,12 +5058,17 @@ cssPrefix: pf-v6-c-tabs
4411
5058
  </span>
4412
5059
  </button>
4413
5060
  </div>
4414
- <ul class="pf-v6-c-tabs__list" role="tablist">
5061
+ <ul
5062
+ class="pf-v6-c-tabs__list"
5063
+ role="tablist"
5064
+ aria-label="Close button default example"
5065
+ >
4415
5066
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
4416
5067
  <button
4417
5068
  type="button"
4418
5069
  class="pf-v6-c-tabs__link"
4419
5070
  role="tab"
5071
+ aria-selected="false"
4420
5072
  id="close-button-default-example-users-link"
4421
5073
  >
4422
5074
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4440,6 +5092,7 @@ cssPrefix: pf-v6-c-tabs
4440
5092
  type="button"
4441
5093
  class="pf-v6-c-tabs__link"
4442
5094
  role="tab"
5095
+ aria-selected="true"
4443
5096
  id="close-button-default-example-containers-link"
4444
5097
  >
4445
5098
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4463,6 +5116,7 @@ cssPrefix: pf-v6-c-tabs
4463
5116
  type="button"
4464
5117
  class="pf-v6-c-tabs__link"
4465
5118
  role="tab"
5119
+ aria-selected="false"
4466
5120
  id="close-button-default-example-database-link"
4467
5121
  >
4468
5122
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4491,6 +5145,7 @@ cssPrefix: pf-v6-c-tabs
4491
5145
  class="pf-v6-c-tabs__link"
4492
5146
  disabled
4493
5147
  role="tab"
5148
+ aria-selected="false"
4494
5149
  id="close-button-default-example-disabled-link"
4495
5150
  >
4496
5151
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -4519,6 +5174,7 @@ cssPrefix: pf-v6-c-tabs
4519
5174
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
4520
5175
  aria-disabled="true"
4521
5176
  role="tab"
5177
+ aria-selected="false"
4522
5178
  id="close-button-default-example-aria-disabled-link"
4523
5179
  >
4524
5180
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -4547,6 +5203,7 @@ cssPrefix: pf-v6-c-tabs
4547
5203
  class="pf-v6-c-tabs__link"
4548
5204
  disabled
4549
5205
  role="tab"
5206
+ aria-selected="false"
4550
5207
  id="close-button-default-example-close-disabled-link"
4551
5208
  >
4552
5209
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -4571,6 +5228,7 @@ cssPrefix: pf-v6-c-tabs
4571
5228
  type="button"
4572
5229
  class="pf-v6-c-tabs__link"
4573
5230
  role="tab"
5231
+ aria-selected="false"
4574
5232
  id="close-button-default-example-network-wired-link"
4575
5233
  >
4576
5234
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -4609,6 +5267,7 @@ cssPrefix: pf-v6-c-tabs
4609
5267
 
4610
5268
  <div
4611
5269
  class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
5270
+ aria-label="Close button box example"
4612
5271
  role="region"
4613
5272
  id="close-button-box-example"
4614
5273
  >
@@ -4624,12 +5283,17 @@ cssPrefix: pf-v6-c-tabs
4624
5283
  </span>
4625
5284
  </button>
4626
5285
  </div>
4627
- <ul class="pf-v6-c-tabs__list" role="tablist">
5286
+ <ul
5287
+ class="pf-v6-c-tabs__list"
5288
+ role="tablist"
5289
+ aria-label="Close button box example"
5290
+ >
4628
5291
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
4629
5292
  <button
4630
5293
  type="button"
4631
5294
  class="pf-v6-c-tabs__link"
4632
5295
  role="tab"
5296
+ aria-selected="false"
4633
5297
  id="close-button-box-example-users-link"
4634
5298
  >
4635
5299
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4653,6 +5317,7 @@ cssPrefix: pf-v6-c-tabs
4653
5317
  type="button"
4654
5318
  class="pf-v6-c-tabs__link"
4655
5319
  role="tab"
5320
+ aria-selected="true"
4656
5321
  id="close-button-box-example-containers-link"
4657
5322
  >
4658
5323
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4676,6 +5341,7 @@ cssPrefix: pf-v6-c-tabs
4676
5341
  type="button"
4677
5342
  class="pf-v6-c-tabs__link"
4678
5343
  role="tab"
5344
+ aria-selected="false"
4679
5345
  id="close-button-box-example-database-link"
4680
5346
  >
4681
5347
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4704,6 +5370,7 @@ cssPrefix: pf-v6-c-tabs
4704
5370
  class="pf-v6-c-tabs__link"
4705
5371
  disabled
4706
5372
  role="tab"
5373
+ aria-selected="false"
4707
5374
  id="close-button-box-example-disabled-link"
4708
5375
  >
4709
5376
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -4732,6 +5399,7 @@ cssPrefix: pf-v6-c-tabs
4732
5399
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
4733
5400
  aria-disabled="true"
4734
5401
  role="tab"
5402
+ aria-selected="false"
4735
5403
  id="close-button-box-example-aria-disabled-link"
4736
5404
  >
4737
5405
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -4760,6 +5428,7 @@ cssPrefix: pf-v6-c-tabs
4760
5428
  class="pf-v6-c-tabs__link"
4761
5429
  disabled
4762
5430
  role="tab"
5431
+ aria-selected="false"
4763
5432
  id="close-button-box-example-close-disabled-link"
4764
5433
  >
4765
5434
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -4784,6 +5453,7 @@ cssPrefix: pf-v6-c-tabs
4784
5453
  type="button"
4785
5454
  class="pf-v6-c-tabs__link"
4786
5455
  role="tab"
5456
+ aria-selected="false"
4787
5457
  id="close-button-box-example-network-wired-link"
4788
5458
  >
4789
5459
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -4822,6 +5492,7 @@ cssPrefix: pf-v6-c-tabs
4822
5492
 
4823
5493
  <div
4824
5494
  class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
5495
+ aria-label="Close button box secondary variant example"
4825
5496
  role="region"
4826
5497
  id="close-button-box-secondary-example"
4827
5498
  >
@@ -4837,12 +5508,17 @@ cssPrefix: pf-v6-c-tabs
4837
5508
  </span>
4838
5509
  </button>
4839
5510
  </div>
4840
- <ul class="pf-v6-c-tabs__list" role="tablist">
5511
+ <ul
5512
+ class="pf-v6-c-tabs__list"
5513
+ role="tablist"
5514
+ aria-label="Close button box secondary variant example"
5515
+ >
4841
5516
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
4842
5517
  <button
4843
5518
  type="button"
4844
5519
  class="pf-v6-c-tabs__link"
4845
5520
  role="tab"
5521
+ aria-selected="false"
4846
5522
  id="close-button-box-secondary-example-users-link"
4847
5523
  >
4848
5524
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -4866,6 +5542,7 @@ cssPrefix: pf-v6-c-tabs
4866
5542
  type="button"
4867
5543
  class="pf-v6-c-tabs__link"
4868
5544
  role="tab"
5545
+ aria-selected="true"
4869
5546
  id="close-button-box-secondary-example-containers-link"
4870
5547
  >
4871
5548
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -4889,6 +5566,7 @@ cssPrefix: pf-v6-c-tabs
4889
5566
  type="button"
4890
5567
  class="pf-v6-c-tabs__link"
4891
5568
  role="tab"
5569
+ aria-selected="false"
4892
5570
  id="close-button-box-secondary-example-database-link"
4893
5571
  >
4894
5572
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -4917,6 +5595,7 @@ cssPrefix: pf-v6-c-tabs
4917
5595
  class="pf-v6-c-tabs__link"
4918
5596
  disabled
4919
5597
  role="tab"
5598
+ aria-selected="false"
4920
5599
  id="close-button-box-secondary-example-disabled-link"
4921
5600
  >
4922
5601
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -4945,6 +5624,7 @@ cssPrefix: pf-v6-c-tabs
4945
5624
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
4946
5625
  aria-disabled="true"
4947
5626
  role="tab"
5627
+ aria-selected="false"
4948
5628
  id="close-button-box-secondary-example-aria-disabled-link"
4949
5629
  >
4950
5630
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -4973,6 +5653,7 @@ cssPrefix: pf-v6-c-tabs
4973
5653
  class="pf-v6-c-tabs__link"
4974
5654
  disabled
4975
5655
  role="tab"
5656
+ aria-selected="false"
4976
5657
  id="close-button-box-secondary-example-close-disabled-link"
4977
5658
  >
4978
5659
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -4997,6 +5678,7 @@ cssPrefix: pf-v6-c-tabs
4997
5678
  type="button"
4998
5679
  class="pf-v6-c-tabs__link"
4999
5680
  role="tab"
5681
+ aria-selected="false"
5000
5682
  id="close-button-box-secondary-example-network-wired-link"
5001
5683
  >
5002
5684
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -5035,6 +5717,7 @@ cssPrefix: pf-v6-c-tabs
5035
5717
 
5036
5718
  <div
5037
5719
  class="pf-v6-c-tabs pf-m-scrollable"
5720
+ aria-label="Close button with icons example"
5038
5721
  role="region"
5039
5722
  id="close-button-icons-text-example"
5040
5723
  >
@@ -5050,12 +5733,17 @@ cssPrefix: pf-v6-c-tabs
5050
5733
  </span>
5051
5734
  </button>
5052
5735
  </div>
5053
- <ul class="pf-v6-c-tabs__list" role="tablist">
5736
+ <ul
5737
+ class="pf-v6-c-tabs__list"
5738
+ role="tablist"
5739
+ aria-label="Close button with icons example"
5740
+ >
5054
5741
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
5055
5742
  <button
5056
5743
  type="button"
5057
5744
  class="pf-v6-c-tabs__link"
5058
5745
  role="tab"
5746
+ aria-selected="false"
5059
5747
  id="close-button-icons-text-example-users-link"
5060
5748
  >
5061
5749
  <span class="pf-v6-c-tabs__item-icon">
@@ -5082,6 +5770,7 @@ cssPrefix: pf-v6-c-tabs
5082
5770
  type="button"
5083
5771
  class="pf-v6-c-tabs__link"
5084
5772
  role="tab"
5773
+ aria-selected="true"
5085
5774
  id="close-button-icons-text-example-containers-link"
5086
5775
  >
5087
5776
  <span class="pf-v6-c-tabs__item-icon">
@@ -5108,6 +5797,7 @@ cssPrefix: pf-v6-c-tabs
5108
5797
  type="button"
5109
5798
  class="pf-v6-c-tabs__link"
5110
5799
  role="tab"
5800
+ aria-selected="false"
5111
5801
  id="close-button-icons-text-example-database-link"
5112
5802
  >
5113
5803
  <span class="pf-v6-c-tabs__item-icon">
@@ -5139,6 +5829,7 @@ cssPrefix: pf-v6-c-tabs
5139
5829
  class="pf-v6-c-tabs__link"
5140
5830
  disabled
5141
5831
  role="tab"
5832
+ aria-selected="false"
5142
5833
  id="close-button-icons-text-example-disabled-link"
5143
5834
  >
5144
5835
  <span class="pf-v6-c-tabs__item-icon">
@@ -5170,6 +5861,7 @@ cssPrefix: pf-v6-c-tabs
5170
5861
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
5171
5862
  aria-disabled="true"
5172
5863
  role="tab"
5864
+ aria-selected="false"
5173
5865
  id="close-button-icons-text-example-aria-disabled-link"
5174
5866
  >
5175
5867
  <span class="pf-v6-c-tabs__item-icon">
@@ -5201,6 +5893,7 @@ cssPrefix: pf-v6-c-tabs
5201
5893
  class="pf-v6-c-tabs__link"
5202
5894
  disabled
5203
5895
  role="tab"
5896
+ aria-selected="false"
5204
5897
  id="close-button-icons-text-example-close-disabled-link"
5205
5898
  >
5206
5899
  <span class="pf-v6-c-tabs__item-icon">
@@ -5228,6 +5921,7 @@ cssPrefix: pf-v6-c-tabs
5228
5921
  type="button"
5229
5922
  class="pf-v6-c-tabs__link"
5230
5923
  role="tab"
5924
+ aria-selected="false"
5231
5925
  id="close-button-icons-text-example-network-wired-link"
5232
5926
  >
5233
5927
  <span class="pf-v6-c-tabs__item-icon">
@@ -5269,6 +5963,7 @@ cssPrefix: pf-v6-c-tabs
5269
5963
 
5270
5964
  <div
5271
5965
  class="pf-v6-c-tabs pf-m-fill"
5966
+ aria-label="Close button filled example"
5272
5967
  role="region"
5273
5968
  id="close-button-filled-example"
5274
5969
  >
@@ -5284,12 +5979,17 @@ cssPrefix: pf-v6-c-tabs
5284
5979
  </span>
5285
5980
  </button>
5286
5981
  </div>
5287
- <ul class="pf-v6-c-tabs__list" role="tablist">
5982
+ <ul
5983
+ class="pf-v6-c-tabs__list"
5984
+ role="tablist"
5985
+ aria-label="Close button filled example"
5986
+ >
5288
5987
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
5289
5988
  <button
5290
5989
  type="button"
5291
5990
  class="pf-v6-c-tabs__link"
5292
5991
  role="tab"
5992
+ aria-selected="false"
5293
5993
  id="close-button-filled-example-users-link"
5294
5994
  >
5295
5995
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -5313,6 +6013,7 @@ cssPrefix: pf-v6-c-tabs
5313
6013
  type="button"
5314
6014
  class="pf-v6-c-tabs__link"
5315
6015
  role="tab"
6016
+ aria-selected="true"
5316
6017
  id="close-button-filled-example-containers-link"
5317
6018
  >
5318
6019
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -5336,6 +6037,7 @@ cssPrefix: pf-v6-c-tabs
5336
6037
  type="button"
5337
6038
  class="pf-v6-c-tabs__link"
5338
6039
  role="tab"
6040
+ aria-selected="false"
5339
6041
  id="close-button-filled-example-database-link"
5340
6042
  >
5341
6043
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -5375,6 +6077,7 @@ cssPrefix: pf-v6-c-tabs
5375
6077
 
5376
6078
  <div
5377
6079
  class="pf-v6-c-tabs pf-m-scrollable"
6080
+ aria-label="Close button with sub tabs example, primary"
5378
6081
  role="region"
5379
6082
  id="close-button-secondary-primary-example"
5380
6083
  >
@@ -5390,12 +6093,17 @@ cssPrefix: pf-v6-c-tabs
5390
6093
  </span>
5391
6094
  </button>
5392
6095
  </div>
5393
- <ul class="pf-v6-c-tabs__list" role="tablist">
6096
+ <ul
6097
+ class="pf-v6-c-tabs__list"
6098
+ role="tablist"
6099
+ aria-label="Close button with sub tabs example, primary"
6100
+ >
5394
6101
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
5395
6102
  <button
5396
6103
  type="button"
5397
6104
  class="pf-v6-c-tabs__link"
5398
6105
  role="tab"
6106
+ aria-selected="false"
5399
6107
  id="close-button-secondary-primary-example-users-link"
5400
6108
  >
5401
6109
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -5419,6 +6127,7 @@ cssPrefix: pf-v6-c-tabs
5419
6127
  type="button"
5420
6128
  class="pf-v6-c-tabs__link"
5421
6129
  role="tab"
6130
+ aria-selected="true"
5422
6131
  id="close-button-secondary-primary-example-containers-link"
5423
6132
  >
5424
6133
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -5442,6 +6151,7 @@ cssPrefix: pf-v6-c-tabs
5442
6151
  type="button"
5443
6152
  class="pf-v6-c-tabs__link"
5444
6153
  role="tab"
6154
+ aria-selected="false"
5445
6155
  id="close-button-secondary-primary-example-database-link"
5446
6156
  >
5447
6157
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -5470,6 +6180,7 @@ cssPrefix: pf-v6-c-tabs
5470
6180
  class="pf-v6-c-tabs__link"
5471
6181
  disabled
5472
6182
  role="tab"
6183
+ aria-selected="false"
5473
6184
  id="close-button-secondary-primary-example-disabled-link"
5474
6185
  >
5475
6186
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -5498,6 +6209,7 @@ cssPrefix: pf-v6-c-tabs
5498
6209
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
5499
6210
  aria-disabled="true"
5500
6211
  role="tab"
6212
+ aria-selected="false"
5501
6213
  id="close-button-secondary-primary-example-aria-disabled-link"
5502
6214
  >
5503
6215
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -5526,6 +6238,7 @@ cssPrefix: pf-v6-c-tabs
5526
6238
  class="pf-v6-c-tabs__link"
5527
6239
  disabled
5528
6240
  role="tab"
6241
+ aria-selected="false"
5529
6242
  id="close-button-secondary-primary-example-close-disabled-link"
5530
6243
  >
5531
6244
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -5550,6 +6263,7 @@ cssPrefix: pf-v6-c-tabs
5550
6263
  type="button"
5551
6264
  class="pf-v6-c-tabs__link"
5552
6265
  role="tab"
6266
+ aria-selected="false"
5553
6267
  id="close-button-secondary-primary-example-network-wired-link"
5554
6268
  >
5555
6269
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -5584,6 +6298,7 @@ cssPrefix: pf-v6-c-tabs
5584
6298
  </div>
5585
6299
  <div
5586
6300
  class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
6301
+ aria-label="Close button with sub tabs example, Containers"
5587
6302
  role="region"
5588
6303
  id="close-button-secondary-secondary-example"
5589
6304
  >
@@ -5599,12 +6314,17 @@ cssPrefix: pf-v6-c-tabs
5599
6314
  </span>
5600
6315
  </button>
5601
6316
  </div>
5602
- <ul class="pf-v6-c-tabs__list" role="tablist">
6317
+ <ul
6318
+ class="pf-v6-c-tabs__list"
6319
+ role="tablist"
6320
+ aria-label="Close button with sub tabs example, Containers"
6321
+ >
5603
6322
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
5604
6323
  <button
5605
6324
  type="button"
5606
6325
  class="pf-v6-c-tabs__link"
5607
6326
  role="tab"
6327
+ aria-selected="false"
5608
6328
  id="close-button-secondary-secondary-example-users-link"
5609
6329
  >
5610
6330
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -5628,6 +6348,7 @@ cssPrefix: pf-v6-c-tabs
5628
6348
  type="button"
5629
6349
  class="pf-v6-c-tabs__link"
5630
6350
  role="tab"
6351
+ aria-selected="true"
5631
6352
  id="close-button-secondary-secondary-example-containers-link"
5632
6353
  >
5633
6354
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -5651,6 +6372,7 @@ cssPrefix: pf-v6-c-tabs
5651
6372
  type="button"
5652
6373
  class="pf-v6-c-tabs__link"
5653
6374
  role="tab"
6375
+ aria-selected="false"
5654
6376
  id="close-button-secondary-secondary-example-database-link"
5655
6377
  >
5656
6378
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -5679,6 +6401,7 @@ cssPrefix: pf-v6-c-tabs
5679
6401
  class="pf-v6-c-tabs__link"
5680
6402
  disabled
5681
6403
  role="tab"
6404
+ aria-selected="false"
5682
6405
  id="close-button-secondary-secondary-example-disabled-link"
5683
6406
  >
5684
6407
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -5707,6 +6430,7 @@ cssPrefix: pf-v6-c-tabs
5707
6430
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
5708
6431
  aria-disabled="true"
5709
6432
  role="tab"
6433
+ aria-selected="false"
5710
6434
  id="close-button-secondary-secondary-example-aria-disabled-link"
5711
6435
  >
5712
6436
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -5735,6 +6459,7 @@ cssPrefix: pf-v6-c-tabs
5735
6459
  class="pf-v6-c-tabs__link"
5736
6460
  disabled
5737
6461
  role="tab"
6462
+ aria-selected="false"
5738
6463
  id="close-button-secondary-secondary-example-close-disabled-link"
5739
6464
  >
5740
6465
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -5759,6 +6484,7 @@ cssPrefix: pf-v6-c-tabs
5759
6484
  type="button"
5760
6485
  class="pf-v6-c-tabs__link"
5761
6486
  role="tab"
6487
+ aria-selected="false"
5762
6488
  id="close-button-secondary-secondary-example-network-wired-link"
5763
6489
  >
5764
6490
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -5799,6 +6525,7 @@ cssPrefix: pf-v6-c-tabs
5799
6525
  ```html
5800
6526
  <div
5801
6527
  class="pf-v6-c-tabs pf-m-scrollable"
6528
+ aria-label="Help and close button default example"
5802
6529
  role="region"
5803
6530
  id="help-close-button-default-example"
5804
6531
  >
@@ -5814,12 +6541,17 @@ cssPrefix: pf-v6-c-tabs
5814
6541
  </span>
5815
6542
  </button>
5816
6543
  </div>
5817
- <ul class="pf-v6-c-tabs__list" role="tablist">
6544
+ <ul
6545
+ class="pf-v6-c-tabs__list"
6546
+ role="tablist"
6547
+ aria-label="Help and close button default example"
6548
+ >
5818
6549
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
5819
6550
  <button
5820
6551
  type="button"
5821
6552
  class="pf-v6-c-tabs__link"
5822
6553
  role="tab"
6554
+ aria-selected="false"
5823
6555
  id="help-close-button-default-example-users-link"
5824
6556
  >
5825
6557
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -5857,6 +6589,7 @@ cssPrefix: pf-v6-c-tabs
5857
6589
  type="button"
5858
6590
  class="pf-v6-c-tabs__link"
5859
6591
  role="tab"
6592
+ aria-selected="true"
5860
6593
  id="help-close-button-default-example-containers-link"
5861
6594
  >
5862
6595
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -5894,6 +6627,7 @@ cssPrefix: pf-v6-c-tabs
5894
6627
  type="button"
5895
6628
  class="pf-v6-c-tabs__link"
5896
6629
  role="tab"
6630
+ aria-selected="false"
5897
6631
  id="help-close-button-default-example-database-link"
5898
6632
  >
5899
6633
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -5936,6 +6670,7 @@ cssPrefix: pf-v6-c-tabs
5936
6670
  class="pf-v6-c-tabs__link"
5937
6671
  disabled
5938
6672
  role="tab"
6673
+ aria-selected="false"
5939
6674
  id="help-close-button-default-example-disabled-link"
5940
6675
  >
5941
6676
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -5979,6 +6714,7 @@ cssPrefix: pf-v6-c-tabs
5979
6714
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
5980
6715
  aria-disabled="true"
5981
6716
  role="tab"
6717
+ aria-selected="false"
5982
6718
  id="help-close-button-default-example-aria-disabled-link"
5983
6719
  >
5984
6720
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -6022,6 +6758,7 @@ cssPrefix: pf-v6-c-tabs
6022
6758
  class="pf-v6-c-tabs__link"
6023
6759
  disabled
6024
6760
  role="tab"
6761
+ aria-selected="false"
6025
6762
  id="help-close-button-default-example-help-disabled-link"
6026
6763
  >
6027
6764
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -6064,6 +6801,7 @@ cssPrefix: pf-v6-c-tabs
6064
6801
  class="pf-v6-c-tabs__link"
6065
6802
  disabled
6066
6803
  role="tab"
6804
+ aria-selected="false"
6067
6805
  id="help-close-button-default-example-close-disabled-link"
6068
6806
  >
6069
6807
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -6106,6 +6844,7 @@ cssPrefix: pf-v6-c-tabs
6106
6844
  class="pf-v6-c-tabs__link"
6107
6845
  disabled
6108
6846
  role="tab"
6847
+ aria-selected="false"
6109
6848
  id="help-close-button-default-example-help-close-disabled-link"
6110
6849
  >
6111
6850
  <span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
@@ -6145,6 +6884,7 @@ cssPrefix: pf-v6-c-tabs
6145
6884
  type="button"
6146
6885
  class="pf-v6-c-tabs__link"
6147
6886
  role="tab"
6887
+ aria-selected="false"
6148
6888
  id="help-close-button-default-example-network-wired-link"
6149
6889
  >
6150
6890
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -6197,6 +6937,7 @@ cssPrefix: pf-v6-c-tabs
6197
6937
 
6198
6938
  <div
6199
6939
  class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
6940
+ aria-label="Help and close button box example"
6200
6941
  role="region"
6201
6942
  id="help-close-button-box-example"
6202
6943
  >
@@ -6212,12 +6953,17 @@ cssPrefix: pf-v6-c-tabs
6212
6953
  </span>
6213
6954
  </button>
6214
6955
  </div>
6215
- <ul class="pf-v6-c-tabs__list" role="tablist">
6956
+ <ul
6957
+ class="pf-v6-c-tabs__list"
6958
+ role="tablist"
6959
+ aria-label="Help and close button box example"
6960
+ >
6216
6961
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
6217
6962
  <button
6218
6963
  type="button"
6219
6964
  class="pf-v6-c-tabs__link"
6220
6965
  role="tab"
6966
+ aria-selected="false"
6221
6967
  id="help-close-button-box-example-users-link"
6222
6968
  >
6223
6969
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -6255,6 +7001,7 @@ cssPrefix: pf-v6-c-tabs
6255
7001
  type="button"
6256
7002
  class="pf-v6-c-tabs__link"
6257
7003
  role="tab"
7004
+ aria-selected="true"
6258
7005
  id="help-close-button-box-example-containers-link"
6259
7006
  >
6260
7007
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -6292,6 +7039,7 @@ cssPrefix: pf-v6-c-tabs
6292
7039
  type="button"
6293
7040
  class="pf-v6-c-tabs__link"
6294
7041
  role="tab"
7042
+ aria-selected="false"
6295
7043
  id="help-close-button-box-example-database-link"
6296
7044
  >
6297
7045
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -6334,6 +7082,7 @@ cssPrefix: pf-v6-c-tabs
6334
7082
  class="pf-v6-c-tabs__link"
6335
7083
  disabled
6336
7084
  role="tab"
7085
+ aria-selected="false"
6337
7086
  id="help-close-button-box-example-disabled-link"
6338
7087
  >
6339
7088
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -6377,6 +7126,7 @@ cssPrefix: pf-v6-c-tabs
6377
7126
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
6378
7127
  aria-disabled="true"
6379
7128
  role="tab"
7129
+ aria-selected="false"
6380
7130
  id="help-close-button-box-example-aria-disabled-link"
6381
7131
  >
6382
7132
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -6420,6 +7170,7 @@ cssPrefix: pf-v6-c-tabs
6420
7170
  class="pf-v6-c-tabs__link"
6421
7171
  disabled
6422
7172
  role="tab"
7173
+ aria-selected="false"
6423
7174
  id="help-close-button-box-example-help-disabled-link"
6424
7175
  >
6425
7176
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -6462,6 +7213,7 @@ cssPrefix: pf-v6-c-tabs
6462
7213
  class="pf-v6-c-tabs__link"
6463
7214
  disabled
6464
7215
  role="tab"
7216
+ aria-selected="false"
6465
7217
  id="help-close-button-box-example-close-disabled-link"
6466
7218
  >
6467
7219
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -6504,6 +7256,7 @@ cssPrefix: pf-v6-c-tabs
6504
7256
  class="pf-v6-c-tabs__link"
6505
7257
  disabled
6506
7258
  role="tab"
7259
+ aria-selected="false"
6507
7260
  id="help-close-button-box-example-help-close-disabled-link"
6508
7261
  >
6509
7262
  <span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
@@ -6543,6 +7296,7 @@ cssPrefix: pf-v6-c-tabs
6543
7296
  type="button"
6544
7297
  class="pf-v6-c-tabs__link"
6545
7298
  role="tab"
7299
+ aria-selected="false"
6546
7300
  id="help-close-button-box-example-network-wired-link"
6547
7301
  >
6548
7302
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -6595,6 +7349,7 @@ cssPrefix: pf-v6-c-tabs
6595
7349
 
6596
7350
  <div
6597
7351
  class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
7352
+ aria-label="Help and close button box secondary variant example"
6598
7353
  role="region"
6599
7354
  id="help-close-button-box-secondary-example"
6600
7355
  >
@@ -6610,12 +7365,17 @@ cssPrefix: pf-v6-c-tabs
6610
7365
  </span>
6611
7366
  </button>
6612
7367
  </div>
6613
- <ul class="pf-v6-c-tabs__list" role="tablist">
7368
+ <ul
7369
+ class="pf-v6-c-tabs__list"
7370
+ role="tablist"
7371
+ aria-label="Help and close button box secondary variant example"
7372
+ >
6614
7373
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
6615
7374
  <button
6616
7375
  type="button"
6617
7376
  class="pf-v6-c-tabs__link"
6618
7377
  role="tab"
7378
+ aria-selected="false"
6619
7379
  id="help-close-button-box-secondary-example-users-link"
6620
7380
  >
6621
7381
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -6653,6 +7413,7 @@ cssPrefix: pf-v6-c-tabs
6653
7413
  type="button"
6654
7414
  class="pf-v6-c-tabs__link"
6655
7415
  role="tab"
7416
+ aria-selected="true"
6656
7417
  id="help-close-button-box-secondary-example-containers-link"
6657
7418
  >
6658
7419
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -6690,6 +7451,7 @@ cssPrefix: pf-v6-c-tabs
6690
7451
  type="button"
6691
7452
  class="pf-v6-c-tabs__link"
6692
7453
  role="tab"
7454
+ aria-selected="false"
6693
7455
  id="help-close-button-box-secondary-example-database-link"
6694
7456
  >
6695
7457
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -6732,6 +7494,7 @@ cssPrefix: pf-v6-c-tabs
6732
7494
  class="pf-v6-c-tabs__link"
6733
7495
  disabled
6734
7496
  role="tab"
7497
+ aria-selected="false"
6735
7498
  id="help-close-button-box-secondary-example-disabled-link"
6736
7499
  >
6737
7500
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -6775,6 +7538,7 @@ cssPrefix: pf-v6-c-tabs
6775
7538
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
6776
7539
  aria-disabled="true"
6777
7540
  role="tab"
7541
+ aria-selected="false"
6778
7542
  id="help-close-button-box-secondary-example-aria-disabled-link"
6779
7543
  >
6780
7544
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -6818,6 +7582,7 @@ cssPrefix: pf-v6-c-tabs
6818
7582
  class="pf-v6-c-tabs__link"
6819
7583
  disabled
6820
7584
  role="tab"
7585
+ aria-selected="false"
6821
7586
  id="help-close-button-box-secondary-example-help-disabled-link"
6822
7587
  >
6823
7588
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -6860,6 +7625,7 @@ cssPrefix: pf-v6-c-tabs
6860
7625
  class="pf-v6-c-tabs__link"
6861
7626
  disabled
6862
7627
  role="tab"
7628
+ aria-selected="false"
6863
7629
  id="help-close-button-box-secondary-example-close-disabled-link"
6864
7630
  >
6865
7631
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -6902,6 +7668,7 @@ cssPrefix: pf-v6-c-tabs
6902
7668
  class="pf-v6-c-tabs__link"
6903
7669
  disabled
6904
7670
  role="tab"
7671
+ aria-selected="false"
6905
7672
  id="help-close-button-box-secondary-example-help-close-disabled-link"
6906
7673
  >
6907
7674
  <span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
@@ -6941,6 +7708,7 @@ cssPrefix: pf-v6-c-tabs
6941
7708
  type="button"
6942
7709
  class="pf-v6-c-tabs__link"
6943
7710
  role="tab"
7711
+ aria-selected="false"
6944
7712
  id="help-close-button-box-secondary-example-network-wired-link"
6945
7713
  >
6946
7714
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -6993,6 +7761,7 @@ cssPrefix: pf-v6-c-tabs
6993
7761
 
6994
7762
  <div
6995
7763
  class="pf-v6-c-tabs pf-m-scrollable"
7764
+ aria-label="Help and close button with icons example"
6996
7765
  role="region"
6997
7766
  id="help-close-button-icons-text-example"
6998
7767
  >
@@ -7008,12 +7777,17 @@ cssPrefix: pf-v6-c-tabs
7008
7777
  </span>
7009
7778
  </button>
7010
7779
  </div>
7011
- <ul class="pf-v6-c-tabs__list" role="tablist">
7780
+ <ul
7781
+ class="pf-v6-c-tabs__list"
7782
+ role="tablist"
7783
+ aria-label="Help and close button with icons example"
7784
+ >
7012
7785
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
7013
7786
  <button
7014
7787
  type="button"
7015
7788
  class="pf-v6-c-tabs__link"
7016
7789
  role="tab"
7790
+ aria-selected="false"
7017
7791
  id="help-close-button-icons-text-example-users-link"
7018
7792
  >
7019
7793
  <span class="pf-v6-c-tabs__item-icon">
@@ -7054,6 +7828,7 @@ cssPrefix: pf-v6-c-tabs
7054
7828
  type="button"
7055
7829
  class="pf-v6-c-tabs__link"
7056
7830
  role="tab"
7831
+ aria-selected="true"
7057
7832
  id="help-close-button-icons-text-example-containers-link"
7058
7833
  >
7059
7834
  <span class="pf-v6-c-tabs__item-icon">
@@ -7094,6 +7869,7 @@ cssPrefix: pf-v6-c-tabs
7094
7869
  type="button"
7095
7870
  class="pf-v6-c-tabs__link"
7096
7871
  role="tab"
7872
+ aria-selected="false"
7097
7873
  id="help-close-button-icons-text-example-database-link"
7098
7874
  >
7099
7875
  <span class="pf-v6-c-tabs__item-icon">
@@ -7139,6 +7915,7 @@ cssPrefix: pf-v6-c-tabs
7139
7915
  class="pf-v6-c-tabs__link"
7140
7916
  disabled
7141
7917
  role="tab"
7918
+ aria-selected="false"
7142
7919
  id="help-close-button-icons-text-example-disabled-link"
7143
7920
  >
7144
7921
  <span class="pf-v6-c-tabs__item-icon">
@@ -7185,6 +7962,7 @@ cssPrefix: pf-v6-c-tabs
7185
7962
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
7186
7963
  aria-disabled="true"
7187
7964
  role="tab"
7965
+ aria-selected="false"
7188
7966
  id="help-close-button-icons-text-example-aria-disabled-link"
7189
7967
  >
7190
7968
  <span class="pf-v6-c-tabs__item-icon">
@@ -7231,6 +8009,7 @@ cssPrefix: pf-v6-c-tabs
7231
8009
  class="pf-v6-c-tabs__link"
7232
8010
  disabled
7233
8011
  role="tab"
8012
+ aria-selected="false"
7234
8013
  id="help-close-button-icons-text-example-help-disabled-link"
7235
8014
  >
7236
8015
  <span class="pf-v6-c-tabs__item-icon">
@@ -7276,6 +8055,7 @@ cssPrefix: pf-v6-c-tabs
7276
8055
  class="pf-v6-c-tabs__link"
7277
8056
  disabled
7278
8057
  role="tab"
8058
+ aria-selected="false"
7279
8059
  id="help-close-button-icons-text-example-close-disabled-link"
7280
8060
  >
7281
8061
  <span class="pf-v6-c-tabs__item-icon">
@@ -7321,6 +8101,7 @@ cssPrefix: pf-v6-c-tabs
7321
8101
  class="pf-v6-c-tabs__link"
7322
8102
  disabled
7323
8103
  role="tab"
8104
+ aria-selected="false"
7324
8105
  id="help-close-button-icons-text-example-help-close-disabled-link"
7325
8106
  >
7326
8107
  <span class="pf-v6-c-tabs__item-icon">
@@ -7363,6 +8144,7 @@ cssPrefix: pf-v6-c-tabs
7363
8144
  type="button"
7364
8145
  class="pf-v6-c-tabs__link"
7365
8146
  role="tab"
8147
+ aria-selected="false"
7366
8148
  id="help-close-button-icons-text-example-network-wired-link"
7367
8149
  >
7368
8150
  <span class="pf-v6-c-tabs__item-icon">
@@ -7418,6 +8200,7 @@ cssPrefix: pf-v6-c-tabs
7418
8200
 
7419
8201
  <div
7420
8202
  class="pf-v6-c-tabs pf-m-fill"
8203
+ aria-label="Help and close button filled example"
7421
8204
  role="region"
7422
8205
  id="help-close-button-filled-example"
7423
8206
  >
@@ -7433,12 +8216,17 @@ cssPrefix: pf-v6-c-tabs
7433
8216
  </span>
7434
8217
  </button>
7435
8218
  </div>
7436
- <ul class="pf-v6-c-tabs__list" role="tablist">
8219
+ <ul
8220
+ class="pf-v6-c-tabs__list"
8221
+ role="tablist"
8222
+ aria-label="Help and close button filled example"
8223
+ >
7437
8224
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
7438
8225
  <button
7439
8226
  type="button"
7440
8227
  class="pf-v6-c-tabs__link"
7441
8228
  role="tab"
8229
+ aria-selected="false"
7442
8230
  id="help-close-button-filled-example-users-link"
7443
8231
  >
7444
8232
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -7476,6 +8264,7 @@ cssPrefix: pf-v6-c-tabs
7476
8264
  type="button"
7477
8265
  class="pf-v6-c-tabs__link"
7478
8266
  role="tab"
8267
+ aria-selected="true"
7479
8268
  id="help-close-button-filled-example-containers-link"
7480
8269
  >
7481
8270
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -7513,6 +8302,7 @@ cssPrefix: pf-v6-c-tabs
7513
8302
  type="button"
7514
8303
  class="pf-v6-c-tabs__link"
7515
8304
  role="tab"
8305
+ aria-selected="false"
7516
8306
  id="help-close-button-filled-example-database-link"
7517
8307
  >
7518
8308
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -7566,6 +8356,7 @@ cssPrefix: pf-v6-c-tabs
7566
8356
 
7567
8357
  <div
7568
8358
  class="pf-v6-c-tabs pf-m-scrollable"
8359
+ aria-label="Help and close button with sub tabs example, primary"
7569
8360
  role="region"
7570
8361
  id="help-close-button-secondary-primary-example"
7571
8362
  >
@@ -7581,12 +8372,17 @@ cssPrefix: pf-v6-c-tabs
7581
8372
  </span>
7582
8373
  </button>
7583
8374
  </div>
7584
- <ul class="pf-v6-c-tabs__list" role="tablist">
8375
+ <ul
8376
+ class="pf-v6-c-tabs__list"
8377
+ role="tablist"
8378
+ aria-label="Help and close button with sub tabs example, primary"
8379
+ >
7585
8380
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
7586
8381
  <button
7587
8382
  type="button"
7588
8383
  class="pf-v6-c-tabs__link"
7589
8384
  role="tab"
8385
+ aria-selected="false"
7590
8386
  id="help-close-button-secondary-primary-example-users-link"
7591
8387
  >
7592
8388
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -7624,6 +8420,7 @@ cssPrefix: pf-v6-c-tabs
7624
8420
  type="button"
7625
8421
  class="pf-v6-c-tabs__link"
7626
8422
  role="tab"
8423
+ aria-selected="true"
7627
8424
  id="help-close-button-secondary-primary-example-containers-link"
7628
8425
  >
7629
8426
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -7661,6 +8458,7 @@ cssPrefix: pf-v6-c-tabs
7661
8458
  type="button"
7662
8459
  class="pf-v6-c-tabs__link"
7663
8460
  role="tab"
8461
+ aria-selected="false"
7664
8462
  id="help-close-button-secondary-primary-example-database-link"
7665
8463
  >
7666
8464
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -7703,6 +8501,7 @@ cssPrefix: pf-v6-c-tabs
7703
8501
  class="pf-v6-c-tabs__link"
7704
8502
  disabled
7705
8503
  role="tab"
8504
+ aria-selected="false"
7706
8505
  id="help-close-button-secondary-primary-example-disabled-link"
7707
8506
  >
7708
8507
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -7746,6 +8545,7 @@ cssPrefix: pf-v6-c-tabs
7746
8545
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
7747
8546
  aria-disabled="true"
7748
8547
  role="tab"
8548
+ aria-selected="false"
7749
8549
  id="help-close-button-secondary-primary-example-aria-disabled-link"
7750
8550
  >
7751
8551
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -7789,6 +8589,7 @@ cssPrefix: pf-v6-c-tabs
7789
8589
  class="pf-v6-c-tabs__link"
7790
8590
  disabled
7791
8591
  role="tab"
8592
+ aria-selected="false"
7792
8593
  id="help-close-button-secondary-primary-example-help-disabled-link"
7793
8594
  >
7794
8595
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -7831,6 +8632,7 @@ cssPrefix: pf-v6-c-tabs
7831
8632
  class="pf-v6-c-tabs__link"
7832
8633
  disabled
7833
8634
  role="tab"
8635
+ aria-selected="false"
7834
8636
  id="help-close-button-secondary-primary-example-close-disabled-link"
7835
8637
  >
7836
8638
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -7873,6 +8675,7 @@ cssPrefix: pf-v6-c-tabs
7873
8675
  class="pf-v6-c-tabs__link"
7874
8676
  disabled
7875
8677
  role="tab"
8678
+ aria-selected="false"
7876
8679
  id="help-close-button-secondary-primary-example-help-close-disabled-link"
7877
8680
  >
7878
8681
  <span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
@@ -7912,6 +8715,7 @@ cssPrefix: pf-v6-c-tabs
7912
8715
  type="button"
7913
8716
  class="pf-v6-c-tabs__link"
7914
8717
  role="tab"
8718
+ aria-selected="false"
7915
8719
  id="help-close-button-secondary-primary-example-network-wired-link"
7916
8720
  >
7917
8721
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -7960,6 +8764,7 @@ cssPrefix: pf-v6-c-tabs
7960
8764
  </div>
7961
8765
  <div
7962
8766
  class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
8767
+ aria-label="Help and close button with sub tabs example, Containers"
7963
8768
  role="region"
7964
8769
  id="help-close-button-secondary-secondary-example"
7965
8770
  >
@@ -7975,12 +8780,17 @@ cssPrefix: pf-v6-c-tabs
7975
8780
  </span>
7976
8781
  </button>
7977
8782
  </div>
7978
- <ul class="pf-v6-c-tabs__list" role="tablist">
8783
+ <ul
8784
+ class="pf-v6-c-tabs__list"
8785
+ role="tablist"
8786
+ aria-label="Help and close button with sub tabs example, Containers"
8787
+ >
7979
8788
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
7980
8789
  <button
7981
8790
  type="button"
7982
8791
  class="pf-v6-c-tabs__link"
7983
8792
  role="tab"
8793
+ aria-selected="false"
7984
8794
  id="help-close-button-secondary-secondary-example-users-link"
7985
8795
  >
7986
8796
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -8018,6 +8828,7 @@ cssPrefix: pf-v6-c-tabs
8018
8828
  type="button"
8019
8829
  class="pf-v6-c-tabs__link"
8020
8830
  role="tab"
8831
+ aria-selected="true"
8021
8832
  id="help-close-button-secondary-secondary-example-containers-link"
8022
8833
  >
8023
8834
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -8055,6 +8866,7 @@ cssPrefix: pf-v6-c-tabs
8055
8866
  type="button"
8056
8867
  class="pf-v6-c-tabs__link"
8057
8868
  role="tab"
8869
+ aria-selected="false"
8058
8870
  id="help-close-button-secondary-secondary-example-database-link"
8059
8871
  >
8060
8872
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -8097,6 +8909,7 @@ cssPrefix: pf-v6-c-tabs
8097
8909
  class="pf-v6-c-tabs__link"
8098
8910
  disabled
8099
8911
  role="tab"
8912
+ aria-selected="false"
8100
8913
  id="help-close-button-secondary-secondary-example-disabled-link"
8101
8914
  >
8102
8915
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -8140,6 +8953,7 @@ cssPrefix: pf-v6-c-tabs
8140
8953
  class="pf-v6-c-tabs__link pf-m-aria-disabled"
8141
8954
  aria-disabled="true"
8142
8955
  role="tab"
8956
+ aria-selected="false"
8143
8957
  id="help-close-button-secondary-secondary-example-aria-disabled-link"
8144
8958
  >
8145
8959
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -8183,6 +8997,7 @@ cssPrefix: pf-v6-c-tabs
8183
8997
  class="pf-v6-c-tabs__link"
8184
8998
  disabled
8185
8999
  role="tab"
9000
+ aria-selected="false"
8186
9001
  id="help-close-button-secondary-secondary-example-help-disabled-link"
8187
9002
  >
8188
9003
  <span class="pf-v6-c-tabs__item-text">Help disabled</span>
@@ -8225,6 +9040,7 @@ cssPrefix: pf-v6-c-tabs
8225
9040
  class="pf-v6-c-tabs__link"
8226
9041
  disabled
8227
9042
  role="tab"
9043
+ aria-selected="false"
8228
9044
  id="help-close-button-secondary-secondary-example-close-disabled-link"
8229
9045
  >
8230
9046
  <span class="pf-v6-c-tabs__item-text">Close disabled</span>
@@ -8267,6 +9083,7 @@ cssPrefix: pf-v6-c-tabs
8267
9083
  class="pf-v6-c-tabs__link"
8268
9084
  disabled
8269
9085
  role="tab"
9086
+ aria-selected="false"
8270
9087
  id="help-close-button-secondary-secondary-example-help-close-disabled-link"
8271
9088
  >
8272
9089
  <span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
@@ -8306,6 +9123,7 @@ cssPrefix: pf-v6-c-tabs
8306
9123
  type="button"
8307
9124
  class="pf-v6-c-tabs__link"
8308
9125
  role="tab"
9126
+ aria-selected="false"
8309
9127
  id="help-close-button-secondary-secondary-example-network-wired-link"
8310
9128
  >
8311
9129
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -8362,6 +9180,7 @@ cssPrefix: pf-v6-c-tabs
8362
9180
  ```html
8363
9181
  <div
8364
9182
  class="pf-v6-c-tabs pf-m-scrollable"
9183
+ aria-label="Add button with sub tabs example, primary"
8365
9184
  role="region"
8366
9185
  id="default-tabs-add-tab-button"
8367
9186
  >
@@ -8377,12 +9196,17 @@ cssPrefix: pf-v6-c-tabs
8377
9196
  </span>
8378
9197
  </button>
8379
9198
  </div>
8380
- <ul class="pf-v6-c-tabs__list" role="tablist">
9199
+ <ul
9200
+ class="pf-v6-c-tabs__list"
9201
+ role="tablist"
9202
+ aria-label="Add button with sub tabs example, primary"
9203
+ >
8381
9204
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
8382
9205
  <button
8383
9206
  type="button"
8384
9207
  class="pf-v6-c-tabs__link"
8385
9208
  role="tab"
9209
+ aria-selected="false"
8386
9210
  id="default-tabs-add-tab-button-users-link"
8387
9211
  >
8388
9212
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -8406,6 +9230,7 @@ cssPrefix: pf-v6-c-tabs
8406
9230
  type="button"
8407
9231
  class="pf-v6-c-tabs__link"
8408
9232
  role="tab"
9233
+ aria-selected="true"
8409
9234
  id="default-tabs-add-tab-button-containers-link"
8410
9235
  >
8411
9236
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -8429,6 +9254,7 @@ cssPrefix: pf-v6-c-tabs
8429
9254
  type="button"
8430
9255
  class="pf-v6-c-tabs__link"
8431
9256
  role="tab"
9257
+ aria-selected="false"
8432
9258
  id="default-tabs-add-tab-button-database-link"
8433
9259
  >
8434
9260
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -8453,6 +9279,7 @@ cssPrefix: pf-v6-c-tabs
8453
9279
  type="button"
8454
9280
  class="pf-v6-c-tabs__link"
8455
9281
  role="tab"
9282
+ aria-selected="false"
8456
9283
  id="default-tabs-add-tab-button-server-link"
8457
9284
  >
8458
9285
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -8476,6 +9303,7 @@ cssPrefix: pf-v6-c-tabs
8476
9303
  type="button"
8477
9304
  class="pf-v6-c-tabs__link"
8478
9305
  role="tab"
9306
+ aria-selected="false"
8479
9307
  id="default-tabs-add-tab-button-system-link"
8480
9308
  >
8481
9309
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -8499,6 +9327,7 @@ cssPrefix: pf-v6-c-tabs
8499
9327
  type="button"
8500
9328
  class="pf-v6-c-tabs__link"
8501
9329
  role="tab"
9330
+ aria-selected="false"
8502
9331
  id="default-tabs-add-tab-button-network-wired-link"
8503
9332
  >
8504
9333
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -8544,6 +9373,7 @@ cssPrefix: pf-v6-c-tabs
8544
9373
  </div>
8545
9374
  <div
8546
9375
  class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
9376
+ aria-label="Add button with sub tabs example, Containers"
8547
9377
  role="region"
8548
9378
  id="default-tabs-add-tab-button-subtab"
8549
9379
  >
@@ -8559,12 +9389,17 @@ cssPrefix: pf-v6-c-tabs
8559
9389
  </span>
8560
9390
  </button>
8561
9391
  </div>
8562
- <ul class="pf-v6-c-tabs__list" role="tablist">
9392
+ <ul
9393
+ class="pf-v6-c-tabs__list"
9394
+ role="tablist"
9395
+ aria-label="Add button with sub tabs example, Containers"
9396
+ >
8563
9397
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
8564
9398
  <button
8565
9399
  type="button"
8566
9400
  class="pf-v6-c-tabs__link"
8567
9401
  role="tab"
9402
+ aria-selected="false"
8568
9403
  id="default-tabs-add-tab-button-subtab-users-link"
8569
9404
  >
8570
9405
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -8588,6 +9423,7 @@ cssPrefix: pf-v6-c-tabs
8588
9423
  type="button"
8589
9424
  class="pf-v6-c-tabs__link"
8590
9425
  role="tab"
9426
+ aria-selected="true"
8591
9427
  id="default-tabs-add-tab-button-subtab-containers-link"
8592
9428
  >
8593
9429
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -8611,6 +9447,7 @@ cssPrefix: pf-v6-c-tabs
8611
9447
  type="button"
8612
9448
  class="pf-v6-c-tabs__link"
8613
9449
  role="tab"
9450
+ aria-selected="false"
8614
9451
  id="default-tabs-add-tab-button-subtab-database-link"
8615
9452
  >
8616
9453
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -8635,6 +9472,7 @@ cssPrefix: pf-v6-c-tabs
8635
9472
  type="button"
8636
9473
  class="pf-v6-c-tabs__link"
8637
9474
  role="tab"
9475
+ aria-selected="false"
8638
9476
  id="default-tabs-add-tab-button-subtab-server-link"
8639
9477
  >
8640
9478
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -8658,6 +9496,7 @@ cssPrefix: pf-v6-c-tabs
8658
9496
  type="button"
8659
9497
  class="pf-v6-c-tabs__link"
8660
9498
  role="tab"
9499
+ aria-selected="false"
8661
9500
  id="default-tabs-add-tab-button-subtab-system-link"
8662
9501
  >
8663
9502
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -8681,6 +9520,7 @@ cssPrefix: pf-v6-c-tabs
8681
9520
  type="button"
8682
9521
  class="pf-v6-c-tabs__link"
8683
9522
  role="tab"
9523
+ aria-selected="false"
8684
9524
  id="default-tabs-add-tab-button-subtab-network-wired-link"
8685
9525
  >
8686
9526
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -8730,6 +9570,7 @@ cssPrefix: pf-v6-c-tabs
8730
9570
 
8731
9571
  <div
8732
9572
  class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
9573
+ aria-label="Add button box example"
8733
9574
  role="region"
8734
9575
  id="box-tabs-add-tab-button"
8735
9576
  >
@@ -8745,12 +9586,17 @@ cssPrefix: pf-v6-c-tabs
8745
9586
  </span>
8746
9587
  </button>
8747
9588
  </div>
8748
- <ul class="pf-v6-c-tabs__list" role="tablist">
9589
+ <ul
9590
+ class="pf-v6-c-tabs__list"
9591
+ role="tablist"
9592
+ aria-label="Add button box example"
9593
+ >
8749
9594
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
8750
9595
  <button
8751
9596
  type="button"
8752
9597
  class="pf-v6-c-tabs__link"
8753
9598
  role="tab"
9599
+ aria-selected="false"
8754
9600
  id="box-tabs-add-tab-button-users-link"
8755
9601
  >
8756
9602
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -8774,6 +9620,7 @@ cssPrefix: pf-v6-c-tabs
8774
9620
  type="button"
8775
9621
  class="pf-v6-c-tabs__link"
8776
9622
  role="tab"
9623
+ aria-selected="true"
8777
9624
  id="box-tabs-add-tab-button-containers-link"
8778
9625
  >
8779
9626
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -8797,6 +9644,7 @@ cssPrefix: pf-v6-c-tabs
8797
9644
  type="button"
8798
9645
  class="pf-v6-c-tabs__link"
8799
9646
  role="tab"
9647
+ aria-selected="false"
8800
9648
  id="box-tabs-add-tab-button-database-link"
8801
9649
  >
8802
9650
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -8821,6 +9669,7 @@ cssPrefix: pf-v6-c-tabs
8821
9669
  type="button"
8822
9670
  class="pf-v6-c-tabs__link"
8823
9671
  role="tab"
9672
+ aria-selected="false"
8824
9673
  id="box-tabs-add-tab-button-server-link"
8825
9674
  >
8826
9675
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -8844,6 +9693,7 @@ cssPrefix: pf-v6-c-tabs
8844
9693
  type="button"
8845
9694
  class="pf-v6-c-tabs__link"
8846
9695
  role="tab"
9696
+ aria-selected="false"
8847
9697
  id="box-tabs-add-tab-button-system-link"
8848
9698
  >
8849
9699
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -8867,6 +9717,7 @@ cssPrefix: pf-v6-c-tabs
8867
9717
  type="button"
8868
9718
  class="pf-v6-c-tabs__link"
8869
9719
  role="tab"
9720
+ aria-selected="false"
8870
9721
  id="box-tabs-add-tab-button-network-wired-link"
8871
9722
  >
8872
9723
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -8916,6 +9767,7 @@ cssPrefix: pf-v6-c-tabs
8916
9767
 
8917
9768
  <div
8918
9769
  class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
9770
+ aria-label="Add button box secondary variant example"
8919
9771
  role="region"
8920
9772
  id="box-tabs-add-tab-button-secondary "
8921
9773
  >
@@ -8931,12 +9783,17 @@ cssPrefix: pf-v6-c-tabs
8931
9783
  </span>
8932
9784
  </button>
8933
9785
  </div>
8934
- <ul class="pf-v6-c-tabs__list" role="tablist">
9786
+ <ul
9787
+ class="pf-v6-c-tabs__list"
9788
+ role="tablist"
9789
+ aria-label="Add button box secondary variant example"
9790
+ >
8935
9791
  <li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
8936
9792
  <button
8937
9793
  type="button"
8938
9794
  class="pf-v6-c-tabs__link"
8939
9795
  role="tab"
9796
+ aria-selected="false"
8940
9797
  id="box-tabs-add-tab-button-secondary -users-link"
8941
9798
  >
8942
9799
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -8960,6 +9817,7 @@ cssPrefix: pf-v6-c-tabs
8960
9817
  type="button"
8961
9818
  class="pf-v6-c-tabs__link"
8962
9819
  role="tab"
9820
+ aria-selected="true"
8963
9821
  id="box-tabs-add-tab-button-secondary -containers-link"
8964
9822
  >
8965
9823
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -8983,6 +9841,7 @@ cssPrefix: pf-v6-c-tabs
8983
9841
  type="button"
8984
9842
  class="pf-v6-c-tabs__link"
8985
9843
  role="tab"
9844
+ aria-selected="false"
8986
9845
  id="box-tabs-add-tab-button-secondary -database-link"
8987
9846
  >
8988
9847
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -9007,6 +9866,7 @@ cssPrefix: pf-v6-c-tabs
9007
9866
  type="button"
9008
9867
  class="pf-v6-c-tabs__link"
9009
9868
  role="tab"
9869
+ aria-selected="false"
9010
9870
  id="box-tabs-add-tab-button-secondary -server-link"
9011
9871
  >
9012
9872
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -9030,6 +9890,7 @@ cssPrefix: pf-v6-c-tabs
9030
9890
  type="button"
9031
9891
  class="pf-v6-c-tabs__link"
9032
9892
  role="tab"
9893
+ aria-selected="false"
9033
9894
  id="box-tabs-add-tab-button-secondary -system-link"
9034
9895
  >
9035
9896
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -9053,6 +9914,7 @@ cssPrefix: pf-v6-c-tabs
9053
9914
  type="button"
9054
9915
  class="pf-v6-c-tabs__link"
9055
9916
  role="tab"
9917
+ aria-selected="false"
9056
9918
  id="box-tabs-add-tab-button-secondary -network-wired-link"
9057
9919
  >
9058
9920
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -9112,6 +9974,7 @@ To animate the current tab accent, you must set the following variables on the `
9112
9974
  <div
9113
9975
  class="pf-v6-c-tabs pf-m-animate-current"
9114
9976
  style="--pf-v6-c-tabs--link-accent--start: 0px; --pf-v6-c-tabs--link-accent--length: 67px;"
9977
+ aria-label="Animate default example"
9115
9978
  role="region"
9116
9979
  id="tabs-animate-current-default"
9117
9980
  >
@@ -9127,7 +9990,11 @@ To animate the current tab accent, you must set the following variables on the `
9127
9990
  </span>
9128
9991
  </button>
9129
9992
  </div>
9130
- <ul class="pf-v6-c-tabs__list" role="tablist">
9993
+ <ul
9994
+ class="pf-v6-c-tabs__list"
9995
+ role="tablist"
9996
+ aria-label="Animate default example"
9997
+ >
9131
9998
  <li class="pf-v6-c-tabs__item" role="presentation">
9132
9999
  <button
9133
10000
  type="button"
@@ -9161,6 +10028,7 @@ To animate the current tab accent, you must set the following variables on the `
9161
10028
  }
9162
10029
  )()"
9163
10030
  role="tab"
10031
+ aria-selected="false"
9164
10032
  id="tabs-animate-current-default-users-link"
9165
10033
  >
9166
10034
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -9199,6 +10067,7 @@ To animate the current tab accent, you must set the following variables on the `
9199
10067
  }
9200
10068
  )()"
9201
10069
  role="tab"
10070
+ aria-selected="true"
9202
10071
  id="tabs-animate-current-default-containers-link"
9203
10072
  >
9204
10073
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -9237,6 +10106,7 @@ To animate the current tab accent, you must set the following variables on the `
9237
10106
  }
9238
10107
  )()"
9239
10108
  role="tab"
10109
+ aria-selected="false"
9240
10110
  id="tabs-animate-current-default-database-link"
9241
10111
  >
9242
10112
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -9277,6 +10147,7 @@ To animate the current tab accent, you must set the following variables on the `
9277
10147
  }
9278
10148
  )()"
9279
10149
  role="tab"
10150
+ aria-selected="false"
9280
10151
  id="tabs-animate-current-default-disabled-link"
9281
10152
  >
9282
10153
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -9316,6 +10187,7 @@ To animate the current tab accent, you must set the following variables on the `
9316
10187
  )()"
9317
10188
  aria-disabled="true"
9318
10189
  role="tab"
10190
+ aria-selected="false"
9319
10191
  id="tabs-animate-current-default-aria-disabled-link"
9320
10192
  >
9321
10193
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -9354,6 +10226,7 @@ To animate the current tab accent, you must set the following variables on the `
9354
10226
  }
9355
10227
  )()"
9356
10228
  role="tab"
10229
+ aria-selected="false"
9357
10230
  id="tabs-animate-current-default-network-wired-link"
9358
10231
  >
9359
10232
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -9383,6 +10256,7 @@ To animate the current tab accent, you must set the following variables on the `
9383
10256
  <div
9384
10257
  class="pf-v6-c-tabs pf-m-animate-current pf-m-scrollable"
9385
10258
  style="--pf-v6-c-tabs--link-accent--start: 0px; --pf-v6-c-tabs--link-accent--length: 67px;"
10259
+ aria-label="Animate with sub tabs example, primary"
9386
10260
  role="region"
9387
10261
  id="tabs-animate-current-subtabs"
9388
10262
  >
@@ -9397,7 +10271,11 @@ To animate the current tab accent, you must set the following variables on the `
9397
10271
  </span>
9398
10272
  </button>
9399
10273
  </div>
9400
- <ul class="pf-v6-c-tabs__list" role="tablist">
10274
+ <ul
10275
+ class="pf-v6-c-tabs__list"
10276
+ role="tablist"
10277
+ aria-label="Animate with sub tabs example, primary"
10278
+ >
9401
10279
  <li class="pf-v6-c-tabs__item" role="presentation">
9402
10280
  <button
9403
10281
  type="button"
@@ -9431,6 +10309,7 @@ To animate the current tab accent, you must set the following variables on the `
9431
10309
  }
9432
10310
  )()"
9433
10311
  role="tab"
10312
+ aria-selected="false"
9434
10313
  id="tabs-animate-current-subtabs-users-link"
9435
10314
  >
9436
10315
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -9469,6 +10348,7 @@ To animate the current tab accent, you must set the following variables on the `
9469
10348
  }
9470
10349
  )()"
9471
10350
  role="tab"
10351
+ aria-selected="true"
9472
10352
  id="tabs-animate-current-subtabs-containers-link"
9473
10353
  >
9474
10354
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -9507,6 +10387,7 @@ To animate the current tab accent, you must set the following variables on the `
9507
10387
  }
9508
10388
  )()"
9509
10389
  role="tab"
10390
+ aria-selected="false"
9510
10391
  id="tabs-animate-current-subtabs-database-link"
9511
10392
  >
9512
10393
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -9546,6 +10427,7 @@ To animate the current tab accent, you must set the following variables on the `
9546
10427
  }
9547
10428
  )()"
9548
10429
  role="tab"
10430
+ aria-selected="false"
9549
10431
  id="tabs-animate-current-subtabs-server-link"
9550
10432
  >
9551
10433
  <span class="pf-v6-c-tabs__item-text">Server</span>
@@ -9584,6 +10466,7 @@ To animate the current tab accent, you must set the following variables on the `
9584
10466
  }
9585
10467
  )()"
9586
10468
  role="tab"
10469
+ aria-selected="false"
9587
10470
  id="tabs-animate-current-subtabs-system-link"
9588
10471
  >
9589
10472
  <span class="pf-v6-c-tabs__item-text">System</span>
@@ -9622,6 +10505,7 @@ To animate the current tab accent, you must set the following variables on the `
9622
10505
  }
9623
10506
  )()"
9624
10507
  role="tab"
10508
+ aria-selected="false"
9625
10509
  id="tabs-animate-current-subtabs-network-wired-link"
9626
10510
  >
9627
10511
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -9645,6 +10529,7 @@ To animate the current tab accent, you must set the following variables on the `
9645
10529
  <div
9646
10530
  class="pf-v6-c-tabs pf-m-subtab pf-m-animate-current pf-m-scrollable"
9647
10531
  style="--pf-v6-c-tabs--link-accent--start: 0px; --pf-v6-c-tabs--link-accent--length: 63px;"
10532
+ aria-label="Animate with sub tabs example, Users"
9648
10533
  role="region"
9649
10534
  id="tabs-animate-current-subtabs-sub"
9650
10535
  >
@@ -9659,7 +10544,11 @@ To animate the current tab accent, you must set the following variables on the `
9659
10544
  </span>
9660
10545
  </button>
9661
10546
  </div>
9662
- <ul class="pf-v6-c-tabs__list" role="tablist">
10547
+ <ul
10548
+ class="pf-v6-c-tabs__list"
10549
+ role="tablist"
10550
+ aria-label="Animate with sub tabs example, Users"
10551
+ >
9663
10552
  <li class="pf-v6-c-tabs__item" role="presentation">
9664
10553
  <button
9665
10554
  type="button"
@@ -9693,6 +10582,7 @@ To animate the current tab accent, you must set the following variables on the `
9693
10582
  }
9694
10583
  )()"
9695
10584
  role="tab"
10585
+ aria-selected="false"
9696
10586
  id="tabs-animate-current-subtabs-sub-sub-1-link"
9697
10587
  >
9698
10588
  <span class="pf-v6-c-tabs__item-text">Item 1</span>
@@ -9731,6 +10621,7 @@ To animate the current tab accent, you must set the following variables on the `
9731
10621
  }
9732
10622
  )()"
9733
10623
  role="tab"
10624
+ aria-selected="false"
9734
10625
  id="tabs-animate-current-subtabs-sub-sub-2-link"
9735
10626
  >
9736
10627
  <span class="pf-v6-c-tabs__item-text">Item 2</span>
@@ -9769,6 +10660,7 @@ To animate the current tab accent, you must set the following variables on the `
9769
10660
  }
9770
10661
  )()"
9771
10662
  role="tab"
10663
+ aria-selected="true"
9772
10664
  id="tabs-animate-current-subtabs-sub-sub-3-link"
9773
10665
  >
9774
10666
  <span class="pf-v6-c-tabs__item-text">Item 3</span>
@@ -9808,6 +10700,7 @@ To animate the current tab accent, you must set the following variables on the `
9808
10700
  }
9809
10701
  )()"
9810
10702
  role="tab"
10703
+ aria-selected="false"
9811
10704
  id="tabs-animate-current-subtabs-sub-sub-4-link"
9812
10705
  >
9813
10706
  <span class="pf-v6-c-tabs__item-text">Item 4</span>
@@ -9846,6 +10739,7 @@ To animate the current tab accent, you must set the following variables on the `
9846
10739
  }
9847
10740
  )()"
9848
10741
  role="tab"
10742
+ aria-selected="false"
9849
10743
  id="tabs-animate-current-subtabs-sub-sub-5-link"
9850
10744
  >
9851
10745
  <span class="pf-v6-c-tabs__item-text">Item 5</span>
@@ -9884,6 +10778,7 @@ To animate the current tab accent, you must set the following variables on the `
9884
10778
  }
9885
10779
  )()"
9886
10780
  role="tab"
10781
+ aria-selected="false"
9887
10782
  id="tabs-animate-current-subtabs-sub-sub-6-link"
9888
10783
  >
9889
10784
  <span class="pf-v6-c-tabs__item-text">Item 6</span>
@@ -9912,6 +10807,7 @@ To animate the current tab accent, you must set the following variables on the `
9912
10807
  <div
9913
10808
  class="pf-v6-c-tabs pf-m-animate-current pf-m-fill"
9914
10809
  style="--pf-v6-c-tabs--link-accent--start: 0px; --pf-v6-c-tabs--link-accent--length: 253px;"
10810
+ aria-label="Animate filled example"
9915
10811
  role="region"
9916
10812
  id="tabs-animate-current-filled"
9917
10813
  >
@@ -9927,7 +10823,11 @@ To animate the current tab accent, you must set the following variables on the `
9927
10823
  </span>
9928
10824
  </button>
9929
10825
  </div>
9930
- <ul class="pf-v6-c-tabs__list" role="tablist">
10826
+ <ul
10827
+ class="pf-v6-c-tabs__list"
10828
+ role="tablist"
10829
+ aria-label="Animate filled example"
10830
+ >
9931
10831
  <li class="pf-v6-c-tabs__item" role="presentation">
9932
10832
  <button
9933
10833
  type="button"
@@ -9961,6 +10861,7 @@ To animate the current tab accent, you must set the following variables on the `
9961
10861
  }
9962
10862
  )()"
9963
10863
  role="tab"
10864
+ aria-selected="false"
9964
10865
  id="tabs-animate-current-filled-users-link"
9965
10866
  >
9966
10867
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -9999,6 +10900,7 @@ To animate the current tab accent, you must set the following variables on the `
9999
10900
  }
10000
10901
  )()"
10001
10902
  role="tab"
10903
+ aria-selected="true"
10002
10904
  id="tabs-animate-current-filled-containers-link"
10003
10905
  >
10004
10906
  <span class="pf-v6-c-tabs__item-text">Containers</span>
@@ -10037,6 +10939,7 @@ To animate the current tab accent, you must set the following variables on the `
10037
10939
  }
10038
10940
  )()"
10039
10941
  role="tab"
10942
+ aria-selected="false"
10040
10943
  id="tabs-animate-current-filled-database-link"
10041
10944
  >
10042
10945
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -10066,10 +10969,15 @@ To animate the current tab accent, you must set the following variables on the `
10066
10969
  <div
10067
10970
  class="pf-v6-c-tabs pf-m-vertical pf-m-animate-current"
10068
10971
  style="--pf-v6-c-tabs--link-accent--start: 8px; --pf-v6-c-tabs--link-accent--length: 45px;"
10972
+ aria-label="Animate vertical example"
10069
10973
  role="region"
10070
10974
  id="tabs-animate-current-vertical"
10071
10975
  >
10072
- <ul class="pf-v6-c-tabs__list" role="tablist">
10976
+ <ul
10977
+ class="pf-v6-c-tabs__list"
10978
+ role="tablist"
10979
+ aria-label="Animate vertical example"
10980
+ >
10073
10981
  <li class="pf-v6-c-tabs__item" role="presentation">
10074
10982
  <button
10075
10983
  type="button"
@@ -10103,6 +11011,7 @@ To animate the current tab accent, you must set the following variables on the `
10103
11011
  }
10104
11012
  )()"
10105
11013
  role="tab"
11014
+ aria-selected="false"
10106
11015
  id="tabs-animate-current-vertical-users-link"
10107
11016
  >
10108
11017
  <span class="pf-v6-c-tabs__item-text">Users</span>
@@ -10141,6 +11050,7 @@ To animate the current tab accent, you must set the following variables on the `
10141
11050
  }
10142
11051
  )()"
10143
11052
  role="tab"
11053
+ aria-selected="true"
10144
11054
  id="tabs-animate-current-vertical-containers-link"
10145
11055
  >
10146
11056
  <span class="pf-v6-c-tabs__item-text">
@@ -10182,6 +11092,7 @@ To animate the current tab accent, you must set the following variables on the `
10182
11092
  }
10183
11093
  )()"
10184
11094
  role="tab"
11095
+ aria-selected="false"
10185
11096
  id="tabs-animate-current-vertical-database-link"
10186
11097
  >
10187
11098
  <span class="pf-v6-c-tabs__item-text">Database</span>
@@ -10222,6 +11133,7 @@ To animate the current tab accent, you must set the following variables on the `
10222
11133
  }
10223
11134
  )()"
10224
11135
  role="tab"
11136
+ aria-selected="false"
10225
11137
  id="tabs-animate-current-vertical-disabled-link"
10226
11138
  >
10227
11139
  <span class="pf-v6-c-tabs__item-text">Disabled</span>
@@ -10261,6 +11173,7 @@ To animate the current tab accent, you must set the following variables on the `
10261
11173
  )()"
10262
11174
  aria-disabled="true"
10263
11175
  role="tab"
11176
+ aria-selected="false"
10264
11177
  id="tabs-animate-current-vertical-aria-disabled-link"
10265
11178
  >
10266
11179
  <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
@@ -10299,6 +11212,7 @@ To animate the current tab accent, you must set the following variables on the `
10299
11212
  }
10300
11213
  )()"
10301
11214
  role="tab"
11215
+ aria-selected="false"
10302
11216
  id="tabs-animate-current-vertical-network-wired-link"
10303
11217
  >
10304
11218
  <span class="pf-v6-c-tabs__item-text">Network</span>
@@ -10465,16 +11379,17 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
10465
11379
  | `.pf-m-box` | `.pf-v6-c-tabs` | Applies box styling to the tab component. |
10466
11380
  | `.pf-m-vertical` | `.pf-v6-c-tabs` | Applies vertical styling to the tab component. |
10467
11381
  | `.pf-m-fill` | `.pf-v6-c-tabs` | Modifies the tabs to fill the available space. |
10468
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |
11382
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
10469
11383
  | `.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
10470
11384
  | `.pf-m-secondary` | `.pf-v6-c-tabs.pf-m-box` | Modifies the tabs component tab background colors for the box variant. |
10471
- | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** works with vertical tabs only. |
10472
- | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/tokens/all-patternfly-tokens). |
11385
+ | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** works with vertical tabs only. |
11386
+ | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
10473
11387
  | `.pf-m-expanded` | `.pf-v6-c-tabs` | Modifies the expandable tabs component for the expanded state. |
10474
11388
  | `.pf-m-animate-current` | `.pf-v6-c-tabs` | Modifies tabs to animate movement of the current tab accent line. |
10475
11389
  | `.pf-m-initializing-accent` | `.pf-v6-c-tabs.pf-m-animate-current` | Modifies tabs styles while initializing the "current" tab's accent styles. |
10476
11390
  | `--pf-v6-c-tabs--link-accent--start` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the "start" inset of the current tab's accent. |
10477
11391
  | `--pf-v6-c-tabs--link-accent--length` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the length of the current tab's accent. |
11392
+ | `.pf-m-nav` | `.pf-v6-c-tabs` | Applies site navigation styling to the tab component. |
10478
11393
  | `.pf-m-current` | `.pf-v6-c-tabs__item` | Indicates that a tab item is currently selected. |
10479
11394
  | `.pf-m-action` | `.pf-v6-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
10480
11395
  | `.pf-m-overflow` | `.pf-v6-c-tabs__item` | Applies overflow menu styling to a tab item. |