@patternfly/patternfly 6.0.0-alpha.204 → 6.0.0-alpha.206
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/Form/form.css +8 -8
- package/components/Form/form.scss +3 -2
- package/components/FormControl/form-control.css +10 -10
- package/components/FormControl/form-control.scss +11 -13
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/components/_index.css +20 -20
- package/docs/components/InlineEdit/examples/InlineEdit.md +18 -10
- package/docs/components/Panel/examples/Panel.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.css +4 -2
- package/docs/components/Sidebar/examples/Sidebar.md +3 -3
- package/docs/components/TreeView/examples/TreeView.md +615 -45
- package/package.json +1 -1
- package/patternfly-no-globals.css +20 -20
- package/patternfly.css +20 -20
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
|
@@ -4,14 +4,19 @@ section: components
|
|
|
4
4
|
cssPrefix: pf-v6-c-tree-view
|
|
5
5
|
---## Examples
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Single selectable
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-v6-c-tree-view">
|
|
11
|
-
<ul
|
|
11
|
+
<ul
|
|
12
|
+
class="pf-v6-c-tree-view__list"
|
|
13
|
+
role="tree"
|
|
14
|
+
aria-label="Tree View single selectable example"
|
|
15
|
+
>
|
|
12
16
|
<li
|
|
13
17
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
14
18
|
role="treeitem"
|
|
19
|
+
aria-selected="false"
|
|
15
20
|
aria-expanded="true"
|
|
16
21
|
tabindex="0"
|
|
17
22
|
>
|
|
@@ -31,6 +36,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
31
36
|
<li
|
|
32
37
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
33
38
|
role="treeitem"
|
|
39
|
+
aria-selected="false"
|
|
34
40
|
aria-expanded="true"
|
|
35
41
|
tabindex="0"
|
|
36
42
|
>
|
|
@@ -50,6 +56,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
50
56
|
<li
|
|
51
57
|
class="pf-v6-c-tree-view__list-item"
|
|
52
58
|
role="treeitem"
|
|
59
|
+
aria-selected="false"
|
|
53
60
|
tabindex="-1"
|
|
54
61
|
>
|
|
55
62
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -63,6 +70,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
63
70
|
<li
|
|
64
71
|
class="pf-v6-c-tree-view__list-item"
|
|
65
72
|
role="treeitem"
|
|
73
|
+
aria-selected="true"
|
|
66
74
|
tabindex="-1"
|
|
67
75
|
>
|
|
68
76
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -76,6 +84,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
76
84
|
<li
|
|
77
85
|
class="pf-v6-c-tree-view__list-item"
|
|
78
86
|
role="treeitem"
|
|
87
|
+
aria-selected="false"
|
|
79
88
|
aria-expanded="false"
|
|
80
89
|
tabindex="0"
|
|
81
90
|
>
|
|
@@ -97,6 +106,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
97
106
|
<li
|
|
98
107
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
99
108
|
role="treeitem"
|
|
109
|
+
aria-selected="false"
|
|
100
110
|
aria-expanded="true"
|
|
101
111
|
tabindex="0"
|
|
102
112
|
>
|
|
@@ -116,6 +126,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
116
126
|
<li
|
|
117
127
|
class="pf-v6-c-tree-view__list-item"
|
|
118
128
|
role="treeitem"
|
|
129
|
+
aria-selected="false"
|
|
119
130
|
tabindex="-1"
|
|
120
131
|
>
|
|
121
132
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -129,6 +140,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
129
140
|
<li
|
|
130
141
|
class="pf-v6-c-tree-view__list-item"
|
|
131
142
|
role="treeitem"
|
|
143
|
+
aria-selected="false"
|
|
132
144
|
aria-expanded="false"
|
|
133
145
|
tabindex="0"
|
|
134
146
|
>
|
|
@@ -148,6 +160,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
148
160
|
<li
|
|
149
161
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
150
162
|
role="treeitem"
|
|
163
|
+
aria-selected="false"
|
|
151
164
|
aria-expanded="true"
|
|
152
165
|
tabindex="0"
|
|
153
166
|
>
|
|
@@ -167,6 +180,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
167
180
|
<li
|
|
168
181
|
class="pf-v6-c-tree-view__list-item"
|
|
169
182
|
role="treeitem"
|
|
183
|
+
aria-selected="false"
|
|
170
184
|
aria-expanded="false"
|
|
171
185
|
tabindex="0"
|
|
172
186
|
>
|
|
@@ -186,6 +200,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
186
200
|
<li
|
|
187
201
|
class="pf-v6-c-tree-view__list-item"
|
|
188
202
|
role="treeitem"
|
|
203
|
+
aria-selected="false"
|
|
189
204
|
tabindex="-1"
|
|
190
205
|
>
|
|
191
206
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -199,6 +214,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
199
214
|
<li
|
|
200
215
|
class="pf-v6-c-tree-view__list-item"
|
|
201
216
|
role="treeitem"
|
|
217
|
+
aria-selected="false"
|
|
202
218
|
tabindex="-1"
|
|
203
219
|
>
|
|
204
220
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -218,6 +234,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
218
234
|
<li
|
|
219
235
|
class="pf-v6-c-tree-view__list-item"
|
|
220
236
|
role="treeitem"
|
|
237
|
+
aria-selected="false"
|
|
221
238
|
aria-expanded="false"
|
|
222
239
|
tabindex="0"
|
|
223
240
|
>
|
|
@@ -237,6 +254,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
237
254
|
<li
|
|
238
255
|
class="pf-v6-c-tree-view__list-item"
|
|
239
256
|
role="treeitem"
|
|
257
|
+
aria-selected="false"
|
|
240
258
|
aria-expanded="false"
|
|
241
259
|
tabindex="0"
|
|
242
260
|
>
|
|
@@ -256,6 +274,304 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
256
274
|
<li
|
|
257
275
|
class="pf-v6-c-tree-view__list-item"
|
|
258
276
|
role="treeitem"
|
|
277
|
+
aria-selected="false"
|
|
278
|
+
aria-expanded="false"
|
|
279
|
+
tabindex="0"
|
|
280
|
+
>
|
|
281
|
+
<div class="pf-v6-c-tree-view__content">
|
|
282
|
+
<button class="pf-v6-c-tree-view__node">
|
|
283
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
284
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
285
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
286
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
287
|
+
</span>
|
|
288
|
+
</span>
|
|
289
|
+
<span
|
|
290
|
+
class="pf-v6-c-tree-view__node-text"
|
|
291
|
+
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
292
|
+
</span>
|
|
293
|
+
</button>
|
|
294
|
+
</div>
|
|
295
|
+
</li>
|
|
296
|
+
</ul>
|
|
297
|
+
</div>
|
|
298
|
+
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
### Multiselectable
|
|
302
|
+
|
|
303
|
+
A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, `aria-multiselectable="true"` must be passed to the root `ul[role="tree"]` element.
|
|
304
|
+
|
|
305
|
+
```html
|
|
306
|
+
<div class="pf-v6-c-tree-view">
|
|
307
|
+
<ul
|
|
308
|
+
class="pf-v6-c-tree-view__list"
|
|
309
|
+
role="tree"
|
|
310
|
+
aria-multiselectable="true"
|
|
311
|
+
aria-label="Tree View multiselectable example"
|
|
312
|
+
>
|
|
313
|
+
<li
|
|
314
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
315
|
+
role="treeitem"
|
|
316
|
+
aria-selected="false"
|
|
317
|
+
aria-expanded="true"
|
|
318
|
+
tabindex="0"
|
|
319
|
+
>
|
|
320
|
+
<div class="pf-v6-c-tree-view__content">
|
|
321
|
+
<button class="pf-v6-c-tree-view__node">
|
|
322
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
323
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
324
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
325
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
326
|
+
</span>
|
|
327
|
+
</span>
|
|
328
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
329
|
+
</span>
|
|
330
|
+
</button>
|
|
331
|
+
</div>
|
|
332
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
333
|
+
<li
|
|
334
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
335
|
+
role="treeitem"
|
|
336
|
+
aria-selected="false"
|
|
337
|
+
aria-expanded="true"
|
|
338
|
+
tabindex="0"
|
|
339
|
+
>
|
|
340
|
+
<div class="pf-v6-c-tree-view__content">
|
|
341
|
+
<button class="pf-v6-c-tree-view__node">
|
|
342
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
343
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
344
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
345
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
346
|
+
</span>
|
|
347
|
+
</span>
|
|
348
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
349
|
+
</span>
|
|
350
|
+
</button>
|
|
351
|
+
</div>
|
|
352
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
353
|
+
<li
|
|
354
|
+
class="pf-v6-c-tree-view__list-item"
|
|
355
|
+
role="treeitem"
|
|
356
|
+
aria-selected="false"
|
|
357
|
+
tabindex="-1"
|
|
358
|
+
>
|
|
359
|
+
<div class="pf-v6-c-tree-view__content">
|
|
360
|
+
<button class="pf-v6-c-tree-view__node">
|
|
361
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
362
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
363
|
+
</span>
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
</li>
|
|
367
|
+
<li
|
|
368
|
+
class="pf-v6-c-tree-view__list-item"
|
|
369
|
+
role="treeitem"
|
|
370
|
+
aria-selected="true"
|
|
371
|
+
tabindex="-1"
|
|
372
|
+
>
|
|
373
|
+
<div class="pf-v6-c-tree-view__content">
|
|
374
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
375
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
376
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
377
|
+
</span>
|
|
378
|
+
</button>
|
|
379
|
+
</div>
|
|
380
|
+
</li>
|
|
381
|
+
<li
|
|
382
|
+
class="pf-v6-c-tree-view__list-item"
|
|
383
|
+
role="treeitem"
|
|
384
|
+
aria-selected="false"
|
|
385
|
+
aria-expanded="false"
|
|
386
|
+
tabindex="0"
|
|
387
|
+
>
|
|
388
|
+
<div class="pf-v6-c-tree-view__content">
|
|
389
|
+
<button class="pf-v6-c-tree-view__node">
|
|
390
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
391
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
392
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
393
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
394
|
+
</span>
|
|
395
|
+
</span>
|
|
396
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
397
|
+
</span>
|
|
398
|
+
</button>
|
|
399
|
+
</div>
|
|
400
|
+
</li>
|
|
401
|
+
</ul>
|
|
402
|
+
</li>
|
|
403
|
+
<li
|
|
404
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
405
|
+
role="treeitem"
|
|
406
|
+
aria-selected="false"
|
|
407
|
+
aria-expanded="true"
|
|
408
|
+
tabindex="0"
|
|
409
|
+
>
|
|
410
|
+
<div class="pf-v6-c-tree-view__content">
|
|
411
|
+
<button class="pf-v6-c-tree-view__node">
|
|
412
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
413
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
414
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
415
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
416
|
+
</span>
|
|
417
|
+
</span>
|
|
418
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</div>
|
|
422
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
423
|
+
<li
|
|
424
|
+
class="pf-v6-c-tree-view__list-item"
|
|
425
|
+
role="treeitem"
|
|
426
|
+
aria-selected="false"
|
|
427
|
+
tabindex="-1"
|
|
428
|
+
>
|
|
429
|
+
<div class="pf-v6-c-tree-view__content">
|
|
430
|
+
<button class="pf-v6-c-tree-view__node">
|
|
431
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
432
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
433
|
+
</span>
|
|
434
|
+
</button>
|
|
435
|
+
</div>
|
|
436
|
+
</li>
|
|
437
|
+
<li
|
|
438
|
+
class="pf-v6-c-tree-view__list-item"
|
|
439
|
+
role="treeitem"
|
|
440
|
+
aria-selected="false"
|
|
441
|
+
aria-expanded="false"
|
|
442
|
+
tabindex="0"
|
|
443
|
+
>
|
|
444
|
+
<div class="pf-v6-c-tree-view__content">
|
|
445
|
+
<button class="pf-v6-c-tree-view__node">
|
|
446
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
447
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
448
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
449
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
450
|
+
</span>
|
|
451
|
+
</span>
|
|
452
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
453
|
+
</span>
|
|
454
|
+
</button>
|
|
455
|
+
</div>
|
|
456
|
+
</li>
|
|
457
|
+
<li
|
|
458
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
459
|
+
role="treeitem"
|
|
460
|
+
aria-selected="false"
|
|
461
|
+
aria-expanded="true"
|
|
462
|
+
tabindex="0"
|
|
463
|
+
>
|
|
464
|
+
<div class="pf-v6-c-tree-view__content">
|
|
465
|
+
<button class="pf-v6-c-tree-view__node">
|
|
466
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
467
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
468
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
469
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
470
|
+
</span>
|
|
471
|
+
</span>
|
|
472
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
473
|
+
</span>
|
|
474
|
+
</button>
|
|
475
|
+
</div>
|
|
476
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
477
|
+
<li
|
|
478
|
+
class="pf-v6-c-tree-view__list-item"
|
|
479
|
+
role="treeitem"
|
|
480
|
+
aria-selected="false"
|
|
481
|
+
aria-expanded="false"
|
|
482
|
+
tabindex="0"
|
|
483
|
+
>
|
|
484
|
+
<div class="pf-v6-c-tree-view__content">
|
|
485
|
+
<button class="pf-v6-c-tree-view__node">
|
|
486
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
487
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
488
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
489
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
490
|
+
</span>
|
|
491
|
+
</span>
|
|
492
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
493
|
+
</span>
|
|
494
|
+
</button>
|
|
495
|
+
</div>
|
|
496
|
+
</li>
|
|
497
|
+
<li
|
|
498
|
+
class="pf-v6-c-tree-view__list-item"
|
|
499
|
+
role="treeitem"
|
|
500
|
+
aria-selected="true"
|
|
501
|
+
tabindex="-1"
|
|
502
|
+
>
|
|
503
|
+
<div class="pf-v6-c-tree-view__content">
|
|
504
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
505
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
506
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
</li>
|
|
511
|
+
<li
|
|
512
|
+
class="pf-v6-c-tree-view__list-item"
|
|
513
|
+
role="treeitem"
|
|
514
|
+
aria-selected="false"
|
|
515
|
+
tabindex="-1"
|
|
516
|
+
>
|
|
517
|
+
<div class="pf-v6-c-tree-view__content">
|
|
518
|
+
<button class="pf-v6-c-tree-view__node">
|
|
519
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
520
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
521
|
+
</span>
|
|
522
|
+
</button>
|
|
523
|
+
</div>
|
|
524
|
+
</li>
|
|
525
|
+
</ul>
|
|
526
|
+
</li>
|
|
527
|
+
</ul>
|
|
528
|
+
</li>
|
|
529
|
+
</ul>
|
|
530
|
+
</li>
|
|
531
|
+
<li
|
|
532
|
+
class="pf-v6-c-tree-view__list-item"
|
|
533
|
+
role="treeitem"
|
|
534
|
+
aria-selected="false"
|
|
535
|
+
aria-expanded="false"
|
|
536
|
+
tabindex="0"
|
|
537
|
+
>
|
|
538
|
+
<div class="pf-v6-c-tree-view__content">
|
|
539
|
+
<button class="pf-v6-c-tree-view__node">
|
|
540
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
541
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
542
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
543
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
544
|
+
</span>
|
|
545
|
+
</span>
|
|
546
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
547
|
+
</span>
|
|
548
|
+
</button>
|
|
549
|
+
</div>
|
|
550
|
+
</li>
|
|
551
|
+
<li
|
|
552
|
+
class="pf-v6-c-tree-view__list-item"
|
|
553
|
+
role="treeitem"
|
|
554
|
+
aria-selected="false"
|
|
555
|
+
aria-expanded="false"
|
|
556
|
+
tabindex="0"
|
|
557
|
+
>
|
|
558
|
+
<div class="pf-v6-c-tree-view__content">
|
|
559
|
+
<button class="pf-v6-c-tree-view__node">
|
|
560
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
561
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
562
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
563
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
564
|
+
</span>
|
|
565
|
+
</span>
|
|
566
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
567
|
+
</span>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
</li>
|
|
571
|
+
<li
|
|
572
|
+
class="pf-v6-c-tree-view__list-item"
|
|
573
|
+
role="treeitem"
|
|
574
|
+
aria-selected="false"
|
|
259
575
|
aria-expanded="false"
|
|
260
576
|
tabindex="0"
|
|
261
577
|
>
|
|
@@ -281,6 +597,8 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
281
597
|
|
|
282
598
|
### With search
|
|
283
599
|
|
|
600
|
+
A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
|
|
601
|
+
|
|
284
602
|
```html
|
|
285
603
|
<div class="pf-v6-c-tree-view">
|
|
286
604
|
<div class="pf-v6-c-tree-view__search">
|
|
@@ -302,10 +620,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
302
620
|
</div>
|
|
303
621
|
</div>
|
|
304
622
|
<hr class="pf-v6-c-divider" />
|
|
305
|
-
<ul
|
|
623
|
+
<ul
|
|
624
|
+
class="pf-v6-c-tree-view__list"
|
|
625
|
+
role="tree"
|
|
626
|
+
aria-label="Tree View with search example"
|
|
627
|
+
>
|
|
306
628
|
<li
|
|
307
629
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
308
630
|
role="treeitem"
|
|
631
|
+
aria-selected="false"
|
|
309
632
|
aria-expanded="true"
|
|
310
633
|
tabindex="0"
|
|
311
634
|
>
|
|
@@ -325,6 +648,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
325
648
|
<li
|
|
326
649
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
327
650
|
role="treeitem"
|
|
651
|
+
aria-selected="false"
|
|
328
652
|
aria-expanded="true"
|
|
329
653
|
tabindex="0"
|
|
330
654
|
>
|
|
@@ -344,6 +668,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
344
668
|
<li
|
|
345
669
|
class="pf-v6-c-tree-view__list-item"
|
|
346
670
|
role="treeitem"
|
|
671
|
+
aria-selected="false"
|
|
347
672
|
tabindex="-1"
|
|
348
673
|
>
|
|
349
674
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -357,6 +682,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
357
682
|
<li
|
|
358
683
|
class="pf-v6-c-tree-view__list-item"
|
|
359
684
|
role="treeitem"
|
|
685
|
+
aria-selected="true"
|
|
360
686
|
tabindex="-1"
|
|
361
687
|
>
|
|
362
688
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -372,6 +698,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
372
698
|
<li
|
|
373
699
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
374
700
|
role="treeitem"
|
|
701
|
+
aria-selected="false"
|
|
375
702
|
aria-expanded="true"
|
|
376
703
|
tabindex="0"
|
|
377
704
|
>
|
|
@@ -391,6 +718,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
391
718
|
<li
|
|
392
719
|
class="pf-v6-c-tree-view__list-item"
|
|
393
720
|
role="treeitem"
|
|
721
|
+
aria-selected="false"
|
|
394
722
|
aria-expanded="false"
|
|
395
723
|
tabindex="0"
|
|
396
724
|
>
|
|
@@ -410,6 +738,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
410
738
|
<li
|
|
411
739
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
412
740
|
role="treeitem"
|
|
741
|
+
aria-selected="false"
|
|
413
742
|
aria-expanded="true"
|
|
414
743
|
tabindex="0"
|
|
415
744
|
>
|
|
@@ -429,6 +758,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
429
758
|
<li
|
|
430
759
|
class="pf-v6-c-tree-view__list-item"
|
|
431
760
|
role="treeitem"
|
|
761
|
+
aria-selected="false"
|
|
432
762
|
aria-expanded="false"
|
|
433
763
|
tabindex="0"
|
|
434
764
|
>
|
|
@@ -448,6 +778,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
448
778
|
<li
|
|
449
779
|
class="pf-v6-c-tree-view__list-item"
|
|
450
780
|
role="treeitem"
|
|
781
|
+
aria-selected="false"
|
|
451
782
|
tabindex="-1"
|
|
452
783
|
>
|
|
453
784
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -461,6 +792,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
461
792
|
<li
|
|
462
793
|
class="pf-v6-c-tree-view__list-item"
|
|
463
794
|
role="treeitem"
|
|
795
|
+
aria-selected="false"
|
|
464
796
|
tabindex="-1"
|
|
465
797
|
>
|
|
466
798
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -480,6 +812,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
480
812
|
<li
|
|
481
813
|
class="pf-v6-c-tree-view__list-item"
|
|
482
814
|
role="treeitem"
|
|
815
|
+
aria-selected="false"
|
|
483
816
|
aria-expanded="false"
|
|
484
817
|
tabindex="0"
|
|
485
818
|
>
|
|
@@ -499,6 +832,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
499
832
|
<li
|
|
500
833
|
class="pf-v6-c-tree-view__list-item"
|
|
501
834
|
role="treeitem"
|
|
835
|
+
aria-selected="false"
|
|
502
836
|
aria-expanded="false"
|
|
503
837
|
tabindex="0"
|
|
504
838
|
>
|
|
@@ -518,6 +852,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
518
852
|
<li
|
|
519
853
|
class="pf-v6-c-tree-view__list-item"
|
|
520
854
|
role="treeitem"
|
|
855
|
+
aria-selected="false"
|
|
521
856
|
aria-expanded="false"
|
|
522
857
|
tabindex="0"
|
|
523
858
|
>
|
|
@@ -545,10 +880,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
545
880
|
|
|
546
881
|
```html
|
|
547
882
|
<div class="pf-v6-c-tree-view">
|
|
548
|
-
<ul
|
|
883
|
+
<ul
|
|
884
|
+
class="pf-v6-c-tree-view__list"
|
|
885
|
+
role="tree"
|
|
886
|
+
aria-label="Tree View with checkboxes example"
|
|
887
|
+
>
|
|
549
888
|
<li
|
|
550
889
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
551
890
|
role="treeitem"
|
|
891
|
+
aria-checked="false"
|
|
552
892
|
aria-expanded="true"
|
|
553
893
|
tabindex="0"
|
|
554
894
|
>
|
|
@@ -591,6 +931,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
591
931
|
<li
|
|
592
932
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
593
933
|
role="treeitem"
|
|
934
|
+
aria-checked="true"
|
|
594
935
|
aria-expanded="true"
|
|
595
936
|
tabindex="0"
|
|
596
937
|
>
|
|
@@ -634,6 +975,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
634
975
|
<li
|
|
635
976
|
class="pf-v6-c-tree-view__list-item"
|
|
636
977
|
role="treeitem"
|
|
978
|
+
aria-checked="true"
|
|
637
979
|
tabindex="-1"
|
|
638
980
|
>
|
|
639
981
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -666,6 +1008,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
666
1008
|
<li
|
|
667
1009
|
class="pf-v6-c-tree-view__list-item"
|
|
668
1010
|
role="treeitem"
|
|
1011
|
+
aria-checked="true"
|
|
669
1012
|
tabindex="-1"
|
|
670
1013
|
>
|
|
671
1014
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -698,6 +1041,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
698
1041
|
<li
|
|
699
1042
|
class="pf-v6-c-tree-view__list-item"
|
|
700
1043
|
role="treeitem"
|
|
1044
|
+
aria-checked="true"
|
|
701
1045
|
aria-expanded="false"
|
|
702
1046
|
tabindex="0"
|
|
703
1047
|
>
|
|
@@ -743,6 +1087,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
743
1087
|
<li
|
|
744
1088
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
745
1089
|
role="treeitem"
|
|
1090
|
+
aria-checked="false"
|
|
746
1091
|
aria-expanded="true"
|
|
747
1092
|
tabindex="0"
|
|
748
1093
|
>
|
|
@@ -785,6 +1130,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
785
1130
|
<li
|
|
786
1131
|
class="pf-v6-c-tree-view__list-item"
|
|
787
1132
|
role="treeitem"
|
|
1133
|
+
aria-checked="false"
|
|
788
1134
|
aria-expanded="false"
|
|
789
1135
|
tabindex="0"
|
|
790
1136
|
>
|
|
@@ -827,6 +1173,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
827
1173
|
<li
|
|
828
1174
|
class="pf-v6-c-tree-view__list-item"
|
|
829
1175
|
role="treeitem"
|
|
1176
|
+
aria-checked="false"
|
|
830
1177
|
tabindex="-1"
|
|
831
1178
|
>
|
|
832
1179
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -858,6 +1205,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
858
1205
|
<li
|
|
859
1206
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
860
1207
|
role="treeitem"
|
|
1208
|
+
aria-checked="false"
|
|
861
1209
|
aria-expanded="true"
|
|
862
1210
|
tabindex="0"
|
|
863
1211
|
>
|
|
@@ -900,6 +1248,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
900
1248
|
<li
|
|
901
1249
|
class="pf-v6-c-tree-view__list-item"
|
|
902
1250
|
role="treeitem"
|
|
1251
|
+
aria-checked="true"
|
|
903
1252
|
aria-expanded="false"
|
|
904
1253
|
tabindex="0"
|
|
905
1254
|
>
|
|
@@ -925,6 +1274,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
925
1274
|
<input
|
|
926
1275
|
class="pf-v6-c-check__input"
|
|
927
1276
|
type="checkbox"
|
|
1277
|
+
checked
|
|
928
1278
|
id="check-tree-view-checkboxes-10"
|
|
929
1279
|
aria-label="Select"
|
|
930
1280
|
aria-labelledby="check-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
|
|
@@ -942,6 +1292,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
942
1292
|
<li
|
|
943
1293
|
class="pf-v6-c-tree-view__list-item"
|
|
944
1294
|
role="treeitem"
|
|
1295
|
+
aria-checked="true"
|
|
945
1296
|
tabindex="-1"
|
|
946
1297
|
>
|
|
947
1298
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -974,6 +1325,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
974
1325
|
<li
|
|
975
1326
|
class="pf-v6-c-tree-view__list-item"
|
|
976
1327
|
role="treeitem"
|
|
1328
|
+
aria-checked="false"
|
|
977
1329
|
tabindex="-1"
|
|
978
1330
|
>
|
|
979
1331
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1011,6 +1363,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1011
1363
|
<li
|
|
1012
1364
|
class="pf-v6-c-tree-view__list-item"
|
|
1013
1365
|
role="treeitem"
|
|
1366
|
+
aria-checked="false"
|
|
1014
1367
|
aria-expanded="false"
|
|
1015
1368
|
tabindex="0"
|
|
1016
1369
|
>
|
|
@@ -1053,6 +1406,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1053
1406
|
<li
|
|
1054
1407
|
class="pf-v6-c-tree-view__list-item"
|
|
1055
1408
|
role="treeitem"
|
|
1409
|
+
aria-checked="false"
|
|
1056
1410
|
aria-expanded="false"
|
|
1057
1411
|
tabindex="0"
|
|
1058
1412
|
>
|
|
@@ -1095,6 +1449,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1095
1449
|
<li
|
|
1096
1450
|
class="pf-v6-c-tree-view__list-item"
|
|
1097
1451
|
role="treeitem"
|
|
1452
|
+
aria-checked="true"
|
|
1098
1453
|
aria-expanded="false"
|
|
1099
1454
|
tabindex="0"
|
|
1100
1455
|
>
|
|
@@ -1144,10 +1499,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1144
1499
|
|
|
1145
1500
|
```html
|
|
1146
1501
|
<div class="pf-v6-c-tree-view">
|
|
1147
|
-
<ul
|
|
1502
|
+
<ul
|
|
1503
|
+
class="pf-v6-c-tree-view__list"
|
|
1504
|
+
role="tree"
|
|
1505
|
+
aria-label="Tree View with icons example"
|
|
1506
|
+
>
|
|
1148
1507
|
<li
|
|
1149
1508
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1150
1509
|
role="treeitem"
|
|
1510
|
+
aria-selected="false"
|
|
1151
1511
|
aria-expanded="true"
|
|
1152
1512
|
tabindex="0"
|
|
1153
1513
|
>
|
|
@@ -1170,6 +1530,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1170
1530
|
<li
|
|
1171
1531
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1172
1532
|
role="treeitem"
|
|
1533
|
+
aria-selected="false"
|
|
1173
1534
|
aria-expanded="true"
|
|
1174
1535
|
tabindex="0"
|
|
1175
1536
|
>
|
|
@@ -1192,6 +1553,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1192
1553
|
<li
|
|
1193
1554
|
class="pf-v6-c-tree-view__list-item"
|
|
1194
1555
|
role="treeitem"
|
|
1556
|
+
aria-selected="false"
|
|
1195
1557
|
tabindex="-1"
|
|
1196
1558
|
>
|
|
1197
1559
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1208,6 +1570,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1208
1570
|
<li
|
|
1209
1571
|
class="pf-v6-c-tree-view__list-item"
|
|
1210
1572
|
role="treeitem"
|
|
1573
|
+
aria-selected="true"
|
|
1211
1574
|
tabindex="-1"
|
|
1212
1575
|
>
|
|
1213
1576
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1226,6 +1589,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1226
1589
|
<li
|
|
1227
1590
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1228
1591
|
role="treeitem"
|
|
1592
|
+
aria-selected="false"
|
|
1229
1593
|
aria-expanded="true"
|
|
1230
1594
|
tabindex="0"
|
|
1231
1595
|
>
|
|
@@ -1248,6 +1612,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1248
1612
|
<li
|
|
1249
1613
|
class="pf-v6-c-tree-view__list-item"
|
|
1250
1614
|
role="treeitem"
|
|
1615
|
+
aria-selected="false"
|
|
1251
1616
|
aria-expanded="false"
|
|
1252
1617
|
tabindex="0"
|
|
1253
1618
|
>
|
|
@@ -1270,6 +1635,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1270
1635
|
<li
|
|
1271
1636
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1272
1637
|
role="treeitem"
|
|
1638
|
+
aria-selected="false"
|
|
1273
1639
|
aria-expanded="true"
|
|
1274
1640
|
tabindex="0"
|
|
1275
1641
|
>
|
|
@@ -1292,6 +1658,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1292
1658
|
<li
|
|
1293
1659
|
class="pf-v6-c-tree-view__list-item"
|
|
1294
1660
|
role="treeitem"
|
|
1661
|
+
aria-selected="false"
|
|
1295
1662
|
aria-expanded="false"
|
|
1296
1663
|
tabindex="0"
|
|
1297
1664
|
>
|
|
@@ -1314,6 +1681,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1314
1681
|
<li
|
|
1315
1682
|
class="pf-v6-c-tree-view__list-item"
|
|
1316
1683
|
role="treeitem"
|
|
1684
|
+
aria-selected="false"
|
|
1317
1685
|
tabindex="-1"
|
|
1318
1686
|
>
|
|
1319
1687
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1330,6 +1698,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1330
1698
|
<li
|
|
1331
1699
|
class="pf-v6-c-tree-view__list-item"
|
|
1332
1700
|
role="treeitem"
|
|
1701
|
+
aria-selected="false"
|
|
1333
1702
|
tabindex="-1"
|
|
1334
1703
|
>
|
|
1335
1704
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1352,6 +1721,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1352
1721
|
<li
|
|
1353
1722
|
class="pf-v6-c-tree-view__list-item"
|
|
1354
1723
|
role="treeitem"
|
|
1724
|
+
aria-selected="false"
|
|
1355
1725
|
aria-expanded="false"
|
|
1356
1726
|
tabindex="0"
|
|
1357
1727
|
>
|
|
@@ -1374,6 +1744,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1374
1744
|
<li
|
|
1375
1745
|
class="pf-v6-c-tree-view__list-item"
|
|
1376
1746
|
role="treeitem"
|
|
1747
|
+
aria-selected="false"
|
|
1377
1748
|
aria-expanded="false"
|
|
1378
1749
|
tabindex="0"
|
|
1379
1750
|
>
|
|
@@ -1396,6 +1767,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1396
1767
|
<li
|
|
1397
1768
|
class="pf-v6-c-tree-view__list-item"
|
|
1398
1769
|
role="treeitem"
|
|
1770
|
+
aria-selected="false"
|
|
1399
1771
|
aria-expanded="false"
|
|
1400
1772
|
tabindex="0"
|
|
1401
1773
|
>
|
|
@@ -1426,10 +1798,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1426
1798
|
|
|
1427
1799
|
```html
|
|
1428
1800
|
<div class="pf-v6-c-tree-view">
|
|
1429
|
-
<ul
|
|
1801
|
+
<ul
|
|
1802
|
+
class="pf-v6-c-tree-view__list"
|
|
1803
|
+
role="tree"
|
|
1804
|
+
aria-label="Tree View with badges example"
|
|
1805
|
+
>
|
|
1430
1806
|
<li
|
|
1431
1807
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1432
1808
|
role="treeitem"
|
|
1809
|
+
aria-selected="false"
|
|
1433
1810
|
aria-expanded="true"
|
|
1434
1811
|
tabindex="0"
|
|
1435
1812
|
>
|
|
@@ -1452,6 +1829,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1452
1829
|
<li
|
|
1453
1830
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1454
1831
|
role="treeitem"
|
|
1832
|
+
aria-selected="false"
|
|
1455
1833
|
aria-expanded="true"
|
|
1456
1834
|
tabindex="0"
|
|
1457
1835
|
>
|
|
@@ -1474,6 +1852,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1474
1852
|
<li
|
|
1475
1853
|
class="pf-v6-c-tree-view__list-item"
|
|
1476
1854
|
role="treeitem"
|
|
1855
|
+
aria-selected="false"
|
|
1477
1856
|
tabindex="-1"
|
|
1478
1857
|
>
|
|
1479
1858
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1487,6 +1866,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1487
1866
|
<li
|
|
1488
1867
|
class="pf-v6-c-tree-view__list-item"
|
|
1489
1868
|
role="treeitem"
|
|
1869
|
+
aria-selected="true"
|
|
1490
1870
|
tabindex="-1"
|
|
1491
1871
|
>
|
|
1492
1872
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1502,6 +1882,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1502
1882
|
<li
|
|
1503
1883
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1504
1884
|
role="treeitem"
|
|
1885
|
+
aria-selected="false"
|
|
1505
1886
|
aria-expanded="true"
|
|
1506
1887
|
tabindex="0"
|
|
1507
1888
|
>
|
|
@@ -1524,6 +1905,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1524
1905
|
<li
|
|
1525
1906
|
class="pf-v6-c-tree-view__list-item"
|
|
1526
1907
|
role="treeitem"
|
|
1908
|
+
aria-selected="false"
|
|
1527
1909
|
aria-expanded="false"
|
|
1528
1910
|
tabindex="0"
|
|
1529
1911
|
>
|
|
@@ -1546,6 +1928,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1546
1928
|
<li
|
|
1547
1929
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1548
1930
|
role="treeitem"
|
|
1931
|
+
aria-selected="false"
|
|
1549
1932
|
aria-expanded="true"
|
|
1550
1933
|
tabindex="0"
|
|
1551
1934
|
>
|
|
@@ -1568,6 +1951,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1568
1951
|
<li
|
|
1569
1952
|
class="pf-v6-c-tree-view__list-item"
|
|
1570
1953
|
role="treeitem"
|
|
1954
|
+
aria-selected="false"
|
|
1571
1955
|
aria-expanded="false"
|
|
1572
1956
|
tabindex="0"
|
|
1573
1957
|
>
|
|
@@ -1590,6 +1974,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1590
1974
|
<li
|
|
1591
1975
|
class="pf-v6-c-tree-view__list-item"
|
|
1592
1976
|
role="treeitem"
|
|
1977
|
+
aria-selected="false"
|
|
1593
1978
|
tabindex="-1"
|
|
1594
1979
|
>
|
|
1595
1980
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1603,6 +1988,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1603
1988
|
<li
|
|
1604
1989
|
class="pf-v6-c-tree-view__list-item"
|
|
1605
1990
|
role="treeitem"
|
|
1991
|
+
aria-selected="false"
|
|
1606
1992
|
tabindex="-1"
|
|
1607
1993
|
>
|
|
1608
1994
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1622,6 +2008,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1622
2008
|
<li
|
|
1623
2009
|
class="pf-v6-c-tree-view__list-item"
|
|
1624
2010
|
role="treeitem"
|
|
2011
|
+
aria-selected="false"
|
|
1625
2012
|
aria-expanded="false"
|
|
1626
2013
|
tabindex="0"
|
|
1627
2014
|
>
|
|
@@ -1644,6 +2031,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1644
2031
|
<li
|
|
1645
2032
|
class="pf-v6-c-tree-view__list-item"
|
|
1646
2033
|
role="treeitem"
|
|
2034
|
+
aria-selected="false"
|
|
1647
2035
|
aria-expanded="false"
|
|
1648
2036
|
tabindex="0"
|
|
1649
2037
|
>
|
|
@@ -1666,6 +2054,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1666
2054
|
<li
|
|
1667
2055
|
class="pf-v6-c-tree-view__list-item"
|
|
1668
2056
|
role="treeitem"
|
|
2057
|
+
aria-selected="false"
|
|
1669
2058
|
aria-expanded="false"
|
|
1670
2059
|
tabindex="0"
|
|
1671
2060
|
>
|
|
@@ -1696,10 +2085,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1696
2085
|
|
|
1697
2086
|
```html
|
|
1698
2087
|
<div class="pf-v6-c-tree-view">
|
|
1699
|
-
<ul
|
|
2088
|
+
<ul
|
|
2089
|
+
class="pf-v6-c-tree-view__list"
|
|
2090
|
+
role="tree"
|
|
2091
|
+
aria-label="Tree View with action item example"
|
|
2092
|
+
>
|
|
1700
2093
|
<li
|
|
1701
2094
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1702
2095
|
role="treeitem"
|
|
2096
|
+
aria-selected="false"
|
|
1703
2097
|
aria-expanded="true"
|
|
1704
2098
|
tabindex="0"
|
|
1705
2099
|
>
|
|
@@ -1720,6 +2114,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1720
2114
|
class="pf-v6-c-button pf-m-plain"
|
|
1721
2115
|
type="button"
|
|
1722
2116
|
aria-label="Actions"
|
|
2117
|
+
tabindex="-1"
|
|
1723
2118
|
>
|
|
1724
2119
|
<span class="pf-v6-c-button__icon">
|
|
1725
2120
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
@@ -1731,6 +2126,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1731
2126
|
<li
|
|
1732
2127
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1733
2128
|
role="treeitem"
|
|
2129
|
+
aria-selected="false"
|
|
1734
2130
|
aria-expanded="true"
|
|
1735
2131
|
tabindex="0"
|
|
1736
2132
|
>
|
|
@@ -1751,6 +2147,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1751
2147
|
class="pf-v6-c-button pf-m-plain"
|
|
1752
2148
|
type="button"
|
|
1753
2149
|
aria-label="Copy"
|
|
2150
|
+
tabindex="-1"
|
|
1754
2151
|
>
|
|
1755
2152
|
<span class="pf-v6-c-button__icon">
|
|
1756
2153
|
<i class="fas fa-clipboard" aria-hidden="true"></i>
|
|
@@ -1762,6 +2159,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1762
2159
|
<li
|
|
1763
2160
|
class="pf-v6-c-tree-view__list-item"
|
|
1764
2161
|
role="treeitem"
|
|
2162
|
+
aria-selected="false"
|
|
1765
2163
|
tabindex="-1"
|
|
1766
2164
|
>
|
|
1767
2165
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1775,6 +2173,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1775
2173
|
<li
|
|
1776
2174
|
class="pf-v6-c-tree-view__list-item"
|
|
1777
2175
|
role="treeitem"
|
|
2176
|
+
aria-selected="true"
|
|
1778
2177
|
tabindex="-1"
|
|
1779
2178
|
>
|
|
1780
2179
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1790,6 +2189,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1790
2189
|
<li
|
|
1791
2190
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1792
2191
|
role="treeitem"
|
|
2192
|
+
aria-selected="false"
|
|
1793
2193
|
aria-expanded="true"
|
|
1794
2194
|
tabindex="0"
|
|
1795
2195
|
>
|
|
@@ -1810,6 +2210,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1810
2210
|
class="pf-v6-c-button pf-m-plain"
|
|
1811
2211
|
type="button"
|
|
1812
2212
|
aria-label="Action"
|
|
2213
|
+
tabindex="-1"
|
|
1813
2214
|
>
|
|
1814
2215
|
<span class="pf-v6-c-button__icon">
|
|
1815
2216
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
@@ -1821,6 +2222,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1821
2222
|
<li
|
|
1822
2223
|
class="pf-v6-c-tree-view__list-item"
|
|
1823
2224
|
role="treeitem"
|
|
2225
|
+
aria-selected="false"
|
|
1824
2226
|
aria-expanded="false"
|
|
1825
2227
|
tabindex="0"
|
|
1826
2228
|
>
|
|
@@ -1840,6 +2242,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1840
2242
|
<li
|
|
1841
2243
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1842
2244
|
role="treeitem"
|
|
2245
|
+
aria-selected="false"
|
|
1843
2246
|
aria-expanded="true"
|
|
1844
2247
|
tabindex="0"
|
|
1845
2248
|
>
|
|
@@ -1859,6 +2262,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1859
2262
|
<li
|
|
1860
2263
|
class="pf-v6-c-tree-view__list-item"
|
|
1861
2264
|
role="treeitem"
|
|
2265
|
+
aria-selected="false"
|
|
1862
2266
|
aria-expanded="false"
|
|
1863
2267
|
tabindex="0"
|
|
1864
2268
|
>
|
|
@@ -1878,6 +2282,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1878
2282
|
<li
|
|
1879
2283
|
class="pf-v6-c-tree-view__list-item"
|
|
1880
2284
|
role="treeitem"
|
|
2285
|
+
aria-selected="false"
|
|
1881
2286
|
tabindex="-1"
|
|
1882
2287
|
>
|
|
1883
2288
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1891,6 +2296,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1891
2296
|
<li
|
|
1892
2297
|
class="pf-v6-c-tree-view__list-item"
|
|
1893
2298
|
role="treeitem"
|
|
2299
|
+
aria-selected="false"
|
|
1894
2300
|
tabindex="-1"
|
|
1895
2301
|
>
|
|
1896
2302
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -1910,6 +2316,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1910
2316
|
<li
|
|
1911
2317
|
class="pf-v6-c-tree-view__list-item"
|
|
1912
2318
|
role="treeitem"
|
|
2319
|
+
aria-selected="false"
|
|
1913
2320
|
aria-expanded="false"
|
|
1914
2321
|
tabindex="0"
|
|
1915
2322
|
>
|
|
@@ -1929,6 +2336,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1929
2336
|
<li
|
|
1930
2337
|
class="pf-v6-c-tree-view__list-item"
|
|
1931
2338
|
role="treeitem"
|
|
2339
|
+
aria-selected="false"
|
|
1932
2340
|
aria-expanded="false"
|
|
1933
2341
|
tabindex="0"
|
|
1934
2342
|
>
|
|
@@ -1948,6 +2356,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1948
2356
|
<li
|
|
1949
2357
|
class="pf-v6-c-tree-view__list-item"
|
|
1950
2358
|
role="treeitem"
|
|
2359
|
+
aria-selected="false"
|
|
1951
2360
|
aria-expanded="false"
|
|
1952
2361
|
tabindex="0"
|
|
1953
2362
|
>
|
|
@@ -1970,6 +2379,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1970
2379
|
class="pf-v6-c-button pf-m-plain"
|
|
1971
2380
|
type="button"
|
|
1972
2381
|
aria-label="Actions"
|
|
2382
|
+
tabindex="-1"
|
|
1973
2383
|
>
|
|
1974
2384
|
<span class="pf-v6-c-button__icon">
|
|
1975
2385
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
@@ -1987,10 +2397,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
1987
2397
|
|
|
1988
2398
|
```html
|
|
1989
2399
|
<div class="pf-v6-c-tree-view">
|
|
1990
|
-
<ul
|
|
2400
|
+
<ul
|
|
2401
|
+
class="pf-v6-c-tree-view__list"
|
|
2402
|
+
role="tree"
|
|
2403
|
+
aria-label="Tree View with non-expandable top level nodes example"
|
|
2404
|
+
>
|
|
1991
2405
|
<li
|
|
1992
2406
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1993
2407
|
role="treeitem"
|
|
2408
|
+
aria-selected="false"
|
|
1994
2409
|
aria-expanded="true"
|
|
1995
2410
|
tabindex="0"
|
|
1996
2411
|
>
|
|
@@ -2010,6 +2425,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2010
2425
|
<li
|
|
2011
2426
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2012
2427
|
role="treeitem"
|
|
2428
|
+
aria-selected="false"
|
|
2013
2429
|
aria-expanded="true"
|
|
2014
2430
|
tabindex="0"
|
|
2015
2431
|
>
|
|
@@ -2029,6 +2445,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2029
2445
|
<li
|
|
2030
2446
|
class="pf-v6-c-tree-view__list-item"
|
|
2031
2447
|
role="treeitem"
|
|
2448
|
+
aria-selected="false"
|
|
2032
2449
|
tabindex="-1"
|
|
2033
2450
|
>
|
|
2034
2451
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2042,6 +2459,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2042
2459
|
<li
|
|
2043
2460
|
class="pf-v6-c-tree-view__list-item"
|
|
2044
2461
|
role="treeitem"
|
|
2462
|
+
aria-selected="true"
|
|
2045
2463
|
tabindex="-1"
|
|
2046
2464
|
>
|
|
2047
2465
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2055,6 +2473,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2055
2473
|
<li
|
|
2056
2474
|
class="pf-v6-c-tree-view__list-item"
|
|
2057
2475
|
role="treeitem"
|
|
2476
|
+
aria-selected="false"
|
|
2058
2477
|
aria-expanded="false"
|
|
2059
2478
|
tabindex="0"
|
|
2060
2479
|
>
|
|
@@ -2076,6 +2495,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2076
2495
|
<li
|
|
2077
2496
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2078
2497
|
role="treeitem"
|
|
2498
|
+
aria-selected="false"
|
|
2079
2499
|
aria-expanded="true"
|
|
2080
2500
|
tabindex="0"
|
|
2081
2501
|
>
|
|
@@ -2095,6 +2515,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2095
2515
|
<li
|
|
2096
2516
|
class="pf-v6-c-tree-view__list-item"
|
|
2097
2517
|
role="treeitem"
|
|
2518
|
+
aria-selected="false"
|
|
2098
2519
|
tabindex="-1"
|
|
2099
2520
|
>
|
|
2100
2521
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2108,6 +2529,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2108
2529
|
<li
|
|
2109
2530
|
class="pf-v6-c-tree-view__list-item"
|
|
2110
2531
|
role="treeitem"
|
|
2532
|
+
aria-selected="false"
|
|
2111
2533
|
aria-expanded="false"
|
|
2112
2534
|
tabindex="0"
|
|
2113
2535
|
>
|
|
@@ -2127,6 +2549,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2127
2549
|
<li
|
|
2128
2550
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2129
2551
|
role="treeitem"
|
|
2552
|
+
aria-selected="false"
|
|
2130
2553
|
aria-expanded="true"
|
|
2131
2554
|
tabindex="0"
|
|
2132
2555
|
>
|
|
@@ -2146,6 +2569,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2146
2569
|
<li
|
|
2147
2570
|
class="pf-v6-c-tree-view__list-item"
|
|
2148
2571
|
role="treeitem"
|
|
2572
|
+
aria-selected="false"
|
|
2149
2573
|
aria-expanded="false"
|
|
2150
2574
|
tabindex="0"
|
|
2151
2575
|
>
|
|
@@ -2165,6 +2589,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2165
2589
|
<li
|
|
2166
2590
|
class="pf-v6-c-tree-view__list-item"
|
|
2167
2591
|
role="treeitem"
|
|
2592
|
+
aria-selected="false"
|
|
2168
2593
|
tabindex="-1"
|
|
2169
2594
|
>
|
|
2170
2595
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2178,6 +2603,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2178
2603
|
<li
|
|
2179
2604
|
class="pf-v6-c-tree-view__list-item"
|
|
2180
2605
|
role="treeitem"
|
|
2606
|
+
aria-selected="false"
|
|
2181
2607
|
tabindex="-1"
|
|
2182
2608
|
>
|
|
2183
2609
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2194,7 +2620,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2194
2620
|
</li>
|
|
2195
2621
|
</ul>
|
|
2196
2622
|
</li>
|
|
2197
|
-
<li
|
|
2623
|
+
<li
|
|
2624
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2625
|
+
role="treeitem"
|
|
2626
|
+
aria-selected="false"
|
|
2627
|
+
tabindex="-1"
|
|
2628
|
+
>
|
|
2198
2629
|
<div class="pf-v6-c-tree-view__content">
|
|
2199
2630
|
<button class="pf-v6-c-tree-view__node">
|
|
2200
2631
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2206,6 +2637,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2206
2637
|
<li
|
|
2207
2638
|
class="pf-v6-c-tree-view__list-item"
|
|
2208
2639
|
role="treeitem"
|
|
2640
|
+
aria-selected="false"
|
|
2209
2641
|
aria-expanded="false"
|
|
2210
2642
|
tabindex="0"
|
|
2211
2643
|
>
|
|
@@ -2222,7 +2654,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2222
2654
|
</button>
|
|
2223
2655
|
</div>
|
|
2224
2656
|
</li>
|
|
2225
|
-
<li
|
|
2657
|
+
<li
|
|
2658
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2659
|
+
role="treeitem"
|
|
2660
|
+
aria-selected="false"
|
|
2661
|
+
tabindex="-1"
|
|
2662
|
+
>
|
|
2226
2663
|
<div class="pf-v6-c-tree-view__content">
|
|
2227
2664
|
<button class="pf-v6-c-tree-view__node">
|
|
2228
2665
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2242,10 +2679,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2242
2679
|
|
|
2243
2680
|
```html
|
|
2244
2681
|
<div class="pf-v6-c-tree-view">
|
|
2245
|
-
<ul
|
|
2682
|
+
<ul
|
|
2683
|
+
class="pf-v6-c-tree-view__list"
|
|
2684
|
+
role="tree"
|
|
2685
|
+
aria-label="Tree View with selectable, expandable nodes example"
|
|
2686
|
+
>
|
|
2246
2687
|
<li
|
|
2247
2688
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2248
2689
|
role="treeitem"
|
|
2690
|
+
aria-selected="false"
|
|
2249
2691
|
aria-expanded="true"
|
|
2250
2692
|
tabindex="0"
|
|
2251
2693
|
>
|
|
@@ -2279,6 +2721,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2279
2721
|
<li
|
|
2280
2722
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2281
2723
|
role="treeitem"
|
|
2724
|
+
aria-selected="false"
|
|
2282
2725
|
aria-expanded="true"
|
|
2283
2726
|
tabindex="0"
|
|
2284
2727
|
>
|
|
@@ -2312,6 +2755,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2312
2755
|
<li
|
|
2313
2756
|
class="pf-v6-c-tree-view__list-item"
|
|
2314
2757
|
role="treeitem"
|
|
2758
|
+
aria-selected="false"
|
|
2315
2759
|
tabindex="-1"
|
|
2316
2760
|
>
|
|
2317
2761
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2325,6 +2769,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2325
2769
|
<li
|
|
2326
2770
|
class="pf-v6-c-tree-view__list-item"
|
|
2327
2771
|
role="treeitem"
|
|
2772
|
+
aria-selected="false"
|
|
2328
2773
|
tabindex="-1"
|
|
2329
2774
|
>
|
|
2330
2775
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2338,6 +2783,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2338
2783
|
<li
|
|
2339
2784
|
class="pf-v6-c-tree-view__list-item"
|
|
2340
2785
|
role="treeitem"
|
|
2786
|
+
aria-selected="false"
|
|
2341
2787
|
aria-expanded="false"
|
|
2342
2788
|
tabindex="0"
|
|
2343
2789
|
>
|
|
@@ -2373,6 +2819,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2373
2819
|
<li
|
|
2374
2820
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2375
2821
|
role="treeitem"
|
|
2822
|
+
aria-selected="false"
|
|
2376
2823
|
aria-expanded="true"
|
|
2377
2824
|
tabindex="0"
|
|
2378
2825
|
>
|
|
@@ -2406,6 +2853,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2406
2853
|
<li
|
|
2407
2854
|
class="pf-v6-c-tree-view__list-item"
|
|
2408
2855
|
role="treeitem"
|
|
2856
|
+
aria-selected="false"
|
|
2409
2857
|
tabindex="-1"
|
|
2410
2858
|
>
|
|
2411
2859
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2419,6 +2867,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2419
2867
|
<li
|
|
2420
2868
|
class="pf-v6-c-tree-view__list-item"
|
|
2421
2869
|
role="treeitem"
|
|
2870
|
+
aria-selected="false"
|
|
2422
2871
|
aria-expanded="false"
|
|
2423
2872
|
tabindex="0"
|
|
2424
2873
|
>
|
|
@@ -2452,6 +2901,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2452
2901
|
<li
|
|
2453
2902
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2454
2903
|
role="treeitem"
|
|
2904
|
+
aria-selected="false"
|
|
2455
2905
|
aria-expanded="true"
|
|
2456
2906
|
tabindex="0"
|
|
2457
2907
|
>
|
|
@@ -2485,6 +2935,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2485
2935
|
<li
|
|
2486
2936
|
class="pf-v6-c-tree-view__list-item"
|
|
2487
2937
|
role="treeitem"
|
|
2938
|
+
aria-selected="true"
|
|
2488
2939
|
aria-expanded="false"
|
|
2489
2940
|
tabindex="0"
|
|
2490
2941
|
>
|
|
@@ -2518,6 +2969,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2518
2969
|
<li
|
|
2519
2970
|
class="pf-v6-c-tree-view__list-item"
|
|
2520
2971
|
role="treeitem"
|
|
2972
|
+
aria-selected="false"
|
|
2521
2973
|
tabindex="-1"
|
|
2522
2974
|
>
|
|
2523
2975
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2531,6 +2983,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2531
2983
|
<li
|
|
2532
2984
|
class="pf-v6-c-tree-view__list-item"
|
|
2533
2985
|
role="treeitem"
|
|
2986
|
+
aria-selected="false"
|
|
2534
2987
|
tabindex="-1"
|
|
2535
2988
|
>
|
|
2536
2989
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2550,6 +3003,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2550
3003
|
<li
|
|
2551
3004
|
class="pf-v6-c-tree-view__list-item"
|
|
2552
3005
|
role="treeitem"
|
|
3006
|
+
aria-selected="false"
|
|
2553
3007
|
aria-expanded="false"
|
|
2554
3008
|
tabindex="0"
|
|
2555
3009
|
>
|
|
@@ -2583,6 +3037,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2583
3037
|
<li
|
|
2584
3038
|
class="pf-v6-c-tree-view__list-item"
|
|
2585
3039
|
role="treeitem"
|
|
3040
|
+
aria-selected="false"
|
|
2586
3041
|
aria-expanded="false"
|
|
2587
3042
|
tabindex="0"
|
|
2588
3043
|
>
|
|
@@ -2616,6 +3071,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2616
3071
|
<li
|
|
2617
3072
|
class="pf-v6-c-tree-view__list-item"
|
|
2618
3073
|
role="treeitem"
|
|
3074
|
+
aria-selected="false"
|
|
2619
3075
|
aria-expanded="false"
|
|
2620
3076
|
tabindex="0"
|
|
2621
3077
|
>
|
|
@@ -2655,10 +3111,15 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2655
3111
|
|
|
2656
3112
|
```html
|
|
2657
3113
|
<div class="pf-v6-c-tree-view pf-m-guides">
|
|
2658
|
-
<ul
|
|
3114
|
+
<ul
|
|
3115
|
+
class="pf-v6-c-tree-view__list"
|
|
3116
|
+
role="tree"
|
|
3117
|
+
aria-label="Tree View guides example"
|
|
3118
|
+
>
|
|
2659
3119
|
<li
|
|
2660
3120
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2661
3121
|
role="treeitem"
|
|
3122
|
+
aria-selected="false"
|
|
2662
3123
|
aria-expanded="true"
|
|
2663
3124
|
tabindex="0"
|
|
2664
3125
|
>
|
|
@@ -2678,6 +3139,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2678
3139
|
<li
|
|
2679
3140
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2680
3141
|
role="treeitem"
|
|
3142
|
+
aria-selected="false"
|
|
2681
3143
|
aria-expanded="true"
|
|
2682
3144
|
tabindex="0"
|
|
2683
3145
|
>
|
|
@@ -2697,6 +3159,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2697
3159
|
<li
|
|
2698
3160
|
class="pf-v6-c-tree-view__list-item"
|
|
2699
3161
|
role="treeitem"
|
|
3162
|
+
aria-selected="false"
|
|
2700
3163
|
tabindex="-1"
|
|
2701
3164
|
>
|
|
2702
3165
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2710,6 +3173,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2710
3173
|
<li
|
|
2711
3174
|
class="pf-v6-c-tree-view__list-item"
|
|
2712
3175
|
role="treeitem"
|
|
3176
|
+
aria-selected="true"
|
|
2713
3177
|
tabindex="-1"
|
|
2714
3178
|
>
|
|
2715
3179
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2723,6 +3187,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2723
3187
|
<li
|
|
2724
3188
|
class="pf-v6-c-tree-view__list-item"
|
|
2725
3189
|
role="treeitem"
|
|
3190
|
+
aria-selected="false"
|
|
2726
3191
|
aria-expanded="false"
|
|
2727
3192
|
tabindex="0"
|
|
2728
3193
|
>
|
|
@@ -2744,6 +3209,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2744
3209
|
<li
|
|
2745
3210
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2746
3211
|
role="treeitem"
|
|
3212
|
+
aria-selected="false"
|
|
2747
3213
|
aria-expanded="true"
|
|
2748
3214
|
tabindex="0"
|
|
2749
3215
|
>
|
|
@@ -2763,6 +3229,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2763
3229
|
<li
|
|
2764
3230
|
class="pf-v6-c-tree-view__list-item"
|
|
2765
3231
|
role="treeitem"
|
|
3232
|
+
aria-selected="false"
|
|
2766
3233
|
tabindex="-1"
|
|
2767
3234
|
>
|
|
2768
3235
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2776,6 +3243,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2776
3243
|
<li
|
|
2777
3244
|
class="pf-v6-c-tree-view__list-item"
|
|
2778
3245
|
role="treeitem"
|
|
3246
|
+
aria-selected="false"
|
|
2779
3247
|
aria-expanded="false"
|
|
2780
3248
|
tabindex="0"
|
|
2781
3249
|
>
|
|
@@ -2795,6 +3263,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2795
3263
|
<li
|
|
2796
3264
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2797
3265
|
role="treeitem"
|
|
3266
|
+
aria-selected="false"
|
|
2798
3267
|
aria-expanded="true"
|
|
2799
3268
|
tabindex="0"
|
|
2800
3269
|
>
|
|
@@ -2814,6 +3283,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2814
3283
|
<li
|
|
2815
3284
|
class="pf-v6-c-tree-view__list-item"
|
|
2816
3285
|
role="treeitem"
|
|
3286
|
+
aria-selected="false"
|
|
2817
3287
|
aria-expanded="false"
|
|
2818
3288
|
tabindex="0"
|
|
2819
3289
|
>
|
|
@@ -2833,6 +3303,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2833
3303
|
<li
|
|
2834
3304
|
class="pf-v6-c-tree-view__list-item"
|
|
2835
3305
|
role="treeitem"
|
|
3306
|
+
aria-selected="false"
|
|
2836
3307
|
tabindex="-1"
|
|
2837
3308
|
>
|
|
2838
3309
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2846,6 +3317,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2846
3317
|
<li
|
|
2847
3318
|
class="pf-v6-c-tree-view__list-item"
|
|
2848
3319
|
role="treeitem"
|
|
3320
|
+
aria-selected="false"
|
|
2849
3321
|
tabindex="-1"
|
|
2850
3322
|
>
|
|
2851
3323
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -2865,6 +3337,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2865
3337
|
<li
|
|
2866
3338
|
class="pf-v6-c-tree-view__list-item"
|
|
2867
3339
|
role="treeitem"
|
|
3340
|
+
aria-selected="false"
|
|
2868
3341
|
aria-expanded="false"
|
|
2869
3342
|
tabindex="0"
|
|
2870
3343
|
>
|
|
@@ -2884,6 +3357,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2884
3357
|
<li
|
|
2885
3358
|
class="pf-v6-c-tree-view__list-item"
|
|
2886
3359
|
role="treeitem"
|
|
3360
|
+
aria-selected="false"
|
|
2887
3361
|
aria-expanded="false"
|
|
2888
3362
|
tabindex="0"
|
|
2889
3363
|
>
|
|
@@ -2903,6 +3377,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2903
3377
|
<li
|
|
2904
3378
|
class="pf-v6-c-tree-view__list-item"
|
|
2905
3379
|
role="treeitem"
|
|
3380
|
+
aria-selected="false"
|
|
2906
3381
|
aria-expanded="false"
|
|
2907
3382
|
tabindex="0"
|
|
2908
3383
|
>
|
|
@@ -2930,8 +3405,17 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2930
3405
|
|
|
2931
3406
|
```html
|
|
2932
3407
|
<div class="pf-v6-c-tree-view pf-m-compact">
|
|
2933
|
-
<ul
|
|
2934
|
-
|
|
3408
|
+
<ul
|
|
3409
|
+
class="pf-v6-c-tree-view__list"
|
|
3410
|
+
role="tree"
|
|
3411
|
+
aria-label="Tree View compact example"
|
|
3412
|
+
>
|
|
3413
|
+
<li
|
|
3414
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3415
|
+
role="treeitem"
|
|
3416
|
+
aria-selected="false"
|
|
3417
|
+
tabindex="-1"
|
|
3418
|
+
>
|
|
2935
3419
|
<div class="pf-v6-c-tree-view__content">
|
|
2936
3420
|
<button class="pf-v6-c-tree-view__node">
|
|
2937
3421
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2945,7 +3429,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2945
3429
|
</button>
|
|
2946
3430
|
</div>
|
|
2947
3431
|
</li>
|
|
2948
|
-
<li
|
|
3432
|
+
<li
|
|
3433
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3434
|
+
role="treeitem"
|
|
3435
|
+
aria-selected="false"
|
|
3436
|
+
tabindex="-1"
|
|
3437
|
+
>
|
|
2949
3438
|
<div class="pf-v6-c-tree-view__content">
|
|
2950
3439
|
<button class="pf-v6-c-tree-view__node">
|
|
2951
3440
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2959,7 +3448,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2959
3448
|
</button>
|
|
2960
3449
|
</div>
|
|
2961
3450
|
</li>
|
|
2962
|
-
<li
|
|
3451
|
+
<li
|
|
3452
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3453
|
+
role="treeitem"
|
|
3454
|
+
aria-selected="false"
|
|
3455
|
+
tabindex="-1"
|
|
3456
|
+
>
|
|
2963
3457
|
<div class="pf-v6-c-tree-view__content">
|
|
2964
3458
|
<button class="pf-v6-c-tree-view__node">
|
|
2965
3459
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -2976,6 +3470,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2976
3470
|
<li
|
|
2977
3471
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2978
3472
|
role="treeitem"
|
|
3473
|
+
aria-selected="false"
|
|
2979
3474
|
aria-expanded="true"
|
|
2980
3475
|
tabindex="0"
|
|
2981
3476
|
>
|
|
@@ -2997,7 +3492,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
2997
3492
|
</button>
|
|
2998
3493
|
</div>
|
|
2999
3494
|
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3000
|
-
<li
|
|
3495
|
+
<li
|
|
3496
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3497
|
+
role="treeitem"
|
|
3498
|
+
aria-selected="false"
|
|
3499
|
+
tabindex="-1"
|
|
3500
|
+
>
|
|
3001
3501
|
<div class="pf-v6-c-tree-view__content">
|
|
3002
3502
|
<button class="pf-v6-c-tree-view__node">
|
|
3003
3503
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3011,7 +3511,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3011
3511
|
</button>
|
|
3012
3512
|
</div>
|
|
3013
3513
|
</li>
|
|
3014
|
-
<li
|
|
3514
|
+
<li
|
|
3515
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3516
|
+
role="treeitem"
|
|
3517
|
+
aria-selected="false"
|
|
3518
|
+
tabindex="-1"
|
|
3519
|
+
>
|
|
3015
3520
|
<div class="pf-v6-c-tree-view__content">
|
|
3016
3521
|
<button class="pf-v6-c-tree-view__node">
|
|
3017
3522
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3025,7 +3530,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3025
3530
|
</button>
|
|
3026
3531
|
</div>
|
|
3027
3532
|
</li>
|
|
3028
|
-
<li
|
|
3533
|
+
<li
|
|
3534
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3535
|
+
role="treeitem"
|
|
3536
|
+
aria-selected="false"
|
|
3537
|
+
tabindex="-1"
|
|
3538
|
+
>
|
|
3029
3539
|
<div class="pf-v6-c-tree-view__content">
|
|
3030
3540
|
<button class="pf-v6-c-tree-view__node">
|
|
3031
3541
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3041,7 +3551,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3041
3551
|
</button>
|
|
3042
3552
|
</div>
|
|
3043
3553
|
</li>
|
|
3044
|
-
<li
|
|
3554
|
+
<li
|
|
3555
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3556
|
+
role="treeitem"
|
|
3557
|
+
aria-selected="false"
|
|
3558
|
+
tabindex="-1"
|
|
3559
|
+
>
|
|
3045
3560
|
<div class="pf-v6-c-tree-view__content">
|
|
3046
3561
|
<button class="pf-v6-c-tree-view__node">
|
|
3047
3562
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3055,7 +3570,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3055
3570
|
</button>
|
|
3056
3571
|
</div>
|
|
3057
3572
|
</li>
|
|
3058
|
-
<li
|
|
3573
|
+
<li
|
|
3574
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3575
|
+
role="treeitem"
|
|
3576
|
+
aria-selected="false"
|
|
3577
|
+
tabindex="-1"
|
|
3578
|
+
>
|
|
3059
3579
|
<div class="pf-v6-c-tree-view__content">
|
|
3060
3580
|
<button class="pf-v6-c-tree-view__node">
|
|
3061
3581
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3074,6 +3594,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3074
3594
|
<li
|
|
3075
3595
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3076
3596
|
role="treeitem"
|
|
3597
|
+
aria-selected="false"
|
|
3077
3598
|
aria-expanded="true"
|
|
3078
3599
|
tabindex="0"
|
|
3079
3600
|
>
|
|
@@ -3098,6 +3619,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3098
3619
|
<li
|
|
3099
3620
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3100
3621
|
role="treeitem"
|
|
3622
|
+
aria-selected="false"
|
|
3101
3623
|
aria-expanded="true"
|
|
3102
3624
|
tabindex="0"
|
|
3103
3625
|
>
|
|
@@ -3124,6 +3646,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3124
3646
|
<li
|
|
3125
3647
|
class="pf-v6-c-tree-view__list-item"
|
|
3126
3648
|
role="treeitem"
|
|
3649
|
+
aria-selected="false"
|
|
3127
3650
|
tabindex="-1"
|
|
3128
3651
|
>
|
|
3129
3652
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3146,6 +3669,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3146
3669
|
<li
|
|
3147
3670
|
class="pf-v6-c-tree-view__list-item"
|
|
3148
3671
|
role="treeitem"
|
|
3672
|
+
aria-selected="false"
|
|
3149
3673
|
tabindex="-1"
|
|
3150
3674
|
>
|
|
3151
3675
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3163,7 +3687,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3163
3687
|
</li>
|
|
3164
3688
|
</ul>
|
|
3165
3689
|
</li>
|
|
3166
|
-
<li
|
|
3690
|
+
<li
|
|
3691
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3692
|
+
role="treeitem"
|
|
3693
|
+
aria-selected="false"
|
|
3694
|
+
tabindex="-1"
|
|
3695
|
+
>
|
|
3167
3696
|
<div class="pf-v6-c-tree-view__content">
|
|
3168
3697
|
<button class="pf-v6-c-tree-view__node">
|
|
3169
3698
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3188,8 +3717,17 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3188
3717
|
|
|
3189
3718
|
```html
|
|
3190
3719
|
<div class="pf-v6-c-tree-view pf-m-compact pf-m-no-background">
|
|
3191
|
-
<ul
|
|
3192
|
-
|
|
3720
|
+
<ul
|
|
3721
|
+
class="pf-v6-c-tree-view__list"
|
|
3722
|
+
role="tree"
|
|
3723
|
+
aria-label="Tree View compact no background example"
|
|
3724
|
+
>
|
|
3725
|
+
<li
|
|
3726
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3727
|
+
role="treeitem"
|
|
3728
|
+
aria-selected="false"
|
|
3729
|
+
tabindex="-1"
|
|
3730
|
+
>
|
|
3193
3731
|
<div class="pf-v6-c-tree-view__content">
|
|
3194
3732
|
<button class="pf-v6-c-tree-view__node">
|
|
3195
3733
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3203,7 +3741,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3203
3741
|
</button>
|
|
3204
3742
|
</div>
|
|
3205
3743
|
</li>
|
|
3206
|
-
<li
|
|
3744
|
+
<li
|
|
3745
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3746
|
+
role="treeitem"
|
|
3747
|
+
aria-selected="false"
|
|
3748
|
+
tabindex="-1"
|
|
3749
|
+
>
|
|
3207
3750
|
<div class="pf-v6-c-tree-view__content">
|
|
3208
3751
|
<button class="pf-v6-c-tree-view__node">
|
|
3209
3752
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3217,7 +3760,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3217
3760
|
</button>
|
|
3218
3761
|
</div>
|
|
3219
3762
|
</li>
|
|
3220
|
-
<li
|
|
3763
|
+
<li
|
|
3764
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3765
|
+
role="treeitem"
|
|
3766
|
+
aria-selected="false"
|
|
3767
|
+
tabindex="-1"
|
|
3768
|
+
>
|
|
3221
3769
|
<div class="pf-v6-c-tree-view__content">
|
|
3222
3770
|
<button class="pf-v6-c-tree-view__node">
|
|
3223
3771
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3234,6 +3782,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3234
3782
|
<li
|
|
3235
3783
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3236
3784
|
role="treeitem"
|
|
3785
|
+
aria-selected="false"
|
|
3237
3786
|
aria-expanded="true"
|
|
3238
3787
|
tabindex="0"
|
|
3239
3788
|
>
|
|
@@ -3255,7 +3804,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3255
3804
|
</button>
|
|
3256
3805
|
</div>
|
|
3257
3806
|
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3258
|
-
<li
|
|
3807
|
+
<li
|
|
3808
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3809
|
+
role="treeitem"
|
|
3810
|
+
aria-selected="false"
|
|
3811
|
+
tabindex="-1"
|
|
3812
|
+
>
|
|
3259
3813
|
<div class="pf-v6-c-tree-view__content">
|
|
3260
3814
|
<button class="pf-v6-c-tree-view__node">
|
|
3261
3815
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3269,7 +3823,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3269
3823
|
</button>
|
|
3270
3824
|
</div>
|
|
3271
3825
|
</li>
|
|
3272
|
-
<li
|
|
3826
|
+
<li
|
|
3827
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3828
|
+
role="treeitem"
|
|
3829
|
+
aria-selected="false"
|
|
3830
|
+
tabindex="-1"
|
|
3831
|
+
>
|
|
3273
3832
|
<div class="pf-v6-c-tree-view__content">
|
|
3274
3833
|
<button class="pf-v6-c-tree-view__node">
|
|
3275
3834
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3283,7 +3842,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3283
3842
|
</button>
|
|
3284
3843
|
</div>
|
|
3285
3844
|
</li>
|
|
3286
|
-
<li
|
|
3845
|
+
<li
|
|
3846
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3847
|
+
role="treeitem"
|
|
3848
|
+
aria-selected="false"
|
|
3849
|
+
tabindex="-1"
|
|
3850
|
+
>
|
|
3287
3851
|
<div class="pf-v6-c-tree-view__content">
|
|
3288
3852
|
<button class="pf-v6-c-tree-view__node">
|
|
3289
3853
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3299,7 +3863,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3299
3863
|
</button>
|
|
3300
3864
|
</div>
|
|
3301
3865
|
</li>
|
|
3302
|
-
<li
|
|
3866
|
+
<li
|
|
3867
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3868
|
+
role="treeitem"
|
|
3869
|
+
aria-selected="false"
|
|
3870
|
+
tabindex="-1"
|
|
3871
|
+
>
|
|
3303
3872
|
<div class="pf-v6-c-tree-view__content">
|
|
3304
3873
|
<button class="pf-v6-c-tree-view__node">
|
|
3305
3874
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3313,7 +3882,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3313
3882
|
</button>
|
|
3314
3883
|
</div>
|
|
3315
3884
|
</li>
|
|
3316
|
-
<li
|
|
3885
|
+
<li
|
|
3886
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3887
|
+
role="treeitem"
|
|
3888
|
+
aria-selected="false"
|
|
3889
|
+
tabindex="-1"
|
|
3890
|
+
>
|
|
3317
3891
|
<div class="pf-v6-c-tree-view__content">
|
|
3318
3892
|
<button class="pf-v6-c-tree-view__node">
|
|
3319
3893
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3332,6 +3906,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3332
3906
|
<li
|
|
3333
3907
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3334
3908
|
role="treeitem"
|
|
3909
|
+
aria-selected="false"
|
|
3335
3910
|
aria-expanded="true"
|
|
3336
3911
|
tabindex="0"
|
|
3337
3912
|
>
|
|
@@ -3356,6 +3931,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3356
3931
|
<li
|
|
3357
3932
|
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3358
3933
|
role="treeitem"
|
|
3934
|
+
aria-selected="false"
|
|
3359
3935
|
aria-expanded="true"
|
|
3360
3936
|
tabindex="0"
|
|
3361
3937
|
>
|
|
@@ -3382,6 +3958,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3382
3958
|
<li
|
|
3383
3959
|
class="pf-v6-c-tree-view__list-item"
|
|
3384
3960
|
role="treeitem"
|
|
3961
|
+
aria-selected="false"
|
|
3385
3962
|
tabindex="-1"
|
|
3386
3963
|
>
|
|
3387
3964
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3404,6 +3981,7 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3404
3981
|
<li
|
|
3405
3982
|
class="pf-v6-c-tree-view__list-item"
|
|
3406
3983
|
role="treeitem"
|
|
3984
|
+
aria-selected="false"
|
|
3407
3985
|
tabindex="-1"
|
|
3408
3986
|
>
|
|
3409
3987
|
<div class="pf-v6-c-tree-view__content">
|
|
@@ -3421,7 +3999,12 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3421
3999
|
</li>
|
|
3422
4000
|
</ul>
|
|
3423
4001
|
</li>
|
|
3424
|
-
<li
|
|
4002
|
+
<li
|
|
4003
|
+
class="pf-v6-c-tree-view__list-item"
|
|
4004
|
+
role="treeitem"
|
|
4005
|
+
aria-selected="false"
|
|
4006
|
+
tabindex="-1"
|
|
4007
|
+
>
|
|
3425
4008
|
<div class="pf-v6-c-tree-view__content">
|
|
3426
4009
|
<button class="pf-v6-c-tree-view__node">
|
|
3427
4010
|
<span class="pf-v6-c-tree-view__node-container">
|
|
@@ -3444,19 +4027,6 @@ cssPrefix: pf-v6-c-tree-view
|
|
|
3444
4027
|
|
|
3445
4028
|
## Documentation
|
|
3446
4029
|
|
|
3447
|
-
### Accessibility
|
|
3448
|
-
|
|
3449
|
-
| Attribute | Applied to | Outcome |
|
|
3450
|
-
| -- | -- | -- |
|
|
3451
|
-
| `role="tree"` | `.pf-v6-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
|
|
3452
|
-
| `role="group"` | `.pf-v6-c-tree-view__list` | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`** |
|
|
3453
|
-
| `role="treeitem"` | `.pf-v6-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
|
|
3454
|
-
| `aria-expanded="false"` | `.pf-v6-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
|
|
3455
|
-
| `aria-expanded="true"` | `.pf-v6-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
|
|
3456
|
-
| `tabindex="-1"` | `.pf-v6-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
|
|
3457
|
-
| `tabindex="0"` | `.pf-v6-c-tree-view__list-item` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
|
|
3458
|
-
| `aria-label="[button label text]"` | `.pf-v6-c-tree-view__action` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
|
|
3459
|
-
|
|
3460
4030
|
### Usage
|
|
3461
4031
|
|
|
3462
4032
|
| Class | Applied | Outcome |
|