@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.
- package/README.md +1 -1
- package/assets/images/RHAiExperienceIcon.svg +27 -0
- package/assets/images/RHAutomationsLogo.svg +96 -0
- package/assets/images/RHServerStackIcon.svg +16 -0
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--rh-wallpaper-dark.png +0 -0
- package/assets/images/compass--rh-wallpaper-light.png +0 -0
- package/assets/images/compass--wallpaper-dark.png +0 -0
- package/assets/images/compass--wallpaper-light.png +0 -0
- package/base/normalize.scss +7 -0
- package/base/patternfly-common.css +46 -0
- package/base/patternfly-common.scss +56 -0
- package/base/patternfly-variables.css +42 -0
- package/base/tokens/tokens-local.scss +66 -0
- package/components/Accordion/accordion.scss +0 -1
- package/components/ActionList/action-list.css +2 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Button/button.css +34 -4
- package/components/Button/button.scss +40 -4
- package/components/Card/card.css +12 -0
- package/components/Card/card.scss +15 -1
- package/components/Compass/compass.css +306 -0
- package/components/Compass/compass.scss +337 -0
- package/components/DataList/data-list.css +5 -1
- package/components/DataList/data-list.scss +6 -1
- package/components/Drawer/drawer.css +43 -3
- package/components/Drawer/drawer.scss +52 -4
- package/components/ExpandableSection/expandable-section.css +3 -0
- package/components/ExpandableSection/expandable-section.scss +3 -0
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/MenuToggle/menu-toggle.css +4 -0
- package/components/MenuToggle/menu-toggle.scss +5 -0
- package/components/Table/table.css +3 -0
- package/components/Table/table.scss +5 -0
- package/components/Tabs/tabs.css +16 -1
- package/components/Tabs/tabs.scss +21 -1
- package/components/_index.css +578 -84
- package/components/_index.scss +3 -1
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Button/examples/Button.md +116 -0
- package/docs/components/Card/examples/Card.md +154 -0
- package/docs/components/Compass/examples/Compass.css +11 -0
- package/docs/components/Compass/examples/Compass.md +91 -0
- package/docs/components/DataList/examples/DataList.md +184 -188
- package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +83 -17
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/components/Icon/examples/Icon.md +1 -1
- package/docs/components/InputGroup/examples/InputGroup.md +1 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
- package/docs/components/Masthead/examples/masthead.md +1 -1
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
- package/docs/components/Page/examples/Page.md +2 -2
- package/docs/components/Pagination/examples/Pagination.md +3 -3
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Table/examples/Table.md +91 -3
- package/docs/components/Tabs/examples/Tabs.md +998 -83
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +15 -15
- package/docs/demos/Card/examples/Card.md +14 -2
- package/docs/demos/Compass/examples/Compass.md +6246 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
- package/docs/demos/DescriptionList/examples/DescriptionList.md +42 -35
- package/docs/demos/Drawer/examples/Drawer.md +42 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +143 -165
- package/docs/demos/Tabs/examples/Tabs.md +72 -9
- package/docs/demos/Wizard/examples/Wizard.md +31 -34
- package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
- package/docs/layouts/Flex/examples/Flex.css +3 -3
- package/docs/layouts/Flex/examples/Flex.md +3 -2
- package/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/docs/layouts/Gallery/examples/Gallery.md +4 -3
- package/docs/layouts/Grid/examples/Grid.css +1 -1
- package/docs/layouts/Grid/examples/Grid.md +6 -5
- package/docs/layouts/Level/examples/Level.css +3 -3
- package/docs/layouts/Level/examples/Level.md +2 -1
- package/docs/layouts/Split/examples/Split.css +1 -1
- package/docs/layouts/Split/examples/Split.md +2 -1
- package/docs/layouts/Stack/examples/Stack.css +3 -3
- package/docs/layouts/Stack/examples/Stack.md +2 -1
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +3 -2
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
- package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
- package/docs/utilities/Display/examples/Display.css +1 -1
- package/docs/utilities/Display/examples/Display.md +3 -2
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +3 -2
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +3 -2
- package/docs/utilities/Sizing/examples/Sizing.md +8 -7
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +3 -2
- package/docs/utilities/Text/examples/Text.md +5 -4
- package/icons/PfIcons/add-circle-o.svg +4 -0
- package/icons/PfIcons/ansible-tower.svg +4 -0
- package/icons/PfIcons/applications.svg +4 -0
- package/icons/PfIcons/arrow.svg +4 -0
- package/icons/PfIcons/asleep.svg +4 -0
- package/icons/PfIcons/attention-bell.svg +4 -0
- package/icons/PfIcons/automation.svg +4 -0
- package/icons/PfIcons/bell.svg +4 -0
- package/icons/PfIcons/blueprint.svg +4 -0
- package/icons/PfIcons/build.svg +4 -0
- package/icons/PfIcons/builder-image.svg +4 -0
- package/icons/PfIcons/bundle.svg +4 -0
- package/icons/PfIcons/catalog.svg +4 -0
- package/icons/PfIcons/chat.svg +4 -0
- package/icons/PfIcons/close.svg +4 -0
- package/icons/PfIcons/cloud-security.svg +4 -0
- package/icons/PfIcons/cloud-tenant.svg +4 -0
- package/icons/PfIcons/cluster.svg +4 -0
- package/icons/PfIcons/connected.svg +4 -0
- package/icons/PfIcons/container-node.svg +4 -0
- package/icons/PfIcons/cpu.svg +4 -0
- package/icons/PfIcons/critical-risk.svg +4 -0
- package/icons/PfIcons/data-processor.svg +4 -0
- package/icons/PfIcons/data-sink.svg +4 -0
- package/icons/PfIcons/data-source.svg +4 -0
- package/icons/PfIcons/degraded.svg +4 -0
- package/icons/PfIcons/disconnected.svg +4 -0
- package/icons/PfIcons/domain.svg +4 -0
- package/icons/PfIcons/edit.svg +4 -0
- package/icons/PfIcons/enhancement.svg +4 -0
- package/icons/PfIcons/enterprise.svg +4 -0
- package/icons/PfIcons/equalizer.svg +4 -0
- package/icons/PfIcons/error-circle-o.svg +4 -0
- package/icons/PfIcons/export.svg +4 -0
- package/icons/PfIcons/filter.svg +4 -0
- package/icons/PfIcons/flavor.svg +4 -0
- package/icons/PfIcons/folder-close.svg +4 -0
- package/icons/PfIcons/folder-open.svg +4 -0
- package/icons/PfIcons/globe-route.svg +4 -0
- package/icons/PfIcons/help.svg +4 -0
- package/icons/PfIcons/history.svg +4 -0
- package/icons/PfIcons/home.svg +4 -0
- package/icons/PfIcons/import.svg +4 -0
- package/icons/PfIcons/in-progress.svg +4 -0
- package/icons/PfIcons/info.svg +4 -0
- package/icons/PfIcons/infrastructure.svg +4 -0
- package/icons/PfIcons/integration.svg +4 -0
- package/icons/PfIcons/key.svg +4 -0
- package/icons/PfIcons/locked.svg +4 -0
- package/icons/PfIcons/maintenance.svg +4 -0
- package/icons/PfIcons/memory.svg +4 -0
- package/icons/PfIcons/messages.svg +4 -0
- package/icons/PfIcons/middleware.svg +4 -0
- package/icons/PfIcons/migration.svg +4 -0
- package/icons/PfIcons/module.svg +4 -0
- package/icons/PfIcons/monitoring.svg +4 -0
- package/icons/PfIcons/multicluster.svg +4 -0
- package/icons/PfIcons/namespaces.svg +4 -0
- package/icons/PfIcons/network.svg +4 -0
- package/icons/PfIcons/new-process.svg +4 -0
- package/icons/PfIcons/not-started.svg +4 -0
- package/icons/PfIcons/off.svg +4 -0
- package/icons/PfIcons/ok.svg +4 -0
- package/icons/PfIcons/on-running.svg +4 -0
- package/icons/PfIcons/on.svg +4 -0
- package/icons/PfIcons/open-drawer-right.svg +4 -0
- package/icons/PfIcons/openshift.svg +4 -0
- package/icons/PfIcons/openstack.svg +4 -0
- package/icons/PfIcons/optimize.svg +4 -0
- package/icons/PfIcons/orders.svg +4 -0
- package/icons/PfIcons/os-image.svg +4 -0
- package/icons/PfIcons/package.svg +4 -0
- package/icons/PfIcons/panel-close.svg +4 -0
- package/icons/PfIcons/panel-open.svg +4 -0
- package/icons/PfIcons/paused.svg +4 -0
- package/icons/PfIcons/pending.svg +4 -0
- package/icons/PfIcons/pficon-dragdrop.svg +4 -0
- package/icons/PfIcons/pficon-history.svg +4 -0
- package/icons/PfIcons/pficon-network-range.svg +4 -0
- package/icons/PfIcons/pficon-satellite.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
- package/icons/PfIcons/pficon-template.svg +4 -0
- package/icons/PfIcons/pficon-vcenter.svg +4 -0
- package/icons/PfIcons/plugged.svg +4 -0
- package/icons/PfIcons/port.svg +4 -0
- package/icons/PfIcons/print.svg +4 -0
- package/icons/PfIcons/private.svg +4 -0
- package/icons/PfIcons/process-automation.svg +4 -0
- package/icons/PfIcons/project.svg +4 -0
- package/icons/PfIcons/rebalance.svg +4 -0
- package/icons/PfIcons/rebooting.svg +4 -0
- package/icons/PfIcons/regions.svg +4 -0
- package/icons/PfIcons/registry.svg +4 -0
- package/icons/PfIcons/remove2.svg +4 -0
- package/icons/PfIcons/replicator.svg +4 -0
- package/icons/PfIcons/repository.svg +4 -0
- package/icons/PfIcons/resource-pool.svg +4 -0
- package/icons/PfIcons/resources-almost-empty.svg +4 -0
- package/icons/PfIcons/resources-almost-full.svg +4 -0
- package/icons/PfIcons/resources-empty.svg +4 -0
- package/icons/PfIcons/resources-full.svg +4 -0
- package/icons/PfIcons/running.svg +4 -0
- package/icons/PfIcons/save.svg +4 -0
- package/icons/PfIcons/screen.svg +4 -0
- package/icons/PfIcons/security.svg +4 -0
- package/icons/PfIcons/server-group.svg +4 -0
- package/icons/PfIcons/server.svg +4 -0
- package/icons/PfIcons/service-catalog.svg +4 -0
- package/icons/PfIcons/service.svg +4 -0
- package/icons/PfIcons/services.svg +4 -0
- package/icons/PfIcons/severity-critical.svg +4 -0
- package/icons/PfIcons/severity-important.svg +4 -0
- package/icons/PfIcons/severity-minor.svg +4 -0
- package/icons/PfIcons/severity-moderate.svg +4 -0
- package/icons/PfIcons/severity-none.svg +4 -0
- package/icons/PfIcons/severity-undefined.svg +4 -0
- package/icons/PfIcons/spinner.svg +4 -0
- package/icons/PfIcons/spinner2.svg +4 -0
- package/icons/PfIcons/storage-domain.svg +4 -0
- package/icons/PfIcons/task.svg +4 -0
- package/icons/PfIcons/tenant.svg +4 -0
- package/icons/PfIcons/thumb-tack.svg +4 -0
- package/icons/PfIcons/topology.svg +4 -0
- package/icons/PfIcons/treeview.svg +4 -0
- package/icons/PfIcons/trend-down.svg +4 -0
- package/icons/PfIcons/trend-up.svg +4 -0
- package/icons/PfIcons/unknown.svg +4 -0
- package/icons/PfIcons/unlocked.svg +4 -0
- package/icons/PfIcons/unplugged.svg +4 -0
- package/icons/PfIcons/user.svg +4 -0
- package/icons/PfIcons/users.svg +4 -0
- package/icons/PfIcons/virtual-machine.svg +4 -0
- package/icons/PfIcons/volume.svg +4 -0
- package/icons/PfIcons/warning-triangle.svg +4 -0
- package/icons/PfIcons/zone.svg +4 -0
- package/package.json +28 -13
- package/patternfly-base-no-globals.css +88 -0
- package/patternfly-base.css +95 -0
- package/patternfly-no-globals.css +666 -84
- package/patternfly.css +673 -84
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- 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
|
|
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
|
|
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
|
|
256
|
-
|
|
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
|
|
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
|
|
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
|
|
522
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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="
|
|
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
|
|
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="
|
|
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
|
|
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="
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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-
|
|
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-
|
|
10472
|
-
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/tokens/all-
|
|
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. |
|