@patternfly/patternfly 6.5.0-prerelease.25 → 6.5.0-prerelease.26
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/components/Compass/compass.css +78 -9
- package/components/Compass/compass.scss +85 -50
- package/components/_index.css +78 -9
- package/docs/components/Compass/examples/Compass.css +2 -2
- package/docs/components/Compass/examples/Compass.md +6 -5
- package/docs/components/Tabs/examples/Tabs.md +813 -77
- package/docs/demos/Card/examples/Card.md +14 -2
- package/docs/demos/Compass/examples/Compass.md +109 -30
- package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -2
- package/docs/demos/Drawer/examples/Drawer.md +11 -2
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -2
- package/docs/demos/Tabs/examples/Tabs.md +72 -9
- package/package.json +1 -1
- package/patternfly-no-globals.css +78 -9
- package/patternfly.css +78 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -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">
|
|
@@ -2687,7 +3016,10 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2687
3016
|
### Using the nav element example
|
|
2688
3017
|
|
|
2689
3018
|
```html
|
|
2690
|
-
<nav
|
|
3019
|
+
<nav
|
|
3020
|
+
class="pf-v6-c-tabs pf-m-scrollable"
|
|
3021
|
+
aria-label="Using nav element example"
|
|
3022
|
+
>
|
|
2691
3023
|
<div class="pf-v6-c-tabs__scroll-button">
|
|
2692
3024
|
<button
|
|
2693
3025
|
class="pf-v6-c-button pf-m-plain"
|
|
@@ -2699,12 +3031,17 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2699
3031
|
</span>
|
|
2700
3032
|
</button>
|
|
2701
3033
|
</div>
|
|
2702
|
-
<ul
|
|
3034
|
+
<ul
|
|
3035
|
+
class="pf-v6-c-tabs__list"
|
|
3036
|
+
role="tablist"
|
|
3037
|
+
aria-label="Using nav element example"
|
|
3038
|
+
>
|
|
2703
3039
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
2704
3040
|
<a
|
|
2705
3041
|
class="pf-v6-c-tabs__link"
|
|
2706
3042
|
href="#"
|
|
2707
3043
|
role="tab"
|
|
3044
|
+
aria-selected="false"
|
|
2708
3045
|
id="using-the-nav-element-users-link"
|
|
2709
3046
|
>
|
|
2710
3047
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -2715,6 +3052,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2715
3052
|
class="pf-v6-c-tabs__link"
|
|
2716
3053
|
href="#"
|
|
2717
3054
|
role="tab"
|
|
3055
|
+
aria-selected="true"
|
|
2718
3056
|
id="using-the-nav-element-containers-link"
|
|
2719
3057
|
>
|
|
2720
3058
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -2725,6 +3063,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2725
3063
|
class="pf-v6-c-tabs__link"
|
|
2726
3064
|
href="#"
|
|
2727
3065
|
role="tab"
|
|
3066
|
+
aria-selected="false"
|
|
2728
3067
|
id="using-the-nav-element-database-link"
|
|
2729
3068
|
>
|
|
2730
3069
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -2738,6 +3077,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2738
3077
|
tabindex="-1"
|
|
2739
3078
|
href="#"
|
|
2740
3079
|
role="tab"
|
|
3080
|
+
aria-selected="false"
|
|
2741
3081
|
id="using-the-nav-element-disabled-link"
|
|
2742
3082
|
>
|
|
2743
3083
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -2749,6 +3089,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2749
3089
|
aria-disabled="true"
|
|
2750
3090
|
href="#"
|
|
2751
3091
|
role="tab"
|
|
3092
|
+
aria-selected="false"
|
|
2752
3093
|
id="using-the-nav-element-aria-disabled-link"
|
|
2753
3094
|
>
|
|
2754
3095
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -2759,6 +3100,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2759
3100
|
class="pf-v6-c-tabs__link"
|
|
2760
3101
|
href="#"
|
|
2761
3102
|
role="tab"
|
|
3103
|
+
aria-selected="false"
|
|
2762
3104
|
id="using-the-nav-element-network-wired-link"
|
|
2763
3105
|
>
|
|
2764
3106
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -2784,7 +3126,10 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2784
3126
|
### Sub tabs using the nav element example
|
|
2785
3127
|
|
|
2786
3128
|
```html
|
|
2787
|
-
<nav
|
|
3129
|
+
<nav
|
|
3130
|
+
class="pf-v6-c-tabs"
|
|
3131
|
+
aria-label="Using nav element with sub tabs example, primary"
|
|
3132
|
+
>
|
|
2788
3133
|
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
|
|
2789
3134
|
<button
|
|
2790
3135
|
class="pf-v6-c-button pf-m-plain"
|
|
@@ -2797,12 +3142,17 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2797
3142
|
</span>
|
|
2798
3143
|
</button>
|
|
2799
3144
|
</div>
|
|
2800
|
-
<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
|
+
>
|
|
2801
3150
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
2802
3151
|
<a
|
|
2803
3152
|
class="pf-v6-c-tabs__link"
|
|
2804
3153
|
href="#"
|
|
2805
3154
|
role="tab"
|
|
3155
|
+
aria-selected="false"
|
|
2806
3156
|
id="sub-tabs-using-the-nav-element-users-link"
|
|
2807
3157
|
>
|
|
2808
3158
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -2813,6 +3163,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2813
3163
|
class="pf-v6-c-tabs__link"
|
|
2814
3164
|
href="#"
|
|
2815
3165
|
role="tab"
|
|
3166
|
+
aria-selected="true"
|
|
2816
3167
|
id="sub-tabs-using-the-nav-element-containers-link"
|
|
2817
3168
|
>
|
|
2818
3169
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -2823,6 +3174,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2823
3174
|
class="pf-v6-c-tabs__link"
|
|
2824
3175
|
href="#"
|
|
2825
3176
|
role="tab"
|
|
3177
|
+
aria-selected="false"
|
|
2826
3178
|
id="sub-tabs-using-the-nav-element-database-link"
|
|
2827
3179
|
>
|
|
2828
3180
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -2834,6 +3186,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2834
3186
|
class="pf-v6-c-tabs__link"
|
|
2835
3187
|
href="#"
|
|
2836
3188
|
role="tab"
|
|
3189
|
+
aria-selected="false"
|
|
2837
3190
|
id="sub-tabs-using-the-nav-element-server-link"
|
|
2838
3191
|
>
|
|
2839
3192
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -2844,6 +3197,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2844
3197
|
class="pf-v6-c-tabs__link"
|
|
2845
3198
|
href="#"
|
|
2846
3199
|
role="tab"
|
|
3200
|
+
aria-selected="false"
|
|
2847
3201
|
id="sub-tabs-using-the-nav-element-system-link"
|
|
2848
3202
|
>
|
|
2849
3203
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -2854,6 +3208,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2854
3208
|
class="pf-v6-c-tabs__link"
|
|
2855
3209
|
href="#"
|
|
2856
3210
|
role="tab"
|
|
3211
|
+
aria-selected="false"
|
|
2857
3212
|
id="sub-tabs-using-the-nav-element-network-wired-link"
|
|
2858
3213
|
>
|
|
2859
3214
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -2875,7 +3230,10 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2875
3230
|
</div>
|
|
2876
3231
|
</nav>
|
|
2877
3232
|
|
|
2878
|
-
<nav
|
|
3233
|
+
<nav
|
|
3234
|
+
class="pf-v6-c-tabs pf-m-subtab"
|
|
3235
|
+
aria-label="Using nav element with sub tabs example, Containers"
|
|
3236
|
+
>
|
|
2879
3237
|
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
|
|
2880
3238
|
<button
|
|
2881
3239
|
class="pf-v6-c-button pf-m-plain"
|
|
@@ -2888,12 +3246,17 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2888
3246
|
</span>
|
|
2889
3247
|
</button>
|
|
2890
3248
|
</div>
|
|
2891
|
-
<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
|
+
>
|
|
2892
3254
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
2893
3255
|
<a
|
|
2894
3256
|
class="pf-v6-c-tabs__link"
|
|
2895
3257
|
href="#"
|
|
2896
3258
|
role="tab"
|
|
3259
|
+
aria-selected="false"
|
|
2897
3260
|
id="sub-tabs-using-the-nav-element-subtab-sub-1-link"
|
|
2898
3261
|
>
|
|
2899
3262
|
<span class="pf-v6-c-tabs__item-text">Item 1</span>
|
|
@@ -2904,6 +3267,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2904
3267
|
class="pf-v6-c-tabs__link"
|
|
2905
3268
|
href="#"
|
|
2906
3269
|
role="tab"
|
|
3270
|
+
aria-selected="false"
|
|
2907
3271
|
id="sub-tabs-using-the-nav-element-subtab-sub-2-link"
|
|
2908
3272
|
>
|
|
2909
3273
|
<span class="pf-v6-c-tabs__item-text">Item 2</span>
|
|
@@ -2914,6 +3278,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2914
3278
|
class="pf-v6-c-tabs__link"
|
|
2915
3279
|
href="#"
|
|
2916
3280
|
role="tab"
|
|
3281
|
+
aria-selected="true"
|
|
2917
3282
|
id="sub-tabs-using-the-nav-element-subtab-sub-3-link"
|
|
2918
3283
|
>
|
|
2919
3284
|
<span class="pf-v6-c-tabs__item-text">Item 3</span>
|
|
@@ -2927,6 +3292,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2927
3292
|
tabindex="-1"
|
|
2928
3293
|
href="#"
|
|
2929
3294
|
role="tab"
|
|
3295
|
+
aria-selected="false"
|
|
2930
3296
|
id="sub-tabs-using-the-nav-element-subtab-sub-disabled-link"
|
|
2931
3297
|
>
|
|
2932
3298
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -2938,6 +3304,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2938
3304
|
aria-disabled="true"
|
|
2939
3305
|
href="#"
|
|
2940
3306
|
role="tab"
|
|
3307
|
+
aria-selected="false"
|
|
2941
3308
|
id="sub-tabs-using-the-nav-element-subtab-sub-aria-disabled-link"
|
|
2942
3309
|
>
|
|
2943
3310
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -2948,6 +3315,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2948
3315
|
class="pf-v6-c-tabs__link"
|
|
2949
3316
|
href="#"
|
|
2950
3317
|
role="tab"
|
|
3318
|
+
aria-selected="false"
|
|
2951
3319
|
id="sub-tabs-using-the-nav-element-subtab-sub-6-link"
|
|
2952
3320
|
>
|
|
2953
3321
|
<span class="pf-v6-c-tabs__item-text">Item 6</span>
|
|
@@ -2990,12 +3358,17 @@ cssPrefix: pf-v6-c-tabs
|
|
|
2990
3358
|
</span>
|
|
2991
3359
|
</button>
|
|
2992
3360
|
</div>
|
|
2993
|
-
<ul
|
|
3361
|
+
<ul
|
|
3362
|
+
class="pf-v6-c-tabs__list"
|
|
3363
|
+
role="tablist"
|
|
3364
|
+
aria-label="Site navigation variation example"
|
|
3365
|
+
>
|
|
2994
3366
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
2995
3367
|
<button
|
|
2996
3368
|
type="button"
|
|
2997
3369
|
class="pf-v6-c-tabs__link"
|
|
2998
3370
|
role="tab"
|
|
3371
|
+
aria-selected="false"
|
|
2999
3372
|
id="nav-tabs-users-link"
|
|
3000
3373
|
>
|
|
3001
3374
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -3006,6 +3379,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
3006
3379
|
type="button"
|
|
3007
3380
|
class="pf-v6-c-tabs__link"
|
|
3008
3381
|
role="tab"
|
|
3382
|
+
aria-selected="true"
|
|
3009
3383
|
id="nav-tabs-containers-link"
|
|
3010
3384
|
>
|
|
3011
3385
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -3016,6 +3390,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
3016
3390
|
type="button"
|
|
3017
3391
|
class="pf-v6-c-tabs__link"
|
|
3018
3392
|
role="tab"
|
|
3393
|
+
aria-selected="false"
|
|
3019
3394
|
id="nav-tabs-database-link"
|
|
3020
3395
|
>
|
|
3021
3396
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -3027,6 +3402,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
3027
3402
|
type="button"
|
|
3028
3403
|
class="pf-v6-c-tabs__link"
|
|
3029
3404
|
role="tab"
|
|
3405
|
+
aria-selected="false"
|
|
3030
3406
|
id="nav-tabs-server-link"
|
|
3031
3407
|
>
|
|
3032
3408
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -3037,6 +3413,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
3037
3413
|
type="button"
|
|
3038
3414
|
class="pf-v6-c-tabs__link"
|
|
3039
3415
|
role="tab"
|
|
3416
|
+
aria-selected="false"
|
|
3040
3417
|
id="nav-tabs-system-link"
|
|
3041
3418
|
>
|
|
3042
3419
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -3047,6 +3424,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
3047
3424
|
type="button"
|
|
3048
3425
|
class="pf-v6-c-tabs__link"
|
|
3049
3426
|
role="tab"
|
|
3427
|
+
aria-selected="false"
|
|
3050
3428
|
id="nav-tabs-network-wired-link"
|
|
3051
3429
|
>
|
|
3052
3430
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -3070,7 +3448,7 @@ cssPrefix: pf-v6-c-tabs
|
|
|
3070
3448
|
As sub navigation:
|
|
3071
3449
|
<nav
|
|
3072
3450
|
class="pf-v6-c-tabs pf-m-subtab pf-m-nav"
|
|
3073
|
-
aria-label="Site
|
|
3451
|
+
aria-label="Site navigation variation as sub tabs example"
|
|
3074
3452
|
>
|
|
3075
3453
|
<div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
|
|
3076
3454
|
<button
|
|
@@ -3084,12 +3462,17 @@ As sub navigation:
|
|
|
3084
3462
|
</span>
|
|
3085
3463
|
</button>
|
|
3086
3464
|
</div>
|
|
3087
|
-
<ul
|
|
3465
|
+
<ul
|
|
3466
|
+
class="pf-v6-c-tabs__list"
|
|
3467
|
+
role="tablist"
|
|
3468
|
+
aria-label="Site navigation variation as sub tabs example"
|
|
3469
|
+
>
|
|
3088
3470
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
3089
3471
|
<button
|
|
3090
3472
|
type="button"
|
|
3091
3473
|
class="pf-v6-c-tabs__link"
|
|
3092
3474
|
role="tab"
|
|
3475
|
+
aria-selected="false"
|
|
3093
3476
|
id="nav-tabs-users-link"
|
|
3094
3477
|
>
|
|
3095
3478
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -3100,6 +3483,7 @@ As sub navigation:
|
|
|
3100
3483
|
type="button"
|
|
3101
3484
|
class="pf-v6-c-tabs__link"
|
|
3102
3485
|
role="tab"
|
|
3486
|
+
aria-selected="true"
|
|
3103
3487
|
id="nav-tabs-containers-link"
|
|
3104
3488
|
>
|
|
3105
3489
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -3110,6 +3494,7 @@ As sub navigation:
|
|
|
3110
3494
|
type="button"
|
|
3111
3495
|
class="pf-v6-c-tabs__link"
|
|
3112
3496
|
role="tab"
|
|
3497
|
+
aria-selected="false"
|
|
3113
3498
|
id="nav-tabs-database-link"
|
|
3114
3499
|
>
|
|
3115
3500
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -3121,6 +3506,7 @@ As sub navigation:
|
|
|
3121
3506
|
type="button"
|
|
3122
3507
|
class="pf-v6-c-tabs__link"
|
|
3123
3508
|
role="tab"
|
|
3509
|
+
aria-selected="false"
|
|
3124
3510
|
id="nav-tabs-server-link"
|
|
3125
3511
|
>
|
|
3126
3512
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -3131,6 +3517,7 @@ As sub navigation:
|
|
|
3131
3517
|
type="button"
|
|
3132
3518
|
class="pf-v6-c-tabs__link"
|
|
3133
3519
|
role="tab"
|
|
3520
|
+
aria-selected="false"
|
|
3134
3521
|
id="nav-tabs-system-link"
|
|
3135
3522
|
>
|
|
3136
3523
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -3141,6 +3528,7 @@ As sub navigation:
|
|
|
3141
3528
|
type="button"
|
|
3142
3529
|
class="pf-v6-c-tabs__link"
|
|
3143
3530
|
role="tab"
|
|
3531
|
+
aria-selected="false"
|
|
3144
3532
|
id="nav-tabs-network-wired-link"
|
|
3145
3533
|
>
|
|
3146
3534
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -3171,6 +3559,7 @@ As sub navigation:
|
|
|
3171
3559
|
```html
|
|
3172
3560
|
<div
|
|
3173
3561
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
3562
|
+
aria-label="Help button default example"
|
|
3174
3563
|
role="region"
|
|
3175
3564
|
id="help-button-default-example"
|
|
3176
3565
|
>
|
|
@@ -3186,12 +3575,17 @@ As sub navigation:
|
|
|
3186
3575
|
</span>
|
|
3187
3576
|
</button>
|
|
3188
3577
|
</div>
|
|
3189
|
-
<ul
|
|
3578
|
+
<ul
|
|
3579
|
+
class="pf-v6-c-tabs__list"
|
|
3580
|
+
role="tablist"
|
|
3581
|
+
aria-label="Help button default example"
|
|
3582
|
+
>
|
|
3190
3583
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
3191
3584
|
<button
|
|
3192
3585
|
type="button"
|
|
3193
3586
|
class="pf-v6-c-tabs__link"
|
|
3194
3587
|
role="tab"
|
|
3588
|
+
aria-selected="false"
|
|
3195
3589
|
id="help-button-default-example-users-link"
|
|
3196
3590
|
>
|
|
3197
3591
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -3215,6 +3609,7 @@ As sub navigation:
|
|
|
3215
3609
|
type="button"
|
|
3216
3610
|
class="pf-v6-c-tabs__link"
|
|
3217
3611
|
role="tab"
|
|
3612
|
+
aria-selected="true"
|
|
3218
3613
|
id="help-button-default-example-containers-link"
|
|
3219
3614
|
>
|
|
3220
3615
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -3238,6 +3633,7 @@ As sub navigation:
|
|
|
3238
3633
|
type="button"
|
|
3239
3634
|
class="pf-v6-c-tabs__link"
|
|
3240
3635
|
role="tab"
|
|
3636
|
+
aria-selected="false"
|
|
3241
3637
|
id="help-button-default-example-database-link"
|
|
3242
3638
|
>
|
|
3243
3639
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -3266,6 +3662,7 @@ As sub navigation:
|
|
|
3266
3662
|
class="pf-v6-c-tabs__link"
|
|
3267
3663
|
disabled
|
|
3268
3664
|
role="tab"
|
|
3665
|
+
aria-selected="false"
|
|
3269
3666
|
id="help-button-default-example-disabled-link"
|
|
3270
3667
|
>
|
|
3271
3668
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -3294,6 +3691,7 @@ As sub navigation:
|
|
|
3294
3691
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
3295
3692
|
aria-disabled="true"
|
|
3296
3693
|
role="tab"
|
|
3694
|
+
aria-selected="false"
|
|
3297
3695
|
id="help-button-default-example-aria-disabled-link"
|
|
3298
3696
|
>
|
|
3299
3697
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -3322,6 +3720,7 @@ As sub navigation:
|
|
|
3322
3720
|
class="pf-v6-c-tabs__link"
|
|
3323
3721
|
disabled
|
|
3324
3722
|
role="tab"
|
|
3723
|
+
aria-selected="false"
|
|
3325
3724
|
id="help-button-default-example-help-disabled-link"
|
|
3326
3725
|
>
|
|
3327
3726
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -3346,6 +3745,7 @@ As sub navigation:
|
|
|
3346
3745
|
type="button"
|
|
3347
3746
|
class="pf-v6-c-tabs__link"
|
|
3348
3747
|
role="tab"
|
|
3748
|
+
aria-selected="false"
|
|
3349
3749
|
id="help-button-default-example-network-wired-link"
|
|
3350
3750
|
>
|
|
3351
3751
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -3384,6 +3784,7 @@ As sub navigation:
|
|
|
3384
3784
|
|
|
3385
3785
|
<div
|
|
3386
3786
|
class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
|
|
3787
|
+
aria-label="Help button box example"
|
|
3387
3788
|
role="region"
|
|
3388
3789
|
id="help-button-box-example"
|
|
3389
3790
|
>
|
|
@@ -3399,12 +3800,17 @@ As sub navigation:
|
|
|
3399
3800
|
</span>
|
|
3400
3801
|
</button>
|
|
3401
3802
|
</div>
|
|
3402
|
-
<ul
|
|
3803
|
+
<ul
|
|
3804
|
+
class="pf-v6-c-tabs__list"
|
|
3805
|
+
role="tablist"
|
|
3806
|
+
aria-label="Help button box example"
|
|
3807
|
+
>
|
|
3403
3808
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
3404
3809
|
<button
|
|
3405
3810
|
type="button"
|
|
3406
3811
|
class="pf-v6-c-tabs__link"
|
|
3407
3812
|
role="tab"
|
|
3813
|
+
aria-selected="false"
|
|
3408
3814
|
id="help-button-box-example-users-link"
|
|
3409
3815
|
>
|
|
3410
3816
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -3428,6 +3834,7 @@ As sub navigation:
|
|
|
3428
3834
|
type="button"
|
|
3429
3835
|
class="pf-v6-c-tabs__link"
|
|
3430
3836
|
role="tab"
|
|
3837
|
+
aria-selected="true"
|
|
3431
3838
|
id="help-button-box-example-containers-link"
|
|
3432
3839
|
>
|
|
3433
3840
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -3451,6 +3858,7 @@ As sub navigation:
|
|
|
3451
3858
|
type="button"
|
|
3452
3859
|
class="pf-v6-c-tabs__link"
|
|
3453
3860
|
role="tab"
|
|
3861
|
+
aria-selected="false"
|
|
3454
3862
|
id="help-button-box-example-database-link"
|
|
3455
3863
|
>
|
|
3456
3864
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -3479,6 +3887,7 @@ As sub navigation:
|
|
|
3479
3887
|
class="pf-v6-c-tabs__link"
|
|
3480
3888
|
disabled
|
|
3481
3889
|
role="tab"
|
|
3890
|
+
aria-selected="false"
|
|
3482
3891
|
id="help-button-box-example-disabled-link"
|
|
3483
3892
|
>
|
|
3484
3893
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -3507,6 +3916,7 @@ As sub navigation:
|
|
|
3507
3916
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
3508
3917
|
aria-disabled="true"
|
|
3509
3918
|
role="tab"
|
|
3919
|
+
aria-selected="false"
|
|
3510
3920
|
id="help-button-box-example-aria-disabled-link"
|
|
3511
3921
|
>
|
|
3512
3922
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -3535,6 +3945,7 @@ As sub navigation:
|
|
|
3535
3945
|
class="pf-v6-c-tabs__link"
|
|
3536
3946
|
disabled
|
|
3537
3947
|
role="tab"
|
|
3948
|
+
aria-selected="false"
|
|
3538
3949
|
id="help-button-box-example-help-disabled-link"
|
|
3539
3950
|
>
|
|
3540
3951
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -3559,6 +3970,7 @@ As sub navigation:
|
|
|
3559
3970
|
type="button"
|
|
3560
3971
|
class="pf-v6-c-tabs__link"
|
|
3561
3972
|
role="tab"
|
|
3973
|
+
aria-selected="false"
|
|
3562
3974
|
id="help-button-box-example-network-wired-link"
|
|
3563
3975
|
>
|
|
3564
3976
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -3597,6 +4009,7 @@ As sub navigation:
|
|
|
3597
4009
|
|
|
3598
4010
|
<div
|
|
3599
4011
|
class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
|
|
4012
|
+
aria-label="Help button box secondary variant example"
|
|
3600
4013
|
role="region"
|
|
3601
4014
|
id="help-button-box-secondary-example"
|
|
3602
4015
|
>
|
|
@@ -3612,12 +4025,17 @@ As sub navigation:
|
|
|
3612
4025
|
</span>
|
|
3613
4026
|
</button>
|
|
3614
4027
|
</div>
|
|
3615
|
-
<ul
|
|
4028
|
+
<ul
|
|
4029
|
+
class="pf-v6-c-tabs__list"
|
|
4030
|
+
role="tablist"
|
|
4031
|
+
aria-label="Help button box secondary variant example"
|
|
4032
|
+
>
|
|
3616
4033
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
3617
4034
|
<button
|
|
3618
4035
|
type="button"
|
|
3619
4036
|
class="pf-v6-c-tabs__link"
|
|
3620
4037
|
role="tab"
|
|
4038
|
+
aria-selected="false"
|
|
3621
4039
|
id="help-button-box-secondary-example-users-link"
|
|
3622
4040
|
>
|
|
3623
4041
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -3641,6 +4059,7 @@ As sub navigation:
|
|
|
3641
4059
|
type="button"
|
|
3642
4060
|
class="pf-v6-c-tabs__link"
|
|
3643
4061
|
role="tab"
|
|
4062
|
+
aria-selected="true"
|
|
3644
4063
|
id="help-button-box-secondary-example-containers-link"
|
|
3645
4064
|
>
|
|
3646
4065
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -3664,6 +4083,7 @@ As sub navigation:
|
|
|
3664
4083
|
type="button"
|
|
3665
4084
|
class="pf-v6-c-tabs__link"
|
|
3666
4085
|
role="tab"
|
|
4086
|
+
aria-selected="false"
|
|
3667
4087
|
id="help-button-box-secondary-example-database-link"
|
|
3668
4088
|
>
|
|
3669
4089
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -3692,6 +4112,7 @@ As sub navigation:
|
|
|
3692
4112
|
class="pf-v6-c-tabs__link"
|
|
3693
4113
|
disabled
|
|
3694
4114
|
role="tab"
|
|
4115
|
+
aria-selected="false"
|
|
3695
4116
|
id="help-button-box-secondary-example-disabled-link"
|
|
3696
4117
|
>
|
|
3697
4118
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -3720,6 +4141,7 @@ As sub navigation:
|
|
|
3720
4141
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
3721
4142
|
aria-disabled="true"
|
|
3722
4143
|
role="tab"
|
|
4144
|
+
aria-selected="false"
|
|
3723
4145
|
id="help-button-box-secondary-example-aria-disabled-link"
|
|
3724
4146
|
>
|
|
3725
4147
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -3748,6 +4170,7 @@ As sub navigation:
|
|
|
3748
4170
|
class="pf-v6-c-tabs__link"
|
|
3749
4171
|
disabled
|
|
3750
4172
|
role="tab"
|
|
4173
|
+
aria-selected="false"
|
|
3751
4174
|
id="help-button-box-secondary-example-help-disabled-link"
|
|
3752
4175
|
>
|
|
3753
4176
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -3772,6 +4195,7 @@ As sub navigation:
|
|
|
3772
4195
|
type="button"
|
|
3773
4196
|
class="pf-v6-c-tabs__link"
|
|
3774
4197
|
role="tab"
|
|
4198
|
+
aria-selected="false"
|
|
3775
4199
|
id="help-button-box-secondary-example-network-wired-link"
|
|
3776
4200
|
>
|
|
3777
4201
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -3810,6 +4234,7 @@ As sub navigation:
|
|
|
3810
4234
|
|
|
3811
4235
|
<div
|
|
3812
4236
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
4237
|
+
aria-label="Help button with icons example"
|
|
3813
4238
|
role="region"
|
|
3814
4239
|
id="help-button-icons-text-example"
|
|
3815
4240
|
>
|
|
@@ -3825,12 +4250,17 @@ As sub navigation:
|
|
|
3825
4250
|
</span>
|
|
3826
4251
|
</button>
|
|
3827
4252
|
</div>
|
|
3828
|
-
<ul
|
|
4253
|
+
<ul
|
|
4254
|
+
class="pf-v6-c-tabs__list"
|
|
4255
|
+
role="tablist"
|
|
4256
|
+
aria-label="Help button with icons example"
|
|
4257
|
+
>
|
|
3829
4258
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
3830
4259
|
<button
|
|
3831
4260
|
type="button"
|
|
3832
4261
|
class="pf-v6-c-tabs__link"
|
|
3833
4262
|
role="tab"
|
|
4263
|
+
aria-selected="false"
|
|
3834
4264
|
id="help-button-icons-text-example-users-link"
|
|
3835
4265
|
>
|
|
3836
4266
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -3857,6 +4287,7 @@ As sub navigation:
|
|
|
3857
4287
|
type="button"
|
|
3858
4288
|
class="pf-v6-c-tabs__link"
|
|
3859
4289
|
role="tab"
|
|
4290
|
+
aria-selected="true"
|
|
3860
4291
|
id="help-button-icons-text-example-containers-link"
|
|
3861
4292
|
>
|
|
3862
4293
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -3883,6 +4314,7 @@ As sub navigation:
|
|
|
3883
4314
|
type="button"
|
|
3884
4315
|
class="pf-v6-c-tabs__link"
|
|
3885
4316
|
role="tab"
|
|
4317
|
+
aria-selected="false"
|
|
3886
4318
|
id="help-button-icons-text-example-database-link"
|
|
3887
4319
|
>
|
|
3888
4320
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -3914,6 +4346,7 @@ As sub navigation:
|
|
|
3914
4346
|
class="pf-v6-c-tabs__link"
|
|
3915
4347
|
disabled
|
|
3916
4348
|
role="tab"
|
|
4349
|
+
aria-selected="false"
|
|
3917
4350
|
id="help-button-icons-text-example-disabled-link"
|
|
3918
4351
|
>
|
|
3919
4352
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -3945,6 +4378,7 @@ As sub navigation:
|
|
|
3945
4378
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
3946
4379
|
aria-disabled="true"
|
|
3947
4380
|
role="tab"
|
|
4381
|
+
aria-selected="false"
|
|
3948
4382
|
id="help-button-icons-text-example-aria-disabled-link"
|
|
3949
4383
|
>
|
|
3950
4384
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -3976,6 +4410,7 @@ As sub navigation:
|
|
|
3976
4410
|
class="pf-v6-c-tabs__link"
|
|
3977
4411
|
disabled
|
|
3978
4412
|
role="tab"
|
|
4413
|
+
aria-selected="false"
|
|
3979
4414
|
id="help-button-icons-text-example-help-disabled-link"
|
|
3980
4415
|
>
|
|
3981
4416
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -4003,6 +4438,7 @@ As sub navigation:
|
|
|
4003
4438
|
type="button"
|
|
4004
4439
|
class="pf-v6-c-tabs__link"
|
|
4005
4440
|
role="tab"
|
|
4441
|
+
aria-selected="false"
|
|
4006
4442
|
id="help-button-icons-text-example-network-wired-link"
|
|
4007
4443
|
>
|
|
4008
4444
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -4044,6 +4480,7 @@ As sub navigation:
|
|
|
4044
4480
|
|
|
4045
4481
|
<div
|
|
4046
4482
|
class="pf-v6-c-tabs pf-m-fill"
|
|
4483
|
+
aria-label="Help button filled example"
|
|
4047
4484
|
role="region"
|
|
4048
4485
|
id="help-button-filled-example"
|
|
4049
4486
|
>
|
|
@@ -4059,12 +4496,17 @@ As sub navigation:
|
|
|
4059
4496
|
</span>
|
|
4060
4497
|
</button>
|
|
4061
4498
|
</div>
|
|
4062
|
-
<ul
|
|
4499
|
+
<ul
|
|
4500
|
+
class="pf-v6-c-tabs__list"
|
|
4501
|
+
role="tablist"
|
|
4502
|
+
aria-label="Help button filled example"
|
|
4503
|
+
>
|
|
4063
4504
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
4064
4505
|
<button
|
|
4065
4506
|
type="button"
|
|
4066
4507
|
class="pf-v6-c-tabs__link"
|
|
4067
4508
|
role="tab"
|
|
4509
|
+
aria-selected="false"
|
|
4068
4510
|
id="help-button-filled-example-users-link"
|
|
4069
4511
|
>
|
|
4070
4512
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -4088,6 +4530,7 @@ As sub navigation:
|
|
|
4088
4530
|
type="button"
|
|
4089
4531
|
class="pf-v6-c-tabs__link"
|
|
4090
4532
|
role="tab"
|
|
4533
|
+
aria-selected="true"
|
|
4091
4534
|
id="help-button-filled-example-containers-link"
|
|
4092
4535
|
>
|
|
4093
4536
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -4111,6 +4554,7 @@ As sub navigation:
|
|
|
4111
4554
|
type="button"
|
|
4112
4555
|
class="pf-v6-c-tabs__link"
|
|
4113
4556
|
role="tab"
|
|
4557
|
+
aria-selected="false"
|
|
4114
4558
|
id="help-button-filled-example-database-link"
|
|
4115
4559
|
>
|
|
4116
4560
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -4150,6 +4594,7 @@ As sub navigation:
|
|
|
4150
4594
|
|
|
4151
4595
|
<div
|
|
4152
4596
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
4597
|
+
aria-label="Help button with sub tabs example, primary"
|
|
4153
4598
|
role="region"
|
|
4154
4599
|
id="help-button-secondary-primary-example"
|
|
4155
4600
|
>
|
|
@@ -4165,12 +4610,17 @@ As sub navigation:
|
|
|
4165
4610
|
</span>
|
|
4166
4611
|
</button>
|
|
4167
4612
|
</div>
|
|
4168
|
-
<ul
|
|
4613
|
+
<ul
|
|
4614
|
+
class="pf-v6-c-tabs__list"
|
|
4615
|
+
role="tablist"
|
|
4616
|
+
aria-label="Help button with sub tabs example, primary"
|
|
4617
|
+
>
|
|
4169
4618
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
4170
4619
|
<button
|
|
4171
4620
|
type="button"
|
|
4172
4621
|
class="pf-v6-c-tabs__link"
|
|
4173
4622
|
role="tab"
|
|
4623
|
+
aria-selected="false"
|
|
4174
4624
|
id="help-button-secondary-primary-example-users-link"
|
|
4175
4625
|
>
|
|
4176
4626
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -4194,6 +4644,7 @@ As sub navigation:
|
|
|
4194
4644
|
type="button"
|
|
4195
4645
|
class="pf-v6-c-tabs__link"
|
|
4196
4646
|
role="tab"
|
|
4647
|
+
aria-selected="true"
|
|
4197
4648
|
id="help-button-secondary-primary-example-containers-link"
|
|
4198
4649
|
>
|
|
4199
4650
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -4217,6 +4668,7 @@ As sub navigation:
|
|
|
4217
4668
|
type="button"
|
|
4218
4669
|
class="pf-v6-c-tabs__link"
|
|
4219
4670
|
role="tab"
|
|
4671
|
+
aria-selected="false"
|
|
4220
4672
|
id="help-button-secondary-primary-example-database-link"
|
|
4221
4673
|
>
|
|
4222
4674
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -4245,6 +4697,7 @@ As sub navigation:
|
|
|
4245
4697
|
class="pf-v6-c-tabs__link"
|
|
4246
4698
|
disabled
|
|
4247
4699
|
role="tab"
|
|
4700
|
+
aria-selected="false"
|
|
4248
4701
|
id="help-button-secondary-primary-example-disabled-link"
|
|
4249
4702
|
>
|
|
4250
4703
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -4273,6 +4726,7 @@ As sub navigation:
|
|
|
4273
4726
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
4274
4727
|
aria-disabled="true"
|
|
4275
4728
|
role="tab"
|
|
4729
|
+
aria-selected="false"
|
|
4276
4730
|
id="help-button-secondary-primary-example-aria-disabled-link"
|
|
4277
4731
|
>
|
|
4278
4732
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -4301,6 +4755,7 @@ As sub navigation:
|
|
|
4301
4755
|
class="pf-v6-c-tabs__link"
|
|
4302
4756
|
disabled
|
|
4303
4757
|
role="tab"
|
|
4758
|
+
aria-selected="false"
|
|
4304
4759
|
id="help-button-secondary-primary-example-help-disabled-link"
|
|
4305
4760
|
>
|
|
4306
4761
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -4325,6 +4780,7 @@ As sub navigation:
|
|
|
4325
4780
|
type="button"
|
|
4326
4781
|
class="pf-v6-c-tabs__link"
|
|
4327
4782
|
role="tab"
|
|
4783
|
+
aria-selected="false"
|
|
4328
4784
|
id="help-button-secondary-primary-example-network-wired-link"
|
|
4329
4785
|
>
|
|
4330
4786
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -4359,6 +4815,7 @@ As sub navigation:
|
|
|
4359
4815
|
</div>
|
|
4360
4816
|
<div
|
|
4361
4817
|
class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
|
|
4818
|
+
aria-label="Help button with sub tabs example, Containers"
|
|
4362
4819
|
role="region"
|
|
4363
4820
|
id="help-button-secondary-secondary-example"
|
|
4364
4821
|
>
|
|
@@ -4374,12 +4831,17 @@ As sub navigation:
|
|
|
4374
4831
|
</span>
|
|
4375
4832
|
</button>
|
|
4376
4833
|
</div>
|
|
4377
|
-
<ul
|
|
4834
|
+
<ul
|
|
4835
|
+
class="pf-v6-c-tabs__list"
|
|
4836
|
+
role="tablist"
|
|
4837
|
+
aria-label="Help button with sub tabs example, Containers"
|
|
4838
|
+
>
|
|
4378
4839
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
4379
4840
|
<button
|
|
4380
4841
|
type="button"
|
|
4381
4842
|
class="pf-v6-c-tabs__link"
|
|
4382
4843
|
role="tab"
|
|
4844
|
+
aria-selected="false"
|
|
4383
4845
|
id="help-button-secondary-secondary-example-users-link"
|
|
4384
4846
|
>
|
|
4385
4847
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -4403,6 +4865,7 @@ As sub navigation:
|
|
|
4403
4865
|
type="button"
|
|
4404
4866
|
class="pf-v6-c-tabs__link"
|
|
4405
4867
|
role="tab"
|
|
4868
|
+
aria-selected="true"
|
|
4406
4869
|
id="help-button-secondary-secondary-example-containers-link"
|
|
4407
4870
|
>
|
|
4408
4871
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -4426,6 +4889,7 @@ As sub navigation:
|
|
|
4426
4889
|
type="button"
|
|
4427
4890
|
class="pf-v6-c-tabs__link"
|
|
4428
4891
|
role="tab"
|
|
4892
|
+
aria-selected="false"
|
|
4429
4893
|
id="help-button-secondary-secondary-example-database-link"
|
|
4430
4894
|
>
|
|
4431
4895
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -4454,6 +4918,7 @@ As sub navigation:
|
|
|
4454
4918
|
class="pf-v6-c-tabs__link"
|
|
4455
4919
|
disabled
|
|
4456
4920
|
role="tab"
|
|
4921
|
+
aria-selected="false"
|
|
4457
4922
|
id="help-button-secondary-secondary-example-disabled-link"
|
|
4458
4923
|
>
|
|
4459
4924
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -4482,6 +4947,7 @@ As sub navigation:
|
|
|
4482
4947
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
4483
4948
|
aria-disabled="true"
|
|
4484
4949
|
role="tab"
|
|
4950
|
+
aria-selected="false"
|
|
4485
4951
|
id="help-button-secondary-secondary-example-aria-disabled-link"
|
|
4486
4952
|
>
|
|
4487
4953
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -4510,6 +4976,7 @@ As sub navigation:
|
|
|
4510
4976
|
class="pf-v6-c-tabs__link"
|
|
4511
4977
|
disabled
|
|
4512
4978
|
role="tab"
|
|
4979
|
+
aria-selected="false"
|
|
4513
4980
|
id="help-button-secondary-secondary-example-help-disabled-link"
|
|
4514
4981
|
>
|
|
4515
4982
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -4534,6 +5001,7 @@ As sub navigation:
|
|
|
4534
5001
|
type="button"
|
|
4535
5002
|
class="pf-v6-c-tabs__link"
|
|
4536
5003
|
role="tab"
|
|
5004
|
+
aria-selected="false"
|
|
4537
5005
|
id="help-button-secondary-secondary-example-network-wired-link"
|
|
4538
5006
|
>
|
|
4539
5007
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -4574,6 +5042,7 @@ As sub navigation:
|
|
|
4574
5042
|
```html
|
|
4575
5043
|
<div
|
|
4576
5044
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
5045
|
+
aria-label="Close button default example"
|
|
4577
5046
|
role="region"
|
|
4578
5047
|
id="close-button-default-example"
|
|
4579
5048
|
>
|
|
@@ -4589,12 +5058,17 @@ As sub navigation:
|
|
|
4589
5058
|
</span>
|
|
4590
5059
|
</button>
|
|
4591
5060
|
</div>
|
|
4592
|
-
<ul
|
|
5061
|
+
<ul
|
|
5062
|
+
class="pf-v6-c-tabs__list"
|
|
5063
|
+
role="tablist"
|
|
5064
|
+
aria-label="Close button default example"
|
|
5065
|
+
>
|
|
4593
5066
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
4594
5067
|
<button
|
|
4595
5068
|
type="button"
|
|
4596
5069
|
class="pf-v6-c-tabs__link"
|
|
4597
5070
|
role="tab"
|
|
5071
|
+
aria-selected="false"
|
|
4598
5072
|
id="close-button-default-example-users-link"
|
|
4599
5073
|
>
|
|
4600
5074
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -4618,6 +5092,7 @@ As sub navigation:
|
|
|
4618
5092
|
type="button"
|
|
4619
5093
|
class="pf-v6-c-tabs__link"
|
|
4620
5094
|
role="tab"
|
|
5095
|
+
aria-selected="true"
|
|
4621
5096
|
id="close-button-default-example-containers-link"
|
|
4622
5097
|
>
|
|
4623
5098
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -4641,6 +5116,7 @@ As sub navigation:
|
|
|
4641
5116
|
type="button"
|
|
4642
5117
|
class="pf-v6-c-tabs__link"
|
|
4643
5118
|
role="tab"
|
|
5119
|
+
aria-selected="false"
|
|
4644
5120
|
id="close-button-default-example-database-link"
|
|
4645
5121
|
>
|
|
4646
5122
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -4669,6 +5145,7 @@ As sub navigation:
|
|
|
4669
5145
|
class="pf-v6-c-tabs__link"
|
|
4670
5146
|
disabled
|
|
4671
5147
|
role="tab"
|
|
5148
|
+
aria-selected="false"
|
|
4672
5149
|
id="close-button-default-example-disabled-link"
|
|
4673
5150
|
>
|
|
4674
5151
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -4697,6 +5174,7 @@ As sub navigation:
|
|
|
4697
5174
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
4698
5175
|
aria-disabled="true"
|
|
4699
5176
|
role="tab"
|
|
5177
|
+
aria-selected="false"
|
|
4700
5178
|
id="close-button-default-example-aria-disabled-link"
|
|
4701
5179
|
>
|
|
4702
5180
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -4725,6 +5203,7 @@ As sub navigation:
|
|
|
4725
5203
|
class="pf-v6-c-tabs__link"
|
|
4726
5204
|
disabled
|
|
4727
5205
|
role="tab"
|
|
5206
|
+
aria-selected="false"
|
|
4728
5207
|
id="close-button-default-example-close-disabled-link"
|
|
4729
5208
|
>
|
|
4730
5209
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -4749,6 +5228,7 @@ As sub navigation:
|
|
|
4749
5228
|
type="button"
|
|
4750
5229
|
class="pf-v6-c-tabs__link"
|
|
4751
5230
|
role="tab"
|
|
5231
|
+
aria-selected="false"
|
|
4752
5232
|
id="close-button-default-example-network-wired-link"
|
|
4753
5233
|
>
|
|
4754
5234
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -4787,6 +5267,7 @@ As sub navigation:
|
|
|
4787
5267
|
|
|
4788
5268
|
<div
|
|
4789
5269
|
class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
|
|
5270
|
+
aria-label="Close button box example"
|
|
4790
5271
|
role="region"
|
|
4791
5272
|
id="close-button-box-example"
|
|
4792
5273
|
>
|
|
@@ -4802,12 +5283,17 @@ As sub navigation:
|
|
|
4802
5283
|
</span>
|
|
4803
5284
|
</button>
|
|
4804
5285
|
</div>
|
|
4805
|
-
<ul
|
|
5286
|
+
<ul
|
|
5287
|
+
class="pf-v6-c-tabs__list"
|
|
5288
|
+
role="tablist"
|
|
5289
|
+
aria-label="Close button box example"
|
|
5290
|
+
>
|
|
4806
5291
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
4807
5292
|
<button
|
|
4808
5293
|
type="button"
|
|
4809
5294
|
class="pf-v6-c-tabs__link"
|
|
4810
5295
|
role="tab"
|
|
5296
|
+
aria-selected="false"
|
|
4811
5297
|
id="close-button-box-example-users-link"
|
|
4812
5298
|
>
|
|
4813
5299
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -4831,6 +5317,7 @@ As sub navigation:
|
|
|
4831
5317
|
type="button"
|
|
4832
5318
|
class="pf-v6-c-tabs__link"
|
|
4833
5319
|
role="tab"
|
|
5320
|
+
aria-selected="true"
|
|
4834
5321
|
id="close-button-box-example-containers-link"
|
|
4835
5322
|
>
|
|
4836
5323
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -4854,6 +5341,7 @@ As sub navigation:
|
|
|
4854
5341
|
type="button"
|
|
4855
5342
|
class="pf-v6-c-tabs__link"
|
|
4856
5343
|
role="tab"
|
|
5344
|
+
aria-selected="false"
|
|
4857
5345
|
id="close-button-box-example-database-link"
|
|
4858
5346
|
>
|
|
4859
5347
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -4882,6 +5370,7 @@ As sub navigation:
|
|
|
4882
5370
|
class="pf-v6-c-tabs__link"
|
|
4883
5371
|
disabled
|
|
4884
5372
|
role="tab"
|
|
5373
|
+
aria-selected="false"
|
|
4885
5374
|
id="close-button-box-example-disabled-link"
|
|
4886
5375
|
>
|
|
4887
5376
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -4910,6 +5399,7 @@ As sub navigation:
|
|
|
4910
5399
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
4911
5400
|
aria-disabled="true"
|
|
4912
5401
|
role="tab"
|
|
5402
|
+
aria-selected="false"
|
|
4913
5403
|
id="close-button-box-example-aria-disabled-link"
|
|
4914
5404
|
>
|
|
4915
5405
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -4938,6 +5428,7 @@ As sub navigation:
|
|
|
4938
5428
|
class="pf-v6-c-tabs__link"
|
|
4939
5429
|
disabled
|
|
4940
5430
|
role="tab"
|
|
5431
|
+
aria-selected="false"
|
|
4941
5432
|
id="close-button-box-example-close-disabled-link"
|
|
4942
5433
|
>
|
|
4943
5434
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -4962,6 +5453,7 @@ As sub navigation:
|
|
|
4962
5453
|
type="button"
|
|
4963
5454
|
class="pf-v6-c-tabs__link"
|
|
4964
5455
|
role="tab"
|
|
5456
|
+
aria-selected="false"
|
|
4965
5457
|
id="close-button-box-example-network-wired-link"
|
|
4966
5458
|
>
|
|
4967
5459
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -5000,6 +5492,7 @@ As sub navigation:
|
|
|
5000
5492
|
|
|
5001
5493
|
<div
|
|
5002
5494
|
class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
|
|
5495
|
+
aria-label="Close button box secondary variant example"
|
|
5003
5496
|
role="region"
|
|
5004
5497
|
id="close-button-box-secondary-example"
|
|
5005
5498
|
>
|
|
@@ -5015,12 +5508,17 @@ As sub navigation:
|
|
|
5015
5508
|
</span>
|
|
5016
5509
|
</button>
|
|
5017
5510
|
</div>
|
|
5018
|
-
<ul
|
|
5511
|
+
<ul
|
|
5512
|
+
class="pf-v6-c-tabs__list"
|
|
5513
|
+
role="tablist"
|
|
5514
|
+
aria-label="Close button box secondary variant example"
|
|
5515
|
+
>
|
|
5019
5516
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
5020
5517
|
<button
|
|
5021
5518
|
type="button"
|
|
5022
5519
|
class="pf-v6-c-tabs__link"
|
|
5023
5520
|
role="tab"
|
|
5521
|
+
aria-selected="false"
|
|
5024
5522
|
id="close-button-box-secondary-example-users-link"
|
|
5025
5523
|
>
|
|
5026
5524
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -5044,6 +5542,7 @@ As sub navigation:
|
|
|
5044
5542
|
type="button"
|
|
5045
5543
|
class="pf-v6-c-tabs__link"
|
|
5046
5544
|
role="tab"
|
|
5545
|
+
aria-selected="true"
|
|
5047
5546
|
id="close-button-box-secondary-example-containers-link"
|
|
5048
5547
|
>
|
|
5049
5548
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -5067,6 +5566,7 @@ As sub navigation:
|
|
|
5067
5566
|
type="button"
|
|
5068
5567
|
class="pf-v6-c-tabs__link"
|
|
5069
5568
|
role="tab"
|
|
5569
|
+
aria-selected="false"
|
|
5070
5570
|
id="close-button-box-secondary-example-database-link"
|
|
5071
5571
|
>
|
|
5072
5572
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -5095,6 +5595,7 @@ As sub navigation:
|
|
|
5095
5595
|
class="pf-v6-c-tabs__link"
|
|
5096
5596
|
disabled
|
|
5097
5597
|
role="tab"
|
|
5598
|
+
aria-selected="false"
|
|
5098
5599
|
id="close-button-box-secondary-example-disabled-link"
|
|
5099
5600
|
>
|
|
5100
5601
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -5123,6 +5624,7 @@ As sub navigation:
|
|
|
5123
5624
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
5124
5625
|
aria-disabled="true"
|
|
5125
5626
|
role="tab"
|
|
5627
|
+
aria-selected="false"
|
|
5126
5628
|
id="close-button-box-secondary-example-aria-disabled-link"
|
|
5127
5629
|
>
|
|
5128
5630
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -5151,6 +5653,7 @@ As sub navigation:
|
|
|
5151
5653
|
class="pf-v6-c-tabs__link"
|
|
5152
5654
|
disabled
|
|
5153
5655
|
role="tab"
|
|
5656
|
+
aria-selected="false"
|
|
5154
5657
|
id="close-button-box-secondary-example-close-disabled-link"
|
|
5155
5658
|
>
|
|
5156
5659
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -5175,6 +5678,7 @@ As sub navigation:
|
|
|
5175
5678
|
type="button"
|
|
5176
5679
|
class="pf-v6-c-tabs__link"
|
|
5177
5680
|
role="tab"
|
|
5681
|
+
aria-selected="false"
|
|
5178
5682
|
id="close-button-box-secondary-example-network-wired-link"
|
|
5179
5683
|
>
|
|
5180
5684
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -5213,6 +5717,7 @@ As sub navigation:
|
|
|
5213
5717
|
|
|
5214
5718
|
<div
|
|
5215
5719
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
5720
|
+
aria-label="Close button with icons example"
|
|
5216
5721
|
role="region"
|
|
5217
5722
|
id="close-button-icons-text-example"
|
|
5218
5723
|
>
|
|
@@ -5228,12 +5733,17 @@ As sub navigation:
|
|
|
5228
5733
|
</span>
|
|
5229
5734
|
</button>
|
|
5230
5735
|
</div>
|
|
5231
|
-
<ul
|
|
5736
|
+
<ul
|
|
5737
|
+
class="pf-v6-c-tabs__list"
|
|
5738
|
+
role="tablist"
|
|
5739
|
+
aria-label="Close button with icons example"
|
|
5740
|
+
>
|
|
5232
5741
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
5233
5742
|
<button
|
|
5234
5743
|
type="button"
|
|
5235
5744
|
class="pf-v6-c-tabs__link"
|
|
5236
5745
|
role="tab"
|
|
5746
|
+
aria-selected="false"
|
|
5237
5747
|
id="close-button-icons-text-example-users-link"
|
|
5238
5748
|
>
|
|
5239
5749
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5260,6 +5770,7 @@ As sub navigation:
|
|
|
5260
5770
|
type="button"
|
|
5261
5771
|
class="pf-v6-c-tabs__link"
|
|
5262
5772
|
role="tab"
|
|
5773
|
+
aria-selected="true"
|
|
5263
5774
|
id="close-button-icons-text-example-containers-link"
|
|
5264
5775
|
>
|
|
5265
5776
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5286,6 +5797,7 @@ As sub navigation:
|
|
|
5286
5797
|
type="button"
|
|
5287
5798
|
class="pf-v6-c-tabs__link"
|
|
5288
5799
|
role="tab"
|
|
5800
|
+
aria-selected="false"
|
|
5289
5801
|
id="close-button-icons-text-example-database-link"
|
|
5290
5802
|
>
|
|
5291
5803
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5317,6 +5829,7 @@ As sub navigation:
|
|
|
5317
5829
|
class="pf-v6-c-tabs__link"
|
|
5318
5830
|
disabled
|
|
5319
5831
|
role="tab"
|
|
5832
|
+
aria-selected="false"
|
|
5320
5833
|
id="close-button-icons-text-example-disabled-link"
|
|
5321
5834
|
>
|
|
5322
5835
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5348,6 +5861,7 @@ As sub navigation:
|
|
|
5348
5861
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
5349
5862
|
aria-disabled="true"
|
|
5350
5863
|
role="tab"
|
|
5864
|
+
aria-selected="false"
|
|
5351
5865
|
id="close-button-icons-text-example-aria-disabled-link"
|
|
5352
5866
|
>
|
|
5353
5867
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5379,6 +5893,7 @@ As sub navigation:
|
|
|
5379
5893
|
class="pf-v6-c-tabs__link"
|
|
5380
5894
|
disabled
|
|
5381
5895
|
role="tab"
|
|
5896
|
+
aria-selected="false"
|
|
5382
5897
|
id="close-button-icons-text-example-close-disabled-link"
|
|
5383
5898
|
>
|
|
5384
5899
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5406,6 +5921,7 @@ As sub navigation:
|
|
|
5406
5921
|
type="button"
|
|
5407
5922
|
class="pf-v6-c-tabs__link"
|
|
5408
5923
|
role="tab"
|
|
5924
|
+
aria-selected="false"
|
|
5409
5925
|
id="close-button-icons-text-example-network-wired-link"
|
|
5410
5926
|
>
|
|
5411
5927
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -5447,6 +5963,7 @@ As sub navigation:
|
|
|
5447
5963
|
|
|
5448
5964
|
<div
|
|
5449
5965
|
class="pf-v6-c-tabs pf-m-fill"
|
|
5966
|
+
aria-label="Close button filled example"
|
|
5450
5967
|
role="region"
|
|
5451
5968
|
id="close-button-filled-example"
|
|
5452
5969
|
>
|
|
@@ -5462,12 +5979,17 @@ As sub navigation:
|
|
|
5462
5979
|
</span>
|
|
5463
5980
|
</button>
|
|
5464
5981
|
</div>
|
|
5465
|
-
<ul
|
|
5982
|
+
<ul
|
|
5983
|
+
class="pf-v6-c-tabs__list"
|
|
5984
|
+
role="tablist"
|
|
5985
|
+
aria-label="Close button filled example"
|
|
5986
|
+
>
|
|
5466
5987
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
5467
5988
|
<button
|
|
5468
5989
|
type="button"
|
|
5469
5990
|
class="pf-v6-c-tabs__link"
|
|
5470
5991
|
role="tab"
|
|
5992
|
+
aria-selected="false"
|
|
5471
5993
|
id="close-button-filled-example-users-link"
|
|
5472
5994
|
>
|
|
5473
5995
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -5491,6 +6013,7 @@ As sub navigation:
|
|
|
5491
6013
|
type="button"
|
|
5492
6014
|
class="pf-v6-c-tabs__link"
|
|
5493
6015
|
role="tab"
|
|
6016
|
+
aria-selected="true"
|
|
5494
6017
|
id="close-button-filled-example-containers-link"
|
|
5495
6018
|
>
|
|
5496
6019
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -5514,6 +6037,7 @@ As sub navigation:
|
|
|
5514
6037
|
type="button"
|
|
5515
6038
|
class="pf-v6-c-tabs__link"
|
|
5516
6039
|
role="tab"
|
|
6040
|
+
aria-selected="false"
|
|
5517
6041
|
id="close-button-filled-example-database-link"
|
|
5518
6042
|
>
|
|
5519
6043
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -5553,6 +6077,7 @@ As sub navigation:
|
|
|
5553
6077
|
|
|
5554
6078
|
<div
|
|
5555
6079
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
6080
|
+
aria-label="Close button with sub tabs example, primary"
|
|
5556
6081
|
role="region"
|
|
5557
6082
|
id="close-button-secondary-primary-example"
|
|
5558
6083
|
>
|
|
@@ -5568,12 +6093,17 @@ As sub navigation:
|
|
|
5568
6093
|
</span>
|
|
5569
6094
|
</button>
|
|
5570
6095
|
</div>
|
|
5571
|
-
<ul
|
|
6096
|
+
<ul
|
|
6097
|
+
class="pf-v6-c-tabs__list"
|
|
6098
|
+
role="tablist"
|
|
6099
|
+
aria-label="Close button with sub tabs example, primary"
|
|
6100
|
+
>
|
|
5572
6101
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
5573
6102
|
<button
|
|
5574
6103
|
type="button"
|
|
5575
6104
|
class="pf-v6-c-tabs__link"
|
|
5576
6105
|
role="tab"
|
|
6106
|
+
aria-selected="false"
|
|
5577
6107
|
id="close-button-secondary-primary-example-users-link"
|
|
5578
6108
|
>
|
|
5579
6109
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -5597,6 +6127,7 @@ As sub navigation:
|
|
|
5597
6127
|
type="button"
|
|
5598
6128
|
class="pf-v6-c-tabs__link"
|
|
5599
6129
|
role="tab"
|
|
6130
|
+
aria-selected="true"
|
|
5600
6131
|
id="close-button-secondary-primary-example-containers-link"
|
|
5601
6132
|
>
|
|
5602
6133
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -5620,6 +6151,7 @@ As sub navigation:
|
|
|
5620
6151
|
type="button"
|
|
5621
6152
|
class="pf-v6-c-tabs__link"
|
|
5622
6153
|
role="tab"
|
|
6154
|
+
aria-selected="false"
|
|
5623
6155
|
id="close-button-secondary-primary-example-database-link"
|
|
5624
6156
|
>
|
|
5625
6157
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -5648,6 +6180,7 @@ As sub navigation:
|
|
|
5648
6180
|
class="pf-v6-c-tabs__link"
|
|
5649
6181
|
disabled
|
|
5650
6182
|
role="tab"
|
|
6183
|
+
aria-selected="false"
|
|
5651
6184
|
id="close-button-secondary-primary-example-disabled-link"
|
|
5652
6185
|
>
|
|
5653
6186
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -5676,6 +6209,7 @@ As sub navigation:
|
|
|
5676
6209
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
5677
6210
|
aria-disabled="true"
|
|
5678
6211
|
role="tab"
|
|
6212
|
+
aria-selected="false"
|
|
5679
6213
|
id="close-button-secondary-primary-example-aria-disabled-link"
|
|
5680
6214
|
>
|
|
5681
6215
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -5704,6 +6238,7 @@ As sub navigation:
|
|
|
5704
6238
|
class="pf-v6-c-tabs__link"
|
|
5705
6239
|
disabled
|
|
5706
6240
|
role="tab"
|
|
6241
|
+
aria-selected="false"
|
|
5707
6242
|
id="close-button-secondary-primary-example-close-disabled-link"
|
|
5708
6243
|
>
|
|
5709
6244
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -5728,6 +6263,7 @@ As sub navigation:
|
|
|
5728
6263
|
type="button"
|
|
5729
6264
|
class="pf-v6-c-tabs__link"
|
|
5730
6265
|
role="tab"
|
|
6266
|
+
aria-selected="false"
|
|
5731
6267
|
id="close-button-secondary-primary-example-network-wired-link"
|
|
5732
6268
|
>
|
|
5733
6269
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -5762,6 +6298,7 @@ As sub navigation:
|
|
|
5762
6298
|
</div>
|
|
5763
6299
|
<div
|
|
5764
6300
|
class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
|
|
6301
|
+
aria-label="Close button with sub tabs example, Containers"
|
|
5765
6302
|
role="region"
|
|
5766
6303
|
id="close-button-secondary-secondary-example"
|
|
5767
6304
|
>
|
|
@@ -5777,12 +6314,17 @@ As sub navigation:
|
|
|
5777
6314
|
</span>
|
|
5778
6315
|
</button>
|
|
5779
6316
|
</div>
|
|
5780
|
-
<ul
|
|
6317
|
+
<ul
|
|
6318
|
+
class="pf-v6-c-tabs__list"
|
|
6319
|
+
role="tablist"
|
|
6320
|
+
aria-label="Close button with sub tabs example, Containers"
|
|
6321
|
+
>
|
|
5781
6322
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
5782
6323
|
<button
|
|
5783
6324
|
type="button"
|
|
5784
6325
|
class="pf-v6-c-tabs__link"
|
|
5785
6326
|
role="tab"
|
|
6327
|
+
aria-selected="false"
|
|
5786
6328
|
id="close-button-secondary-secondary-example-users-link"
|
|
5787
6329
|
>
|
|
5788
6330
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -5806,6 +6348,7 @@ As sub navigation:
|
|
|
5806
6348
|
type="button"
|
|
5807
6349
|
class="pf-v6-c-tabs__link"
|
|
5808
6350
|
role="tab"
|
|
6351
|
+
aria-selected="true"
|
|
5809
6352
|
id="close-button-secondary-secondary-example-containers-link"
|
|
5810
6353
|
>
|
|
5811
6354
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -5829,6 +6372,7 @@ As sub navigation:
|
|
|
5829
6372
|
type="button"
|
|
5830
6373
|
class="pf-v6-c-tabs__link"
|
|
5831
6374
|
role="tab"
|
|
6375
|
+
aria-selected="false"
|
|
5832
6376
|
id="close-button-secondary-secondary-example-database-link"
|
|
5833
6377
|
>
|
|
5834
6378
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -5857,6 +6401,7 @@ As sub navigation:
|
|
|
5857
6401
|
class="pf-v6-c-tabs__link"
|
|
5858
6402
|
disabled
|
|
5859
6403
|
role="tab"
|
|
6404
|
+
aria-selected="false"
|
|
5860
6405
|
id="close-button-secondary-secondary-example-disabled-link"
|
|
5861
6406
|
>
|
|
5862
6407
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -5885,6 +6430,7 @@ As sub navigation:
|
|
|
5885
6430
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
5886
6431
|
aria-disabled="true"
|
|
5887
6432
|
role="tab"
|
|
6433
|
+
aria-selected="false"
|
|
5888
6434
|
id="close-button-secondary-secondary-example-aria-disabled-link"
|
|
5889
6435
|
>
|
|
5890
6436
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -5913,6 +6459,7 @@ As sub navigation:
|
|
|
5913
6459
|
class="pf-v6-c-tabs__link"
|
|
5914
6460
|
disabled
|
|
5915
6461
|
role="tab"
|
|
6462
|
+
aria-selected="false"
|
|
5916
6463
|
id="close-button-secondary-secondary-example-close-disabled-link"
|
|
5917
6464
|
>
|
|
5918
6465
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -5937,6 +6484,7 @@ As sub navigation:
|
|
|
5937
6484
|
type="button"
|
|
5938
6485
|
class="pf-v6-c-tabs__link"
|
|
5939
6486
|
role="tab"
|
|
6487
|
+
aria-selected="false"
|
|
5940
6488
|
id="close-button-secondary-secondary-example-network-wired-link"
|
|
5941
6489
|
>
|
|
5942
6490
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -5977,6 +6525,7 @@ As sub navigation:
|
|
|
5977
6525
|
```html
|
|
5978
6526
|
<div
|
|
5979
6527
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
6528
|
+
aria-label="Help and close button default example"
|
|
5980
6529
|
role="region"
|
|
5981
6530
|
id="help-close-button-default-example"
|
|
5982
6531
|
>
|
|
@@ -5992,12 +6541,17 @@ As sub navigation:
|
|
|
5992
6541
|
</span>
|
|
5993
6542
|
</button>
|
|
5994
6543
|
</div>
|
|
5995
|
-
<ul
|
|
6544
|
+
<ul
|
|
6545
|
+
class="pf-v6-c-tabs__list"
|
|
6546
|
+
role="tablist"
|
|
6547
|
+
aria-label="Help and close button default example"
|
|
6548
|
+
>
|
|
5996
6549
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
5997
6550
|
<button
|
|
5998
6551
|
type="button"
|
|
5999
6552
|
class="pf-v6-c-tabs__link"
|
|
6000
6553
|
role="tab"
|
|
6554
|
+
aria-selected="false"
|
|
6001
6555
|
id="help-close-button-default-example-users-link"
|
|
6002
6556
|
>
|
|
6003
6557
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -6035,6 +6589,7 @@ As sub navigation:
|
|
|
6035
6589
|
type="button"
|
|
6036
6590
|
class="pf-v6-c-tabs__link"
|
|
6037
6591
|
role="tab"
|
|
6592
|
+
aria-selected="true"
|
|
6038
6593
|
id="help-close-button-default-example-containers-link"
|
|
6039
6594
|
>
|
|
6040
6595
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -6072,6 +6627,7 @@ As sub navigation:
|
|
|
6072
6627
|
type="button"
|
|
6073
6628
|
class="pf-v6-c-tabs__link"
|
|
6074
6629
|
role="tab"
|
|
6630
|
+
aria-selected="false"
|
|
6075
6631
|
id="help-close-button-default-example-database-link"
|
|
6076
6632
|
>
|
|
6077
6633
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -6114,6 +6670,7 @@ As sub navigation:
|
|
|
6114
6670
|
class="pf-v6-c-tabs__link"
|
|
6115
6671
|
disabled
|
|
6116
6672
|
role="tab"
|
|
6673
|
+
aria-selected="false"
|
|
6117
6674
|
id="help-close-button-default-example-disabled-link"
|
|
6118
6675
|
>
|
|
6119
6676
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -6157,6 +6714,7 @@ As sub navigation:
|
|
|
6157
6714
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
6158
6715
|
aria-disabled="true"
|
|
6159
6716
|
role="tab"
|
|
6717
|
+
aria-selected="false"
|
|
6160
6718
|
id="help-close-button-default-example-aria-disabled-link"
|
|
6161
6719
|
>
|
|
6162
6720
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -6200,6 +6758,7 @@ As sub navigation:
|
|
|
6200
6758
|
class="pf-v6-c-tabs__link"
|
|
6201
6759
|
disabled
|
|
6202
6760
|
role="tab"
|
|
6761
|
+
aria-selected="false"
|
|
6203
6762
|
id="help-close-button-default-example-help-disabled-link"
|
|
6204
6763
|
>
|
|
6205
6764
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -6242,6 +6801,7 @@ As sub navigation:
|
|
|
6242
6801
|
class="pf-v6-c-tabs__link"
|
|
6243
6802
|
disabled
|
|
6244
6803
|
role="tab"
|
|
6804
|
+
aria-selected="false"
|
|
6245
6805
|
id="help-close-button-default-example-close-disabled-link"
|
|
6246
6806
|
>
|
|
6247
6807
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -6284,6 +6844,7 @@ As sub navigation:
|
|
|
6284
6844
|
class="pf-v6-c-tabs__link"
|
|
6285
6845
|
disabled
|
|
6286
6846
|
role="tab"
|
|
6847
|
+
aria-selected="false"
|
|
6287
6848
|
id="help-close-button-default-example-help-close-disabled-link"
|
|
6288
6849
|
>
|
|
6289
6850
|
<span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
|
|
@@ -6323,6 +6884,7 @@ As sub navigation:
|
|
|
6323
6884
|
type="button"
|
|
6324
6885
|
class="pf-v6-c-tabs__link"
|
|
6325
6886
|
role="tab"
|
|
6887
|
+
aria-selected="false"
|
|
6326
6888
|
id="help-close-button-default-example-network-wired-link"
|
|
6327
6889
|
>
|
|
6328
6890
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -6375,6 +6937,7 @@ As sub navigation:
|
|
|
6375
6937
|
|
|
6376
6938
|
<div
|
|
6377
6939
|
class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
|
|
6940
|
+
aria-label="Help and close button box example"
|
|
6378
6941
|
role="region"
|
|
6379
6942
|
id="help-close-button-box-example"
|
|
6380
6943
|
>
|
|
@@ -6390,12 +6953,17 @@ As sub navigation:
|
|
|
6390
6953
|
</span>
|
|
6391
6954
|
</button>
|
|
6392
6955
|
</div>
|
|
6393
|
-
<ul
|
|
6956
|
+
<ul
|
|
6957
|
+
class="pf-v6-c-tabs__list"
|
|
6958
|
+
role="tablist"
|
|
6959
|
+
aria-label="Help and close button box example"
|
|
6960
|
+
>
|
|
6394
6961
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
6395
6962
|
<button
|
|
6396
6963
|
type="button"
|
|
6397
6964
|
class="pf-v6-c-tabs__link"
|
|
6398
6965
|
role="tab"
|
|
6966
|
+
aria-selected="false"
|
|
6399
6967
|
id="help-close-button-box-example-users-link"
|
|
6400
6968
|
>
|
|
6401
6969
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -6433,6 +7001,7 @@ As sub navigation:
|
|
|
6433
7001
|
type="button"
|
|
6434
7002
|
class="pf-v6-c-tabs__link"
|
|
6435
7003
|
role="tab"
|
|
7004
|
+
aria-selected="true"
|
|
6436
7005
|
id="help-close-button-box-example-containers-link"
|
|
6437
7006
|
>
|
|
6438
7007
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -6470,6 +7039,7 @@ As sub navigation:
|
|
|
6470
7039
|
type="button"
|
|
6471
7040
|
class="pf-v6-c-tabs__link"
|
|
6472
7041
|
role="tab"
|
|
7042
|
+
aria-selected="false"
|
|
6473
7043
|
id="help-close-button-box-example-database-link"
|
|
6474
7044
|
>
|
|
6475
7045
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -6512,6 +7082,7 @@ As sub navigation:
|
|
|
6512
7082
|
class="pf-v6-c-tabs__link"
|
|
6513
7083
|
disabled
|
|
6514
7084
|
role="tab"
|
|
7085
|
+
aria-selected="false"
|
|
6515
7086
|
id="help-close-button-box-example-disabled-link"
|
|
6516
7087
|
>
|
|
6517
7088
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -6555,6 +7126,7 @@ As sub navigation:
|
|
|
6555
7126
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
6556
7127
|
aria-disabled="true"
|
|
6557
7128
|
role="tab"
|
|
7129
|
+
aria-selected="false"
|
|
6558
7130
|
id="help-close-button-box-example-aria-disabled-link"
|
|
6559
7131
|
>
|
|
6560
7132
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -6598,6 +7170,7 @@ As sub navigation:
|
|
|
6598
7170
|
class="pf-v6-c-tabs__link"
|
|
6599
7171
|
disabled
|
|
6600
7172
|
role="tab"
|
|
7173
|
+
aria-selected="false"
|
|
6601
7174
|
id="help-close-button-box-example-help-disabled-link"
|
|
6602
7175
|
>
|
|
6603
7176
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -6640,6 +7213,7 @@ As sub navigation:
|
|
|
6640
7213
|
class="pf-v6-c-tabs__link"
|
|
6641
7214
|
disabled
|
|
6642
7215
|
role="tab"
|
|
7216
|
+
aria-selected="false"
|
|
6643
7217
|
id="help-close-button-box-example-close-disabled-link"
|
|
6644
7218
|
>
|
|
6645
7219
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -6682,6 +7256,7 @@ As sub navigation:
|
|
|
6682
7256
|
class="pf-v6-c-tabs__link"
|
|
6683
7257
|
disabled
|
|
6684
7258
|
role="tab"
|
|
7259
|
+
aria-selected="false"
|
|
6685
7260
|
id="help-close-button-box-example-help-close-disabled-link"
|
|
6686
7261
|
>
|
|
6687
7262
|
<span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
|
|
@@ -6721,6 +7296,7 @@ As sub navigation:
|
|
|
6721
7296
|
type="button"
|
|
6722
7297
|
class="pf-v6-c-tabs__link"
|
|
6723
7298
|
role="tab"
|
|
7299
|
+
aria-selected="false"
|
|
6724
7300
|
id="help-close-button-box-example-network-wired-link"
|
|
6725
7301
|
>
|
|
6726
7302
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -6773,6 +7349,7 @@ As sub navigation:
|
|
|
6773
7349
|
|
|
6774
7350
|
<div
|
|
6775
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"
|
|
6776
7353
|
role="region"
|
|
6777
7354
|
id="help-close-button-box-secondary-example"
|
|
6778
7355
|
>
|
|
@@ -6788,12 +7365,17 @@ As sub navigation:
|
|
|
6788
7365
|
</span>
|
|
6789
7366
|
</button>
|
|
6790
7367
|
</div>
|
|
6791
|
-
<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
|
+
>
|
|
6792
7373
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
6793
7374
|
<button
|
|
6794
7375
|
type="button"
|
|
6795
7376
|
class="pf-v6-c-tabs__link"
|
|
6796
7377
|
role="tab"
|
|
7378
|
+
aria-selected="false"
|
|
6797
7379
|
id="help-close-button-box-secondary-example-users-link"
|
|
6798
7380
|
>
|
|
6799
7381
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -6831,6 +7413,7 @@ As sub navigation:
|
|
|
6831
7413
|
type="button"
|
|
6832
7414
|
class="pf-v6-c-tabs__link"
|
|
6833
7415
|
role="tab"
|
|
7416
|
+
aria-selected="true"
|
|
6834
7417
|
id="help-close-button-box-secondary-example-containers-link"
|
|
6835
7418
|
>
|
|
6836
7419
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -6868,6 +7451,7 @@ As sub navigation:
|
|
|
6868
7451
|
type="button"
|
|
6869
7452
|
class="pf-v6-c-tabs__link"
|
|
6870
7453
|
role="tab"
|
|
7454
|
+
aria-selected="false"
|
|
6871
7455
|
id="help-close-button-box-secondary-example-database-link"
|
|
6872
7456
|
>
|
|
6873
7457
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -6910,6 +7494,7 @@ As sub navigation:
|
|
|
6910
7494
|
class="pf-v6-c-tabs__link"
|
|
6911
7495
|
disabled
|
|
6912
7496
|
role="tab"
|
|
7497
|
+
aria-selected="false"
|
|
6913
7498
|
id="help-close-button-box-secondary-example-disabled-link"
|
|
6914
7499
|
>
|
|
6915
7500
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -6953,6 +7538,7 @@ As sub navigation:
|
|
|
6953
7538
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
6954
7539
|
aria-disabled="true"
|
|
6955
7540
|
role="tab"
|
|
7541
|
+
aria-selected="false"
|
|
6956
7542
|
id="help-close-button-box-secondary-example-aria-disabled-link"
|
|
6957
7543
|
>
|
|
6958
7544
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -6996,6 +7582,7 @@ As sub navigation:
|
|
|
6996
7582
|
class="pf-v6-c-tabs__link"
|
|
6997
7583
|
disabled
|
|
6998
7584
|
role="tab"
|
|
7585
|
+
aria-selected="false"
|
|
6999
7586
|
id="help-close-button-box-secondary-example-help-disabled-link"
|
|
7000
7587
|
>
|
|
7001
7588
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -7038,6 +7625,7 @@ As sub navigation:
|
|
|
7038
7625
|
class="pf-v6-c-tabs__link"
|
|
7039
7626
|
disabled
|
|
7040
7627
|
role="tab"
|
|
7628
|
+
aria-selected="false"
|
|
7041
7629
|
id="help-close-button-box-secondary-example-close-disabled-link"
|
|
7042
7630
|
>
|
|
7043
7631
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -7080,6 +7668,7 @@ As sub navigation:
|
|
|
7080
7668
|
class="pf-v6-c-tabs__link"
|
|
7081
7669
|
disabled
|
|
7082
7670
|
role="tab"
|
|
7671
|
+
aria-selected="false"
|
|
7083
7672
|
id="help-close-button-box-secondary-example-help-close-disabled-link"
|
|
7084
7673
|
>
|
|
7085
7674
|
<span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
|
|
@@ -7119,6 +7708,7 @@ As sub navigation:
|
|
|
7119
7708
|
type="button"
|
|
7120
7709
|
class="pf-v6-c-tabs__link"
|
|
7121
7710
|
role="tab"
|
|
7711
|
+
aria-selected="false"
|
|
7122
7712
|
id="help-close-button-box-secondary-example-network-wired-link"
|
|
7123
7713
|
>
|
|
7124
7714
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -7171,6 +7761,7 @@ As sub navigation:
|
|
|
7171
7761
|
|
|
7172
7762
|
<div
|
|
7173
7763
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
7764
|
+
aria-label="Help and close button with icons example"
|
|
7174
7765
|
role="region"
|
|
7175
7766
|
id="help-close-button-icons-text-example"
|
|
7176
7767
|
>
|
|
@@ -7186,12 +7777,17 @@ As sub navigation:
|
|
|
7186
7777
|
</span>
|
|
7187
7778
|
</button>
|
|
7188
7779
|
</div>
|
|
7189
|
-
<ul
|
|
7780
|
+
<ul
|
|
7781
|
+
class="pf-v6-c-tabs__list"
|
|
7782
|
+
role="tablist"
|
|
7783
|
+
aria-label="Help and close button with icons example"
|
|
7784
|
+
>
|
|
7190
7785
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
7191
7786
|
<button
|
|
7192
7787
|
type="button"
|
|
7193
7788
|
class="pf-v6-c-tabs__link"
|
|
7194
7789
|
role="tab"
|
|
7790
|
+
aria-selected="false"
|
|
7195
7791
|
id="help-close-button-icons-text-example-users-link"
|
|
7196
7792
|
>
|
|
7197
7793
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7232,6 +7828,7 @@ As sub navigation:
|
|
|
7232
7828
|
type="button"
|
|
7233
7829
|
class="pf-v6-c-tabs__link"
|
|
7234
7830
|
role="tab"
|
|
7831
|
+
aria-selected="true"
|
|
7235
7832
|
id="help-close-button-icons-text-example-containers-link"
|
|
7236
7833
|
>
|
|
7237
7834
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7272,6 +7869,7 @@ As sub navigation:
|
|
|
7272
7869
|
type="button"
|
|
7273
7870
|
class="pf-v6-c-tabs__link"
|
|
7274
7871
|
role="tab"
|
|
7872
|
+
aria-selected="false"
|
|
7275
7873
|
id="help-close-button-icons-text-example-database-link"
|
|
7276
7874
|
>
|
|
7277
7875
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7317,6 +7915,7 @@ As sub navigation:
|
|
|
7317
7915
|
class="pf-v6-c-tabs__link"
|
|
7318
7916
|
disabled
|
|
7319
7917
|
role="tab"
|
|
7918
|
+
aria-selected="false"
|
|
7320
7919
|
id="help-close-button-icons-text-example-disabled-link"
|
|
7321
7920
|
>
|
|
7322
7921
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7363,6 +7962,7 @@ As sub navigation:
|
|
|
7363
7962
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
7364
7963
|
aria-disabled="true"
|
|
7365
7964
|
role="tab"
|
|
7965
|
+
aria-selected="false"
|
|
7366
7966
|
id="help-close-button-icons-text-example-aria-disabled-link"
|
|
7367
7967
|
>
|
|
7368
7968
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7409,6 +8009,7 @@ As sub navigation:
|
|
|
7409
8009
|
class="pf-v6-c-tabs__link"
|
|
7410
8010
|
disabled
|
|
7411
8011
|
role="tab"
|
|
8012
|
+
aria-selected="false"
|
|
7412
8013
|
id="help-close-button-icons-text-example-help-disabled-link"
|
|
7413
8014
|
>
|
|
7414
8015
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7454,6 +8055,7 @@ As sub navigation:
|
|
|
7454
8055
|
class="pf-v6-c-tabs__link"
|
|
7455
8056
|
disabled
|
|
7456
8057
|
role="tab"
|
|
8058
|
+
aria-selected="false"
|
|
7457
8059
|
id="help-close-button-icons-text-example-close-disabled-link"
|
|
7458
8060
|
>
|
|
7459
8061
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7499,6 +8101,7 @@ As sub navigation:
|
|
|
7499
8101
|
class="pf-v6-c-tabs__link"
|
|
7500
8102
|
disabled
|
|
7501
8103
|
role="tab"
|
|
8104
|
+
aria-selected="false"
|
|
7502
8105
|
id="help-close-button-icons-text-example-help-close-disabled-link"
|
|
7503
8106
|
>
|
|
7504
8107
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7541,6 +8144,7 @@ As sub navigation:
|
|
|
7541
8144
|
type="button"
|
|
7542
8145
|
class="pf-v6-c-tabs__link"
|
|
7543
8146
|
role="tab"
|
|
8147
|
+
aria-selected="false"
|
|
7544
8148
|
id="help-close-button-icons-text-example-network-wired-link"
|
|
7545
8149
|
>
|
|
7546
8150
|
<span class="pf-v6-c-tabs__item-icon">
|
|
@@ -7596,6 +8200,7 @@ As sub navigation:
|
|
|
7596
8200
|
|
|
7597
8201
|
<div
|
|
7598
8202
|
class="pf-v6-c-tabs pf-m-fill"
|
|
8203
|
+
aria-label="Help and close button filled example"
|
|
7599
8204
|
role="region"
|
|
7600
8205
|
id="help-close-button-filled-example"
|
|
7601
8206
|
>
|
|
@@ -7611,12 +8216,17 @@ As sub navigation:
|
|
|
7611
8216
|
</span>
|
|
7612
8217
|
</button>
|
|
7613
8218
|
</div>
|
|
7614
|
-
<ul
|
|
8219
|
+
<ul
|
|
8220
|
+
class="pf-v6-c-tabs__list"
|
|
8221
|
+
role="tablist"
|
|
8222
|
+
aria-label="Help and close button filled example"
|
|
8223
|
+
>
|
|
7615
8224
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
7616
8225
|
<button
|
|
7617
8226
|
type="button"
|
|
7618
8227
|
class="pf-v6-c-tabs__link"
|
|
7619
8228
|
role="tab"
|
|
8229
|
+
aria-selected="false"
|
|
7620
8230
|
id="help-close-button-filled-example-users-link"
|
|
7621
8231
|
>
|
|
7622
8232
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -7654,6 +8264,7 @@ As sub navigation:
|
|
|
7654
8264
|
type="button"
|
|
7655
8265
|
class="pf-v6-c-tabs__link"
|
|
7656
8266
|
role="tab"
|
|
8267
|
+
aria-selected="true"
|
|
7657
8268
|
id="help-close-button-filled-example-containers-link"
|
|
7658
8269
|
>
|
|
7659
8270
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -7691,6 +8302,7 @@ As sub navigation:
|
|
|
7691
8302
|
type="button"
|
|
7692
8303
|
class="pf-v6-c-tabs__link"
|
|
7693
8304
|
role="tab"
|
|
8305
|
+
aria-selected="false"
|
|
7694
8306
|
id="help-close-button-filled-example-database-link"
|
|
7695
8307
|
>
|
|
7696
8308
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -7744,6 +8356,7 @@ As sub navigation:
|
|
|
7744
8356
|
|
|
7745
8357
|
<div
|
|
7746
8358
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
8359
|
+
aria-label="Help and close button with sub tabs example, primary"
|
|
7747
8360
|
role="region"
|
|
7748
8361
|
id="help-close-button-secondary-primary-example"
|
|
7749
8362
|
>
|
|
@@ -7759,12 +8372,17 @@ As sub navigation:
|
|
|
7759
8372
|
</span>
|
|
7760
8373
|
</button>
|
|
7761
8374
|
</div>
|
|
7762
|
-
<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
|
+
>
|
|
7763
8380
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
7764
8381
|
<button
|
|
7765
8382
|
type="button"
|
|
7766
8383
|
class="pf-v6-c-tabs__link"
|
|
7767
8384
|
role="tab"
|
|
8385
|
+
aria-selected="false"
|
|
7768
8386
|
id="help-close-button-secondary-primary-example-users-link"
|
|
7769
8387
|
>
|
|
7770
8388
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -7802,6 +8420,7 @@ As sub navigation:
|
|
|
7802
8420
|
type="button"
|
|
7803
8421
|
class="pf-v6-c-tabs__link"
|
|
7804
8422
|
role="tab"
|
|
8423
|
+
aria-selected="true"
|
|
7805
8424
|
id="help-close-button-secondary-primary-example-containers-link"
|
|
7806
8425
|
>
|
|
7807
8426
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -7839,6 +8458,7 @@ As sub navigation:
|
|
|
7839
8458
|
type="button"
|
|
7840
8459
|
class="pf-v6-c-tabs__link"
|
|
7841
8460
|
role="tab"
|
|
8461
|
+
aria-selected="false"
|
|
7842
8462
|
id="help-close-button-secondary-primary-example-database-link"
|
|
7843
8463
|
>
|
|
7844
8464
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -7881,6 +8501,7 @@ As sub navigation:
|
|
|
7881
8501
|
class="pf-v6-c-tabs__link"
|
|
7882
8502
|
disabled
|
|
7883
8503
|
role="tab"
|
|
8504
|
+
aria-selected="false"
|
|
7884
8505
|
id="help-close-button-secondary-primary-example-disabled-link"
|
|
7885
8506
|
>
|
|
7886
8507
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -7924,6 +8545,7 @@ As sub navigation:
|
|
|
7924
8545
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
7925
8546
|
aria-disabled="true"
|
|
7926
8547
|
role="tab"
|
|
8548
|
+
aria-selected="false"
|
|
7927
8549
|
id="help-close-button-secondary-primary-example-aria-disabled-link"
|
|
7928
8550
|
>
|
|
7929
8551
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -7967,6 +8589,7 @@ As sub navigation:
|
|
|
7967
8589
|
class="pf-v6-c-tabs__link"
|
|
7968
8590
|
disabled
|
|
7969
8591
|
role="tab"
|
|
8592
|
+
aria-selected="false"
|
|
7970
8593
|
id="help-close-button-secondary-primary-example-help-disabled-link"
|
|
7971
8594
|
>
|
|
7972
8595
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -8009,6 +8632,7 @@ As sub navigation:
|
|
|
8009
8632
|
class="pf-v6-c-tabs__link"
|
|
8010
8633
|
disabled
|
|
8011
8634
|
role="tab"
|
|
8635
|
+
aria-selected="false"
|
|
8012
8636
|
id="help-close-button-secondary-primary-example-close-disabled-link"
|
|
8013
8637
|
>
|
|
8014
8638
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -8051,6 +8675,7 @@ As sub navigation:
|
|
|
8051
8675
|
class="pf-v6-c-tabs__link"
|
|
8052
8676
|
disabled
|
|
8053
8677
|
role="tab"
|
|
8678
|
+
aria-selected="false"
|
|
8054
8679
|
id="help-close-button-secondary-primary-example-help-close-disabled-link"
|
|
8055
8680
|
>
|
|
8056
8681
|
<span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
|
|
@@ -8090,6 +8715,7 @@ As sub navigation:
|
|
|
8090
8715
|
type="button"
|
|
8091
8716
|
class="pf-v6-c-tabs__link"
|
|
8092
8717
|
role="tab"
|
|
8718
|
+
aria-selected="false"
|
|
8093
8719
|
id="help-close-button-secondary-primary-example-network-wired-link"
|
|
8094
8720
|
>
|
|
8095
8721
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -8138,6 +8764,7 @@ As sub navigation:
|
|
|
8138
8764
|
</div>
|
|
8139
8765
|
<div
|
|
8140
8766
|
class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
|
|
8767
|
+
aria-label="Help and close button with sub tabs example, Containers"
|
|
8141
8768
|
role="region"
|
|
8142
8769
|
id="help-close-button-secondary-secondary-example"
|
|
8143
8770
|
>
|
|
@@ -8153,12 +8780,17 @@ As sub navigation:
|
|
|
8153
8780
|
</span>
|
|
8154
8781
|
</button>
|
|
8155
8782
|
</div>
|
|
8156
|
-
<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
|
+
>
|
|
8157
8788
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
8158
8789
|
<button
|
|
8159
8790
|
type="button"
|
|
8160
8791
|
class="pf-v6-c-tabs__link"
|
|
8161
8792
|
role="tab"
|
|
8793
|
+
aria-selected="false"
|
|
8162
8794
|
id="help-close-button-secondary-secondary-example-users-link"
|
|
8163
8795
|
>
|
|
8164
8796
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -8196,6 +8828,7 @@ As sub navigation:
|
|
|
8196
8828
|
type="button"
|
|
8197
8829
|
class="pf-v6-c-tabs__link"
|
|
8198
8830
|
role="tab"
|
|
8831
|
+
aria-selected="true"
|
|
8199
8832
|
id="help-close-button-secondary-secondary-example-containers-link"
|
|
8200
8833
|
>
|
|
8201
8834
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -8233,6 +8866,7 @@ As sub navigation:
|
|
|
8233
8866
|
type="button"
|
|
8234
8867
|
class="pf-v6-c-tabs__link"
|
|
8235
8868
|
role="tab"
|
|
8869
|
+
aria-selected="false"
|
|
8236
8870
|
id="help-close-button-secondary-secondary-example-database-link"
|
|
8237
8871
|
>
|
|
8238
8872
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -8275,6 +8909,7 @@ As sub navigation:
|
|
|
8275
8909
|
class="pf-v6-c-tabs__link"
|
|
8276
8910
|
disabled
|
|
8277
8911
|
role="tab"
|
|
8912
|
+
aria-selected="false"
|
|
8278
8913
|
id="help-close-button-secondary-secondary-example-disabled-link"
|
|
8279
8914
|
>
|
|
8280
8915
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -8318,6 +8953,7 @@ As sub navigation:
|
|
|
8318
8953
|
class="pf-v6-c-tabs__link pf-m-aria-disabled"
|
|
8319
8954
|
aria-disabled="true"
|
|
8320
8955
|
role="tab"
|
|
8956
|
+
aria-selected="false"
|
|
8321
8957
|
id="help-close-button-secondary-secondary-example-aria-disabled-link"
|
|
8322
8958
|
>
|
|
8323
8959
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -8361,6 +8997,7 @@ As sub navigation:
|
|
|
8361
8997
|
class="pf-v6-c-tabs__link"
|
|
8362
8998
|
disabled
|
|
8363
8999
|
role="tab"
|
|
9000
|
+
aria-selected="false"
|
|
8364
9001
|
id="help-close-button-secondary-secondary-example-help-disabled-link"
|
|
8365
9002
|
>
|
|
8366
9003
|
<span class="pf-v6-c-tabs__item-text">Help disabled</span>
|
|
@@ -8403,6 +9040,7 @@ As sub navigation:
|
|
|
8403
9040
|
class="pf-v6-c-tabs__link"
|
|
8404
9041
|
disabled
|
|
8405
9042
|
role="tab"
|
|
9043
|
+
aria-selected="false"
|
|
8406
9044
|
id="help-close-button-secondary-secondary-example-close-disabled-link"
|
|
8407
9045
|
>
|
|
8408
9046
|
<span class="pf-v6-c-tabs__item-text">Close disabled</span>
|
|
@@ -8445,6 +9083,7 @@ As sub navigation:
|
|
|
8445
9083
|
class="pf-v6-c-tabs__link"
|
|
8446
9084
|
disabled
|
|
8447
9085
|
role="tab"
|
|
9086
|
+
aria-selected="false"
|
|
8448
9087
|
id="help-close-button-secondary-secondary-example-help-close-disabled-link"
|
|
8449
9088
|
>
|
|
8450
9089
|
<span class="pf-v6-c-tabs__item-text">Help and close disabled</span>
|
|
@@ -8484,6 +9123,7 @@ As sub navigation:
|
|
|
8484
9123
|
type="button"
|
|
8485
9124
|
class="pf-v6-c-tabs__link"
|
|
8486
9125
|
role="tab"
|
|
9126
|
+
aria-selected="false"
|
|
8487
9127
|
id="help-close-button-secondary-secondary-example-network-wired-link"
|
|
8488
9128
|
>
|
|
8489
9129
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -8540,6 +9180,7 @@ As sub navigation:
|
|
|
8540
9180
|
```html
|
|
8541
9181
|
<div
|
|
8542
9182
|
class="pf-v6-c-tabs pf-m-scrollable"
|
|
9183
|
+
aria-label="Add button with sub tabs example, primary"
|
|
8543
9184
|
role="region"
|
|
8544
9185
|
id="default-tabs-add-tab-button"
|
|
8545
9186
|
>
|
|
@@ -8555,12 +9196,17 @@ As sub navigation:
|
|
|
8555
9196
|
</span>
|
|
8556
9197
|
</button>
|
|
8557
9198
|
</div>
|
|
8558
|
-
<ul
|
|
9199
|
+
<ul
|
|
9200
|
+
class="pf-v6-c-tabs__list"
|
|
9201
|
+
role="tablist"
|
|
9202
|
+
aria-label="Add button with sub tabs example, primary"
|
|
9203
|
+
>
|
|
8559
9204
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
8560
9205
|
<button
|
|
8561
9206
|
type="button"
|
|
8562
9207
|
class="pf-v6-c-tabs__link"
|
|
8563
9208
|
role="tab"
|
|
9209
|
+
aria-selected="false"
|
|
8564
9210
|
id="default-tabs-add-tab-button-users-link"
|
|
8565
9211
|
>
|
|
8566
9212
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -8584,6 +9230,7 @@ As sub navigation:
|
|
|
8584
9230
|
type="button"
|
|
8585
9231
|
class="pf-v6-c-tabs__link"
|
|
8586
9232
|
role="tab"
|
|
9233
|
+
aria-selected="true"
|
|
8587
9234
|
id="default-tabs-add-tab-button-containers-link"
|
|
8588
9235
|
>
|
|
8589
9236
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -8607,6 +9254,7 @@ As sub navigation:
|
|
|
8607
9254
|
type="button"
|
|
8608
9255
|
class="pf-v6-c-tabs__link"
|
|
8609
9256
|
role="tab"
|
|
9257
|
+
aria-selected="false"
|
|
8610
9258
|
id="default-tabs-add-tab-button-database-link"
|
|
8611
9259
|
>
|
|
8612
9260
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -8631,6 +9279,7 @@ As sub navigation:
|
|
|
8631
9279
|
type="button"
|
|
8632
9280
|
class="pf-v6-c-tabs__link"
|
|
8633
9281
|
role="tab"
|
|
9282
|
+
aria-selected="false"
|
|
8634
9283
|
id="default-tabs-add-tab-button-server-link"
|
|
8635
9284
|
>
|
|
8636
9285
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -8654,6 +9303,7 @@ As sub navigation:
|
|
|
8654
9303
|
type="button"
|
|
8655
9304
|
class="pf-v6-c-tabs__link"
|
|
8656
9305
|
role="tab"
|
|
9306
|
+
aria-selected="false"
|
|
8657
9307
|
id="default-tabs-add-tab-button-system-link"
|
|
8658
9308
|
>
|
|
8659
9309
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -8677,6 +9327,7 @@ As sub navigation:
|
|
|
8677
9327
|
type="button"
|
|
8678
9328
|
class="pf-v6-c-tabs__link"
|
|
8679
9329
|
role="tab"
|
|
9330
|
+
aria-selected="false"
|
|
8680
9331
|
id="default-tabs-add-tab-button-network-wired-link"
|
|
8681
9332
|
>
|
|
8682
9333
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -8722,6 +9373,7 @@ As sub navigation:
|
|
|
8722
9373
|
</div>
|
|
8723
9374
|
<div
|
|
8724
9375
|
class="pf-v6-c-tabs pf-m-subtab pf-m-scrollable"
|
|
9376
|
+
aria-label="Add button with sub tabs example, Containers"
|
|
8725
9377
|
role="region"
|
|
8726
9378
|
id="default-tabs-add-tab-button-subtab"
|
|
8727
9379
|
>
|
|
@@ -8737,12 +9389,17 @@ As sub navigation:
|
|
|
8737
9389
|
</span>
|
|
8738
9390
|
</button>
|
|
8739
9391
|
</div>
|
|
8740
|
-
<ul
|
|
9392
|
+
<ul
|
|
9393
|
+
class="pf-v6-c-tabs__list"
|
|
9394
|
+
role="tablist"
|
|
9395
|
+
aria-label="Add button with sub tabs example, Containers"
|
|
9396
|
+
>
|
|
8741
9397
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
8742
9398
|
<button
|
|
8743
9399
|
type="button"
|
|
8744
9400
|
class="pf-v6-c-tabs__link"
|
|
8745
9401
|
role="tab"
|
|
9402
|
+
aria-selected="false"
|
|
8746
9403
|
id="default-tabs-add-tab-button-subtab-users-link"
|
|
8747
9404
|
>
|
|
8748
9405
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -8766,6 +9423,7 @@ As sub navigation:
|
|
|
8766
9423
|
type="button"
|
|
8767
9424
|
class="pf-v6-c-tabs__link"
|
|
8768
9425
|
role="tab"
|
|
9426
|
+
aria-selected="true"
|
|
8769
9427
|
id="default-tabs-add-tab-button-subtab-containers-link"
|
|
8770
9428
|
>
|
|
8771
9429
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -8789,6 +9447,7 @@ As sub navigation:
|
|
|
8789
9447
|
type="button"
|
|
8790
9448
|
class="pf-v6-c-tabs__link"
|
|
8791
9449
|
role="tab"
|
|
9450
|
+
aria-selected="false"
|
|
8792
9451
|
id="default-tabs-add-tab-button-subtab-database-link"
|
|
8793
9452
|
>
|
|
8794
9453
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -8813,6 +9472,7 @@ As sub navigation:
|
|
|
8813
9472
|
type="button"
|
|
8814
9473
|
class="pf-v6-c-tabs__link"
|
|
8815
9474
|
role="tab"
|
|
9475
|
+
aria-selected="false"
|
|
8816
9476
|
id="default-tabs-add-tab-button-subtab-server-link"
|
|
8817
9477
|
>
|
|
8818
9478
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -8836,6 +9496,7 @@ As sub navigation:
|
|
|
8836
9496
|
type="button"
|
|
8837
9497
|
class="pf-v6-c-tabs__link"
|
|
8838
9498
|
role="tab"
|
|
9499
|
+
aria-selected="false"
|
|
8839
9500
|
id="default-tabs-add-tab-button-subtab-system-link"
|
|
8840
9501
|
>
|
|
8841
9502
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -8859,6 +9520,7 @@ As sub navigation:
|
|
|
8859
9520
|
type="button"
|
|
8860
9521
|
class="pf-v6-c-tabs__link"
|
|
8861
9522
|
role="tab"
|
|
9523
|
+
aria-selected="false"
|
|
8862
9524
|
id="default-tabs-add-tab-button-subtab-network-wired-link"
|
|
8863
9525
|
>
|
|
8864
9526
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -8908,6 +9570,7 @@ As sub navigation:
|
|
|
8908
9570
|
|
|
8909
9571
|
<div
|
|
8910
9572
|
class="pf-v6-c-tabs pf-m-box pf-m-scrollable"
|
|
9573
|
+
aria-label="Add button box example"
|
|
8911
9574
|
role="region"
|
|
8912
9575
|
id="box-tabs-add-tab-button"
|
|
8913
9576
|
>
|
|
@@ -8923,12 +9586,17 @@ As sub navigation:
|
|
|
8923
9586
|
</span>
|
|
8924
9587
|
</button>
|
|
8925
9588
|
</div>
|
|
8926
|
-
<ul
|
|
9589
|
+
<ul
|
|
9590
|
+
class="pf-v6-c-tabs__list"
|
|
9591
|
+
role="tablist"
|
|
9592
|
+
aria-label="Add button box example"
|
|
9593
|
+
>
|
|
8927
9594
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
8928
9595
|
<button
|
|
8929
9596
|
type="button"
|
|
8930
9597
|
class="pf-v6-c-tabs__link"
|
|
8931
9598
|
role="tab"
|
|
9599
|
+
aria-selected="false"
|
|
8932
9600
|
id="box-tabs-add-tab-button-users-link"
|
|
8933
9601
|
>
|
|
8934
9602
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -8952,6 +9620,7 @@ As sub navigation:
|
|
|
8952
9620
|
type="button"
|
|
8953
9621
|
class="pf-v6-c-tabs__link"
|
|
8954
9622
|
role="tab"
|
|
9623
|
+
aria-selected="true"
|
|
8955
9624
|
id="box-tabs-add-tab-button-containers-link"
|
|
8956
9625
|
>
|
|
8957
9626
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -8975,6 +9644,7 @@ As sub navigation:
|
|
|
8975
9644
|
type="button"
|
|
8976
9645
|
class="pf-v6-c-tabs__link"
|
|
8977
9646
|
role="tab"
|
|
9647
|
+
aria-selected="false"
|
|
8978
9648
|
id="box-tabs-add-tab-button-database-link"
|
|
8979
9649
|
>
|
|
8980
9650
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -8999,6 +9669,7 @@ As sub navigation:
|
|
|
8999
9669
|
type="button"
|
|
9000
9670
|
class="pf-v6-c-tabs__link"
|
|
9001
9671
|
role="tab"
|
|
9672
|
+
aria-selected="false"
|
|
9002
9673
|
id="box-tabs-add-tab-button-server-link"
|
|
9003
9674
|
>
|
|
9004
9675
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -9022,6 +9693,7 @@ As sub navigation:
|
|
|
9022
9693
|
type="button"
|
|
9023
9694
|
class="pf-v6-c-tabs__link"
|
|
9024
9695
|
role="tab"
|
|
9696
|
+
aria-selected="false"
|
|
9025
9697
|
id="box-tabs-add-tab-button-system-link"
|
|
9026
9698
|
>
|
|
9027
9699
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -9045,6 +9717,7 @@ As sub navigation:
|
|
|
9045
9717
|
type="button"
|
|
9046
9718
|
class="pf-v6-c-tabs__link"
|
|
9047
9719
|
role="tab"
|
|
9720
|
+
aria-selected="false"
|
|
9048
9721
|
id="box-tabs-add-tab-button-network-wired-link"
|
|
9049
9722
|
>
|
|
9050
9723
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -9094,6 +9767,7 @@ As sub navigation:
|
|
|
9094
9767
|
|
|
9095
9768
|
<div
|
|
9096
9769
|
class="pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable"
|
|
9770
|
+
aria-label="Add button box secondary variant example"
|
|
9097
9771
|
role="region"
|
|
9098
9772
|
id="box-tabs-add-tab-button-secondary "
|
|
9099
9773
|
>
|
|
@@ -9109,12 +9783,17 @@ As sub navigation:
|
|
|
9109
9783
|
</span>
|
|
9110
9784
|
</button>
|
|
9111
9785
|
</div>
|
|
9112
|
-
<ul
|
|
9786
|
+
<ul
|
|
9787
|
+
class="pf-v6-c-tabs__list"
|
|
9788
|
+
role="tablist"
|
|
9789
|
+
aria-label="Add button box secondary variant example"
|
|
9790
|
+
>
|
|
9113
9791
|
<li class="pf-v6-c-tabs__item pf-m-action" role="presentation">
|
|
9114
9792
|
<button
|
|
9115
9793
|
type="button"
|
|
9116
9794
|
class="pf-v6-c-tabs__link"
|
|
9117
9795
|
role="tab"
|
|
9796
|
+
aria-selected="false"
|
|
9118
9797
|
id="box-tabs-add-tab-button-secondary -users-link"
|
|
9119
9798
|
>
|
|
9120
9799
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -9138,6 +9817,7 @@ As sub navigation:
|
|
|
9138
9817
|
type="button"
|
|
9139
9818
|
class="pf-v6-c-tabs__link"
|
|
9140
9819
|
role="tab"
|
|
9820
|
+
aria-selected="true"
|
|
9141
9821
|
id="box-tabs-add-tab-button-secondary -containers-link"
|
|
9142
9822
|
>
|
|
9143
9823
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -9161,6 +9841,7 @@ As sub navigation:
|
|
|
9161
9841
|
type="button"
|
|
9162
9842
|
class="pf-v6-c-tabs__link"
|
|
9163
9843
|
role="tab"
|
|
9844
|
+
aria-selected="false"
|
|
9164
9845
|
id="box-tabs-add-tab-button-secondary -database-link"
|
|
9165
9846
|
>
|
|
9166
9847
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -9185,6 +9866,7 @@ As sub navigation:
|
|
|
9185
9866
|
type="button"
|
|
9186
9867
|
class="pf-v6-c-tabs__link"
|
|
9187
9868
|
role="tab"
|
|
9869
|
+
aria-selected="false"
|
|
9188
9870
|
id="box-tabs-add-tab-button-secondary -server-link"
|
|
9189
9871
|
>
|
|
9190
9872
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -9208,6 +9890,7 @@ As sub navigation:
|
|
|
9208
9890
|
type="button"
|
|
9209
9891
|
class="pf-v6-c-tabs__link"
|
|
9210
9892
|
role="tab"
|
|
9893
|
+
aria-selected="false"
|
|
9211
9894
|
id="box-tabs-add-tab-button-secondary -system-link"
|
|
9212
9895
|
>
|
|
9213
9896
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -9231,6 +9914,7 @@ As sub navigation:
|
|
|
9231
9914
|
type="button"
|
|
9232
9915
|
class="pf-v6-c-tabs__link"
|
|
9233
9916
|
role="tab"
|
|
9917
|
+
aria-selected="false"
|
|
9234
9918
|
id="box-tabs-add-tab-button-secondary -network-wired-link"
|
|
9235
9919
|
>
|
|
9236
9920
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -9290,6 +9974,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9290
9974
|
<div
|
|
9291
9975
|
class="pf-v6-c-tabs pf-m-animate-current"
|
|
9292
9976
|
style="--pf-v6-c-tabs--link-accent--start: 0px; --pf-v6-c-tabs--link-accent--length: 67px;"
|
|
9977
|
+
aria-label="Animate default example"
|
|
9293
9978
|
role="region"
|
|
9294
9979
|
id="tabs-animate-current-default"
|
|
9295
9980
|
>
|
|
@@ -9305,7 +9990,11 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9305
9990
|
</span>
|
|
9306
9991
|
</button>
|
|
9307
9992
|
</div>
|
|
9308
|
-
<ul
|
|
9993
|
+
<ul
|
|
9994
|
+
class="pf-v6-c-tabs__list"
|
|
9995
|
+
role="tablist"
|
|
9996
|
+
aria-label="Animate default example"
|
|
9997
|
+
>
|
|
9309
9998
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
9310
9999
|
<button
|
|
9311
10000
|
type="button"
|
|
@@ -9339,6 +10028,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9339
10028
|
}
|
|
9340
10029
|
)()"
|
|
9341
10030
|
role="tab"
|
|
10031
|
+
aria-selected="false"
|
|
9342
10032
|
id="tabs-animate-current-default-users-link"
|
|
9343
10033
|
>
|
|
9344
10034
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -9377,6 +10067,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9377
10067
|
}
|
|
9378
10068
|
)()"
|
|
9379
10069
|
role="tab"
|
|
10070
|
+
aria-selected="true"
|
|
9380
10071
|
id="tabs-animate-current-default-containers-link"
|
|
9381
10072
|
>
|
|
9382
10073
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -9415,6 +10106,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9415
10106
|
}
|
|
9416
10107
|
)()"
|
|
9417
10108
|
role="tab"
|
|
10109
|
+
aria-selected="false"
|
|
9418
10110
|
id="tabs-animate-current-default-database-link"
|
|
9419
10111
|
>
|
|
9420
10112
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -9455,6 +10147,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9455
10147
|
}
|
|
9456
10148
|
)()"
|
|
9457
10149
|
role="tab"
|
|
10150
|
+
aria-selected="false"
|
|
9458
10151
|
id="tabs-animate-current-default-disabled-link"
|
|
9459
10152
|
>
|
|
9460
10153
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -9494,6 +10187,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9494
10187
|
)()"
|
|
9495
10188
|
aria-disabled="true"
|
|
9496
10189
|
role="tab"
|
|
10190
|
+
aria-selected="false"
|
|
9497
10191
|
id="tabs-animate-current-default-aria-disabled-link"
|
|
9498
10192
|
>
|
|
9499
10193
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -9532,6 +10226,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9532
10226
|
}
|
|
9533
10227
|
)()"
|
|
9534
10228
|
role="tab"
|
|
10229
|
+
aria-selected="false"
|
|
9535
10230
|
id="tabs-animate-current-default-network-wired-link"
|
|
9536
10231
|
>
|
|
9537
10232
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -9561,6 +10256,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9561
10256
|
<div
|
|
9562
10257
|
class="pf-v6-c-tabs pf-m-animate-current pf-m-scrollable"
|
|
9563
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"
|
|
9564
10260
|
role="region"
|
|
9565
10261
|
id="tabs-animate-current-subtabs"
|
|
9566
10262
|
>
|
|
@@ -9575,7 +10271,11 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9575
10271
|
</span>
|
|
9576
10272
|
</button>
|
|
9577
10273
|
</div>
|
|
9578
|
-
<ul
|
|
10274
|
+
<ul
|
|
10275
|
+
class="pf-v6-c-tabs__list"
|
|
10276
|
+
role="tablist"
|
|
10277
|
+
aria-label="Animate with sub tabs example, primary"
|
|
10278
|
+
>
|
|
9579
10279
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
9580
10280
|
<button
|
|
9581
10281
|
type="button"
|
|
@@ -9609,6 +10309,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9609
10309
|
}
|
|
9610
10310
|
)()"
|
|
9611
10311
|
role="tab"
|
|
10312
|
+
aria-selected="false"
|
|
9612
10313
|
id="tabs-animate-current-subtabs-users-link"
|
|
9613
10314
|
>
|
|
9614
10315
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -9647,6 +10348,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9647
10348
|
}
|
|
9648
10349
|
)()"
|
|
9649
10350
|
role="tab"
|
|
10351
|
+
aria-selected="true"
|
|
9650
10352
|
id="tabs-animate-current-subtabs-containers-link"
|
|
9651
10353
|
>
|
|
9652
10354
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -9685,6 +10387,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9685
10387
|
}
|
|
9686
10388
|
)()"
|
|
9687
10389
|
role="tab"
|
|
10390
|
+
aria-selected="false"
|
|
9688
10391
|
id="tabs-animate-current-subtabs-database-link"
|
|
9689
10392
|
>
|
|
9690
10393
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -9724,6 +10427,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9724
10427
|
}
|
|
9725
10428
|
)()"
|
|
9726
10429
|
role="tab"
|
|
10430
|
+
aria-selected="false"
|
|
9727
10431
|
id="tabs-animate-current-subtabs-server-link"
|
|
9728
10432
|
>
|
|
9729
10433
|
<span class="pf-v6-c-tabs__item-text">Server</span>
|
|
@@ -9762,6 +10466,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9762
10466
|
}
|
|
9763
10467
|
)()"
|
|
9764
10468
|
role="tab"
|
|
10469
|
+
aria-selected="false"
|
|
9765
10470
|
id="tabs-animate-current-subtabs-system-link"
|
|
9766
10471
|
>
|
|
9767
10472
|
<span class="pf-v6-c-tabs__item-text">System</span>
|
|
@@ -9800,6 +10505,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9800
10505
|
}
|
|
9801
10506
|
)()"
|
|
9802
10507
|
role="tab"
|
|
10508
|
+
aria-selected="false"
|
|
9803
10509
|
id="tabs-animate-current-subtabs-network-wired-link"
|
|
9804
10510
|
>
|
|
9805
10511
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|
|
@@ -9823,6 +10529,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9823
10529
|
<div
|
|
9824
10530
|
class="pf-v6-c-tabs pf-m-subtab pf-m-animate-current pf-m-scrollable"
|
|
9825
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"
|
|
9826
10533
|
role="region"
|
|
9827
10534
|
id="tabs-animate-current-subtabs-sub"
|
|
9828
10535
|
>
|
|
@@ -9837,7 +10544,11 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9837
10544
|
</span>
|
|
9838
10545
|
</button>
|
|
9839
10546
|
</div>
|
|
9840
|
-
<ul
|
|
10547
|
+
<ul
|
|
10548
|
+
class="pf-v6-c-tabs__list"
|
|
10549
|
+
role="tablist"
|
|
10550
|
+
aria-label="Animate with sub tabs example, Users"
|
|
10551
|
+
>
|
|
9841
10552
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
9842
10553
|
<button
|
|
9843
10554
|
type="button"
|
|
@@ -9871,6 +10582,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9871
10582
|
}
|
|
9872
10583
|
)()"
|
|
9873
10584
|
role="tab"
|
|
10585
|
+
aria-selected="false"
|
|
9874
10586
|
id="tabs-animate-current-subtabs-sub-sub-1-link"
|
|
9875
10587
|
>
|
|
9876
10588
|
<span class="pf-v6-c-tabs__item-text">Item 1</span>
|
|
@@ -9909,6 +10621,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9909
10621
|
}
|
|
9910
10622
|
)()"
|
|
9911
10623
|
role="tab"
|
|
10624
|
+
aria-selected="false"
|
|
9912
10625
|
id="tabs-animate-current-subtabs-sub-sub-2-link"
|
|
9913
10626
|
>
|
|
9914
10627
|
<span class="pf-v6-c-tabs__item-text">Item 2</span>
|
|
@@ -9947,6 +10660,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9947
10660
|
}
|
|
9948
10661
|
)()"
|
|
9949
10662
|
role="tab"
|
|
10663
|
+
aria-selected="true"
|
|
9950
10664
|
id="tabs-animate-current-subtabs-sub-sub-3-link"
|
|
9951
10665
|
>
|
|
9952
10666
|
<span class="pf-v6-c-tabs__item-text">Item 3</span>
|
|
@@ -9986,6 +10700,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
9986
10700
|
}
|
|
9987
10701
|
)()"
|
|
9988
10702
|
role="tab"
|
|
10703
|
+
aria-selected="false"
|
|
9989
10704
|
id="tabs-animate-current-subtabs-sub-sub-4-link"
|
|
9990
10705
|
>
|
|
9991
10706
|
<span class="pf-v6-c-tabs__item-text">Item 4</span>
|
|
@@ -10024,6 +10739,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10024
10739
|
}
|
|
10025
10740
|
)()"
|
|
10026
10741
|
role="tab"
|
|
10742
|
+
aria-selected="false"
|
|
10027
10743
|
id="tabs-animate-current-subtabs-sub-sub-5-link"
|
|
10028
10744
|
>
|
|
10029
10745
|
<span class="pf-v6-c-tabs__item-text">Item 5</span>
|
|
@@ -10062,6 +10778,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10062
10778
|
}
|
|
10063
10779
|
)()"
|
|
10064
10780
|
role="tab"
|
|
10781
|
+
aria-selected="false"
|
|
10065
10782
|
id="tabs-animate-current-subtabs-sub-sub-6-link"
|
|
10066
10783
|
>
|
|
10067
10784
|
<span class="pf-v6-c-tabs__item-text">Item 6</span>
|
|
@@ -10090,6 +10807,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10090
10807
|
<div
|
|
10091
10808
|
class="pf-v6-c-tabs pf-m-animate-current pf-m-fill"
|
|
10092
10809
|
style="--pf-v6-c-tabs--link-accent--start: 0px; --pf-v6-c-tabs--link-accent--length: 253px;"
|
|
10810
|
+
aria-label="Animate filled example"
|
|
10093
10811
|
role="region"
|
|
10094
10812
|
id="tabs-animate-current-filled"
|
|
10095
10813
|
>
|
|
@@ -10105,7 +10823,11 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10105
10823
|
</span>
|
|
10106
10824
|
</button>
|
|
10107
10825
|
</div>
|
|
10108
|
-
<ul
|
|
10826
|
+
<ul
|
|
10827
|
+
class="pf-v6-c-tabs__list"
|
|
10828
|
+
role="tablist"
|
|
10829
|
+
aria-label="Animate filled example"
|
|
10830
|
+
>
|
|
10109
10831
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
10110
10832
|
<button
|
|
10111
10833
|
type="button"
|
|
@@ -10139,6 +10861,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10139
10861
|
}
|
|
10140
10862
|
)()"
|
|
10141
10863
|
role="tab"
|
|
10864
|
+
aria-selected="false"
|
|
10142
10865
|
id="tabs-animate-current-filled-users-link"
|
|
10143
10866
|
>
|
|
10144
10867
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -10177,6 +10900,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10177
10900
|
}
|
|
10178
10901
|
)()"
|
|
10179
10902
|
role="tab"
|
|
10903
|
+
aria-selected="true"
|
|
10180
10904
|
id="tabs-animate-current-filled-containers-link"
|
|
10181
10905
|
>
|
|
10182
10906
|
<span class="pf-v6-c-tabs__item-text">Containers</span>
|
|
@@ -10215,6 +10939,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10215
10939
|
}
|
|
10216
10940
|
)()"
|
|
10217
10941
|
role="tab"
|
|
10942
|
+
aria-selected="false"
|
|
10218
10943
|
id="tabs-animate-current-filled-database-link"
|
|
10219
10944
|
>
|
|
10220
10945
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -10244,10 +10969,15 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10244
10969
|
<div
|
|
10245
10970
|
class="pf-v6-c-tabs pf-m-vertical pf-m-animate-current"
|
|
10246
10971
|
style="--pf-v6-c-tabs--link-accent--start: 8px; --pf-v6-c-tabs--link-accent--length: 45px;"
|
|
10972
|
+
aria-label="Animate vertical example"
|
|
10247
10973
|
role="region"
|
|
10248
10974
|
id="tabs-animate-current-vertical"
|
|
10249
10975
|
>
|
|
10250
|
-
<ul
|
|
10976
|
+
<ul
|
|
10977
|
+
class="pf-v6-c-tabs__list"
|
|
10978
|
+
role="tablist"
|
|
10979
|
+
aria-label="Animate vertical example"
|
|
10980
|
+
>
|
|
10251
10981
|
<li class="pf-v6-c-tabs__item" role="presentation">
|
|
10252
10982
|
<button
|
|
10253
10983
|
type="button"
|
|
@@ -10281,6 +11011,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10281
11011
|
}
|
|
10282
11012
|
)()"
|
|
10283
11013
|
role="tab"
|
|
11014
|
+
aria-selected="false"
|
|
10284
11015
|
id="tabs-animate-current-vertical-users-link"
|
|
10285
11016
|
>
|
|
10286
11017
|
<span class="pf-v6-c-tabs__item-text">Users</span>
|
|
@@ -10319,6 +11050,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10319
11050
|
}
|
|
10320
11051
|
)()"
|
|
10321
11052
|
role="tab"
|
|
11053
|
+
aria-selected="true"
|
|
10322
11054
|
id="tabs-animate-current-vertical-containers-link"
|
|
10323
11055
|
>
|
|
10324
11056
|
<span class="pf-v6-c-tabs__item-text">
|
|
@@ -10360,6 +11092,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10360
11092
|
}
|
|
10361
11093
|
)()"
|
|
10362
11094
|
role="tab"
|
|
11095
|
+
aria-selected="false"
|
|
10363
11096
|
id="tabs-animate-current-vertical-database-link"
|
|
10364
11097
|
>
|
|
10365
11098
|
<span class="pf-v6-c-tabs__item-text">Database</span>
|
|
@@ -10400,6 +11133,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10400
11133
|
}
|
|
10401
11134
|
)()"
|
|
10402
11135
|
role="tab"
|
|
11136
|
+
aria-selected="false"
|
|
10403
11137
|
id="tabs-animate-current-vertical-disabled-link"
|
|
10404
11138
|
>
|
|
10405
11139
|
<span class="pf-v6-c-tabs__item-text">Disabled</span>
|
|
@@ -10439,6 +11173,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10439
11173
|
)()"
|
|
10440
11174
|
aria-disabled="true"
|
|
10441
11175
|
role="tab"
|
|
11176
|
+
aria-selected="false"
|
|
10442
11177
|
id="tabs-animate-current-vertical-aria-disabled-link"
|
|
10443
11178
|
>
|
|
10444
11179
|
<span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
|
|
@@ -10477,6 +11212,7 @@ To animate the current tab accent, you must set the following variables on the `
|
|
|
10477
11212
|
}
|
|
10478
11213
|
)()"
|
|
10479
11214
|
role="tab"
|
|
11215
|
+
aria-selected="false"
|
|
10480
11216
|
id="tabs-animate-current-vertical-network-wired-link"
|
|
10481
11217
|
>
|
|
10482
11218
|
<span class="pf-v6-c-tabs__item-text">Network</span>
|