@patternfly/patternfly 5.3.0 → 5.4.0-prerelease.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,14 +4,19 @@ section: components
|
|
|
4
4
|
cssPrefix: pf-v5-c-tree-view
|
|
5
5
|
---## Examples
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Single selectable
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-v5-c-tree-view">
|
|
11
|
-
<ul
|
|
11
|
+
<ul
|
|
12
|
+
class="pf-v5-c-tree-view__list"
|
|
13
|
+
role="tree"
|
|
14
|
+
aria-label="Tree View single selectable example"
|
|
15
|
+
>
|
|
12
16
|
<li
|
|
13
17
|
class="pf-v5-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-v5-c-tree-view
|
|
|
31
36
|
<li
|
|
32
37
|
class="pf-v5-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-v5-c-tree-view
|
|
|
50
56
|
<li
|
|
51
57
|
class="pf-v5-c-tree-view__list-item"
|
|
52
58
|
role="treeitem"
|
|
59
|
+
aria-selected="false"
|
|
53
60
|
tabindex="-1"
|
|
54
61
|
>
|
|
55
62
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -63,6 +70,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
63
70
|
<li
|
|
64
71
|
class="pf-v5-c-tree-view__list-item"
|
|
65
72
|
role="treeitem"
|
|
73
|
+
aria-selected="true"
|
|
66
74
|
tabindex="-1"
|
|
67
75
|
>
|
|
68
76
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -76,6 +84,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
76
84
|
<li
|
|
77
85
|
class="pf-v5-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-v5-c-tree-view
|
|
|
97
106
|
<li
|
|
98
107
|
class="pf-v5-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-v5-c-tree-view
|
|
|
116
126
|
<li
|
|
117
127
|
class="pf-v5-c-tree-view__list-item"
|
|
118
128
|
role="treeitem"
|
|
129
|
+
aria-selected="false"
|
|
119
130
|
tabindex="-1"
|
|
120
131
|
>
|
|
121
132
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -129,6 +140,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
129
140
|
<li
|
|
130
141
|
class="pf-v5-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-v5-c-tree-view
|
|
|
148
160
|
<li
|
|
149
161
|
class="pf-v5-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-v5-c-tree-view
|
|
|
167
180
|
<li
|
|
168
181
|
class="pf-v5-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-v5-c-tree-view
|
|
|
186
200
|
<li
|
|
187
201
|
class="pf-v5-c-tree-view__list-item"
|
|
188
202
|
role="treeitem"
|
|
203
|
+
aria-selected="false"
|
|
189
204
|
tabindex="-1"
|
|
190
205
|
>
|
|
191
206
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -199,6 +214,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
199
214
|
<li
|
|
200
215
|
class="pf-v5-c-tree-view__list-item"
|
|
201
216
|
role="treeitem"
|
|
217
|
+
aria-selected="false"
|
|
202
218
|
tabindex="-1"
|
|
203
219
|
>
|
|
204
220
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -218,6 +234,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
218
234
|
<li
|
|
219
235
|
class="pf-v5-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-v5-c-tree-view
|
|
|
237
254
|
<li
|
|
238
255
|
class="pf-v5-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-v5-c-tree-view
|
|
|
256
274
|
<li
|
|
257
275
|
class="pf-v5-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-v5-c-tree-view__content">
|
|
282
|
+
<button class="pf-v5-c-tree-view__node">
|
|
283
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
284
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
285
|
+
<span class="pf-v5-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-v5-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-v5-c-tree-view">
|
|
307
|
+
<ul
|
|
308
|
+
class="pf-v5-c-tree-view__list"
|
|
309
|
+
role="tree"
|
|
310
|
+
aria-multiselectable="true"
|
|
311
|
+
aria-label="Tree View multiselectable example"
|
|
312
|
+
>
|
|
313
|
+
<li
|
|
314
|
+
class="pf-v5-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-v5-c-tree-view__content">
|
|
321
|
+
<button class="pf-v5-c-tree-view__node">
|
|
322
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
323
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
324
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Application launcher</span>
|
|
329
|
+
</span>
|
|
330
|
+
</button>
|
|
331
|
+
</div>
|
|
332
|
+
<ul class="pf-v5-c-tree-view__list" role="group">
|
|
333
|
+
<li
|
|
334
|
+
class="pf-v5-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-v5-c-tree-view__content">
|
|
341
|
+
<button class="pf-v5-c-tree-view__node">
|
|
342
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
343
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
344
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Application 1</span>
|
|
349
|
+
</span>
|
|
350
|
+
</button>
|
|
351
|
+
</div>
|
|
352
|
+
<ul class="pf-v5-c-tree-view__list" role="group">
|
|
353
|
+
<li
|
|
354
|
+
class="pf-v5-c-tree-view__list-item"
|
|
355
|
+
role="treeitem"
|
|
356
|
+
aria-selected="false"
|
|
357
|
+
tabindex="-1"
|
|
358
|
+
>
|
|
359
|
+
<div class="pf-v5-c-tree-view__content">
|
|
360
|
+
<button class="pf-v5-c-tree-view__node">
|
|
361
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
362
|
+
<span class="pf-v5-c-tree-view__node-text">Settings</span>
|
|
363
|
+
</span>
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
</li>
|
|
367
|
+
<li
|
|
368
|
+
class="pf-v5-c-tree-view__list-item"
|
|
369
|
+
role="treeitem"
|
|
370
|
+
aria-selected="true"
|
|
371
|
+
tabindex="-1"
|
|
372
|
+
>
|
|
373
|
+
<div class="pf-v5-c-tree-view__content">
|
|
374
|
+
<button class="pf-v5-c-tree-view__node pf-m-current">
|
|
375
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
376
|
+
<span class="pf-v5-c-tree-view__node-text">Current</span>
|
|
377
|
+
</span>
|
|
378
|
+
</button>
|
|
379
|
+
</div>
|
|
380
|
+
</li>
|
|
381
|
+
<li
|
|
382
|
+
class="pf-v5-c-tree-view__list-item"
|
|
383
|
+
role="treeitem"
|
|
384
|
+
aria-selected="false"
|
|
385
|
+
aria-expanded="false"
|
|
386
|
+
tabindex="0"
|
|
387
|
+
>
|
|
388
|
+
<div class="pf-v5-c-tree-view__content">
|
|
389
|
+
<button class="pf-v5-c-tree-view__node">
|
|
390
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
391
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
392
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Loader</span>
|
|
397
|
+
</span>
|
|
398
|
+
</button>
|
|
399
|
+
</div>
|
|
400
|
+
</li>
|
|
401
|
+
</ul>
|
|
402
|
+
</li>
|
|
403
|
+
<li
|
|
404
|
+
class="pf-v5-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-v5-c-tree-view__content">
|
|
411
|
+
<button class="pf-v5-c-tree-view__node">
|
|
412
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
413
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
414
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Application 2</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</div>
|
|
422
|
+
<ul class="pf-v5-c-tree-view__list" role="group">
|
|
423
|
+
<li
|
|
424
|
+
class="pf-v5-c-tree-view__list-item"
|
|
425
|
+
role="treeitem"
|
|
426
|
+
aria-selected="false"
|
|
427
|
+
tabindex="-1"
|
|
428
|
+
>
|
|
429
|
+
<div class="pf-v5-c-tree-view__content">
|
|
430
|
+
<button class="pf-v5-c-tree-view__node">
|
|
431
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
432
|
+
<span class="pf-v5-c-tree-view__node-text">Settings</span>
|
|
433
|
+
</span>
|
|
434
|
+
</button>
|
|
435
|
+
</div>
|
|
436
|
+
</li>
|
|
437
|
+
<li
|
|
438
|
+
class="pf-v5-c-tree-view__list-item"
|
|
439
|
+
role="treeitem"
|
|
440
|
+
aria-selected="false"
|
|
441
|
+
aria-expanded="false"
|
|
442
|
+
tabindex="0"
|
|
443
|
+
>
|
|
444
|
+
<div class="pf-v5-c-tree-view__content">
|
|
445
|
+
<button class="pf-v5-c-tree-view__node">
|
|
446
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
447
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
448
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Settings</span>
|
|
453
|
+
</span>
|
|
454
|
+
</button>
|
|
455
|
+
</div>
|
|
456
|
+
</li>
|
|
457
|
+
<li
|
|
458
|
+
class="pf-v5-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-v5-c-tree-view__content">
|
|
465
|
+
<button class="pf-v5-c-tree-view__node">
|
|
466
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
467
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
468
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Loader</span>
|
|
473
|
+
</span>
|
|
474
|
+
</button>
|
|
475
|
+
</div>
|
|
476
|
+
<ul class="pf-v5-c-tree-view__list" role="group">
|
|
477
|
+
<li
|
|
478
|
+
class="pf-v5-c-tree-view__list-item"
|
|
479
|
+
role="treeitem"
|
|
480
|
+
aria-selected="false"
|
|
481
|
+
aria-expanded="false"
|
|
482
|
+
tabindex="0"
|
|
483
|
+
>
|
|
484
|
+
<div class="pf-v5-c-tree-view__content">
|
|
485
|
+
<button class="pf-v5-c-tree-view__node">
|
|
486
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
487
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
488
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Loader app 1</span>
|
|
493
|
+
</span>
|
|
494
|
+
</button>
|
|
495
|
+
</div>
|
|
496
|
+
</li>
|
|
497
|
+
<li
|
|
498
|
+
class="pf-v5-c-tree-view__list-item"
|
|
499
|
+
role="treeitem"
|
|
500
|
+
aria-selected="true"
|
|
501
|
+
tabindex="-1"
|
|
502
|
+
>
|
|
503
|
+
<div class="pf-v5-c-tree-view__content">
|
|
504
|
+
<button class="pf-v5-c-tree-view__node pf-m-current">
|
|
505
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
506
|
+
<span class="pf-v5-c-tree-view__node-text">Loader app 2</span>
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
</li>
|
|
511
|
+
<li
|
|
512
|
+
class="pf-v5-c-tree-view__list-item"
|
|
513
|
+
role="treeitem"
|
|
514
|
+
aria-selected="false"
|
|
515
|
+
tabindex="-1"
|
|
516
|
+
>
|
|
517
|
+
<div class="pf-v5-c-tree-view__content">
|
|
518
|
+
<button class="pf-v5-c-tree-view__node">
|
|
519
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
520
|
+
<span class="pf-v5-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-v5-c-tree-view__list-item"
|
|
533
|
+
role="treeitem"
|
|
534
|
+
aria-selected="false"
|
|
535
|
+
aria-expanded="false"
|
|
536
|
+
tabindex="0"
|
|
537
|
+
>
|
|
538
|
+
<div class="pf-v5-c-tree-view__content">
|
|
539
|
+
<button class="pf-v5-c-tree-view__node">
|
|
540
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
541
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
542
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Cost management</span>
|
|
547
|
+
</span>
|
|
548
|
+
</button>
|
|
549
|
+
</div>
|
|
550
|
+
</li>
|
|
551
|
+
<li
|
|
552
|
+
class="pf-v5-c-tree-view__list-item"
|
|
553
|
+
role="treeitem"
|
|
554
|
+
aria-selected="false"
|
|
555
|
+
aria-expanded="false"
|
|
556
|
+
tabindex="0"
|
|
557
|
+
>
|
|
558
|
+
<div class="pf-v5-c-tree-view__content">
|
|
559
|
+
<button class="pf-v5-c-tree-view__node">
|
|
560
|
+
<span class="pf-v5-c-tree-view__node-container">
|
|
561
|
+
<span class="pf-v5-c-tree-view__node-toggle">
|
|
562
|
+
<span class="pf-v5-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-v5-c-tree-view__node-text">Sources</span>
|
|
567
|
+
</span>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
</li>
|
|
571
|
+
<li
|
|
572
|
+
class="pf-v5-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-v5-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-v5-c-tree-view">
|
|
286
604
|
<div class="pf-v5-c-tree-view__search">
|
|
@@ -302,10 +620,15 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
302
620
|
</div>
|
|
303
621
|
</div>
|
|
304
622
|
<hr class="pf-v5-c-divider" />
|
|
305
|
-
<ul
|
|
623
|
+
<ul
|
|
624
|
+
class="pf-v5-c-tree-view__list"
|
|
625
|
+
role="tree"
|
|
626
|
+
aria-label="Tree View with search example"
|
|
627
|
+
>
|
|
306
628
|
<li
|
|
307
629
|
class="pf-v5-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-v5-c-tree-view
|
|
|
325
648
|
<li
|
|
326
649
|
class="pf-v5-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-v5-c-tree-view
|
|
|
344
668
|
<li
|
|
345
669
|
class="pf-v5-c-tree-view__list-item"
|
|
346
670
|
role="treeitem"
|
|
671
|
+
aria-selected="false"
|
|
347
672
|
tabindex="-1"
|
|
348
673
|
>
|
|
349
674
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -357,6 +682,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
357
682
|
<li
|
|
358
683
|
class="pf-v5-c-tree-view__list-item"
|
|
359
684
|
role="treeitem"
|
|
685
|
+
aria-selected="true"
|
|
360
686
|
tabindex="-1"
|
|
361
687
|
>
|
|
362
688
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -372,6 +698,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
372
698
|
<li
|
|
373
699
|
class="pf-v5-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-v5-c-tree-view
|
|
|
391
718
|
<li
|
|
392
719
|
class="pf-v5-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-v5-c-tree-view
|
|
|
410
738
|
<li
|
|
411
739
|
class="pf-v5-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-v5-c-tree-view
|
|
|
429
758
|
<li
|
|
430
759
|
class="pf-v5-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-v5-c-tree-view
|
|
|
448
778
|
<li
|
|
449
779
|
class="pf-v5-c-tree-view__list-item"
|
|
450
780
|
role="treeitem"
|
|
781
|
+
aria-selected="false"
|
|
451
782
|
tabindex="-1"
|
|
452
783
|
>
|
|
453
784
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -461,6 +792,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
461
792
|
<li
|
|
462
793
|
class="pf-v5-c-tree-view__list-item"
|
|
463
794
|
role="treeitem"
|
|
795
|
+
aria-selected="false"
|
|
464
796
|
tabindex="-1"
|
|
465
797
|
>
|
|
466
798
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -480,6 +812,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
480
812
|
<li
|
|
481
813
|
class="pf-v5-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-v5-c-tree-view
|
|
|
499
832
|
<li
|
|
500
833
|
class="pf-v5-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-v5-c-tree-view
|
|
|
518
852
|
<li
|
|
519
853
|
class="pf-v5-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-v5-c-tree-view
|
|
|
545
880
|
|
|
546
881
|
```html
|
|
547
882
|
<div class="pf-v5-c-tree-view">
|
|
548
|
-
<ul
|
|
883
|
+
<ul
|
|
884
|
+
class="pf-v5-c-tree-view__list"
|
|
885
|
+
role="tree"
|
|
886
|
+
aria-label="Tree View with checkboxes example"
|
|
887
|
+
>
|
|
549
888
|
<li
|
|
550
889
|
class="pf-v5-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-v5-c-tree-view
|
|
|
591
931
|
<li
|
|
592
932
|
class="pf-v5-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-v5-c-tree-view
|
|
|
634
975
|
<li
|
|
635
976
|
class="pf-v5-c-tree-view__list-item"
|
|
636
977
|
role="treeitem"
|
|
978
|
+
aria-checked="true"
|
|
637
979
|
tabindex="-1"
|
|
638
980
|
>
|
|
639
981
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -666,6 +1008,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
666
1008
|
<li
|
|
667
1009
|
class="pf-v5-c-tree-view__list-item"
|
|
668
1010
|
role="treeitem"
|
|
1011
|
+
aria-checked="true"
|
|
669
1012
|
tabindex="-1"
|
|
670
1013
|
>
|
|
671
1014
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -698,6 +1041,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
698
1041
|
<li
|
|
699
1042
|
class="pf-v5-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-v5-c-tree-view
|
|
|
743
1087
|
<li
|
|
744
1088
|
class="pf-v5-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-v5-c-tree-view
|
|
|
785
1130
|
<li
|
|
786
1131
|
class="pf-v5-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-v5-c-tree-view
|
|
|
827
1173
|
<li
|
|
828
1174
|
class="pf-v5-c-tree-view__list-item"
|
|
829
1175
|
role="treeitem"
|
|
1176
|
+
aria-checked="false"
|
|
830
1177
|
tabindex="-1"
|
|
831
1178
|
>
|
|
832
1179
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -858,6 +1205,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
858
1205
|
<li
|
|
859
1206
|
class="pf-v5-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-v5-c-tree-view
|
|
|
900
1248
|
<li
|
|
901
1249
|
class="pf-v5-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-v5-c-tree-view
|
|
|
925
1274
|
<input
|
|
926
1275
|
class="pf-v5-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-v5-c-tree-view
|
|
|
942
1292
|
<li
|
|
943
1293
|
class="pf-v5-c-tree-view__list-item"
|
|
944
1294
|
role="treeitem"
|
|
1295
|
+
aria-checked="true"
|
|
945
1296
|
tabindex="-1"
|
|
946
1297
|
>
|
|
947
1298
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -974,6 +1325,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
974
1325
|
<li
|
|
975
1326
|
class="pf-v5-c-tree-view__list-item"
|
|
976
1327
|
role="treeitem"
|
|
1328
|
+
aria-checked="false"
|
|
977
1329
|
tabindex="-1"
|
|
978
1330
|
>
|
|
979
1331
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1011,6 +1363,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1011
1363
|
<li
|
|
1012
1364
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1053
1406
|
<li
|
|
1054
1407
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1095
1449
|
<li
|
|
1096
1450
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1144
1499
|
|
|
1145
1500
|
```html
|
|
1146
1501
|
<div class="pf-v5-c-tree-view">
|
|
1147
|
-
<ul
|
|
1502
|
+
<ul
|
|
1503
|
+
class="pf-v5-c-tree-view__list"
|
|
1504
|
+
role="tree"
|
|
1505
|
+
aria-label="Tree View with icons example"
|
|
1506
|
+
>
|
|
1148
1507
|
<li
|
|
1149
1508
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1170
1530
|
<li
|
|
1171
1531
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1192
1553
|
<li
|
|
1193
1554
|
class="pf-v5-c-tree-view__list-item"
|
|
1194
1555
|
role="treeitem"
|
|
1556
|
+
aria-selected="false"
|
|
1195
1557
|
tabindex="-1"
|
|
1196
1558
|
>
|
|
1197
1559
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1208,6 +1570,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1208
1570
|
<li
|
|
1209
1571
|
class="pf-v5-c-tree-view__list-item"
|
|
1210
1572
|
role="treeitem"
|
|
1573
|
+
aria-selected="true"
|
|
1211
1574
|
tabindex="-1"
|
|
1212
1575
|
>
|
|
1213
1576
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1226,6 +1589,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1226
1589
|
<li
|
|
1227
1590
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1248
1612
|
<li
|
|
1249
1613
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1270
1635
|
<li
|
|
1271
1636
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1292
1658
|
<li
|
|
1293
1659
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1314
1681
|
<li
|
|
1315
1682
|
class="pf-v5-c-tree-view__list-item"
|
|
1316
1683
|
role="treeitem"
|
|
1684
|
+
aria-selected="false"
|
|
1317
1685
|
tabindex="-1"
|
|
1318
1686
|
>
|
|
1319
1687
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1330,6 +1698,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1330
1698
|
<li
|
|
1331
1699
|
class="pf-v5-c-tree-view__list-item"
|
|
1332
1700
|
role="treeitem"
|
|
1701
|
+
aria-selected="false"
|
|
1333
1702
|
tabindex="-1"
|
|
1334
1703
|
>
|
|
1335
1704
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1352,6 +1721,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1352
1721
|
<li
|
|
1353
1722
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1374
1744
|
<li
|
|
1375
1745
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1396
1767
|
<li
|
|
1397
1768
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1426
1798
|
|
|
1427
1799
|
```html
|
|
1428
1800
|
<div class="pf-v5-c-tree-view">
|
|
1429
|
-
<ul
|
|
1801
|
+
<ul
|
|
1802
|
+
class="pf-v5-c-tree-view__list"
|
|
1803
|
+
role="tree"
|
|
1804
|
+
aria-label="Tree View with badges example"
|
|
1805
|
+
>
|
|
1430
1806
|
<li
|
|
1431
1807
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1452
1829
|
<li
|
|
1453
1830
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1474
1852
|
<li
|
|
1475
1853
|
class="pf-v5-c-tree-view__list-item"
|
|
1476
1854
|
role="treeitem"
|
|
1855
|
+
aria-selected="false"
|
|
1477
1856
|
tabindex="-1"
|
|
1478
1857
|
>
|
|
1479
1858
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1487,6 +1866,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1487
1866
|
<li
|
|
1488
1867
|
class="pf-v5-c-tree-view__list-item"
|
|
1489
1868
|
role="treeitem"
|
|
1869
|
+
aria-selected="true"
|
|
1490
1870
|
tabindex="-1"
|
|
1491
1871
|
>
|
|
1492
1872
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1502,6 +1882,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1502
1882
|
<li
|
|
1503
1883
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1524
1905
|
<li
|
|
1525
1906
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1546
1928
|
<li
|
|
1547
1929
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1568
1951
|
<li
|
|
1569
1952
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1590
1974
|
<li
|
|
1591
1975
|
class="pf-v5-c-tree-view__list-item"
|
|
1592
1976
|
role="treeitem"
|
|
1977
|
+
aria-selected="false"
|
|
1593
1978
|
tabindex="-1"
|
|
1594
1979
|
>
|
|
1595
1980
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1603,6 +1988,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1603
1988
|
<li
|
|
1604
1989
|
class="pf-v5-c-tree-view__list-item"
|
|
1605
1990
|
role="treeitem"
|
|
1991
|
+
aria-selected="false"
|
|
1606
1992
|
tabindex="-1"
|
|
1607
1993
|
>
|
|
1608
1994
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1622,6 +2008,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1622
2008
|
<li
|
|
1623
2009
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1644
2031
|
<li
|
|
1645
2032
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1666
2054
|
<li
|
|
1667
2055
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1696
2085
|
|
|
1697
2086
|
```html
|
|
1698
2087
|
<div class="pf-v5-c-tree-view">
|
|
1699
|
-
<ul
|
|
2088
|
+
<ul
|
|
2089
|
+
class="pf-v5-c-tree-view__list"
|
|
2090
|
+
role="tree"
|
|
2091
|
+
aria-label="Tree View with action item example"
|
|
2092
|
+
>
|
|
1700
2093
|
<li
|
|
1701
2094
|
class="pf-v5-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-v5-c-tree-view
|
|
|
1720
2114
|
class="pf-v5-c-button pf-m-plain"
|
|
1721
2115
|
type="button"
|
|
1722
2116
|
aria-label="Actions"
|
|
2117
|
+
tabindex="-1"
|
|
1723
2118
|
>
|
|
1724
2119
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1725
2120
|
</button>
|
|
@@ -1729,6 +2124,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1729
2124
|
<li
|
|
1730
2125
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
1731
2126
|
role="treeitem"
|
|
2127
|
+
aria-selected="false"
|
|
1732
2128
|
aria-expanded="true"
|
|
1733
2129
|
tabindex="0"
|
|
1734
2130
|
>
|
|
@@ -1749,6 +2145,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1749
2145
|
class="pf-v5-c-button pf-m-plain"
|
|
1750
2146
|
type="button"
|
|
1751
2147
|
aria-label="Copy"
|
|
2148
|
+
tabindex="-1"
|
|
1752
2149
|
>
|
|
1753
2150
|
<i class="fas fa-clipboard" aria-hidden="true"></i>
|
|
1754
2151
|
</button>
|
|
@@ -1758,6 +2155,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1758
2155
|
<li
|
|
1759
2156
|
class="pf-v5-c-tree-view__list-item"
|
|
1760
2157
|
role="treeitem"
|
|
2158
|
+
aria-selected="false"
|
|
1761
2159
|
tabindex="-1"
|
|
1762
2160
|
>
|
|
1763
2161
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1771,6 +2169,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1771
2169
|
<li
|
|
1772
2170
|
class="pf-v5-c-tree-view__list-item"
|
|
1773
2171
|
role="treeitem"
|
|
2172
|
+
aria-selected="true"
|
|
1774
2173
|
tabindex="-1"
|
|
1775
2174
|
>
|
|
1776
2175
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1786,6 +2185,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1786
2185
|
<li
|
|
1787
2186
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
1788
2187
|
role="treeitem"
|
|
2188
|
+
aria-selected="false"
|
|
1789
2189
|
aria-expanded="true"
|
|
1790
2190
|
tabindex="0"
|
|
1791
2191
|
>
|
|
@@ -1806,6 +2206,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1806
2206
|
class="pf-v5-c-button pf-m-plain"
|
|
1807
2207
|
type="button"
|
|
1808
2208
|
aria-label="Action"
|
|
2209
|
+
tabindex="-1"
|
|
1809
2210
|
>
|
|
1810
2211
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1811
2212
|
</button>
|
|
@@ -1815,6 +2216,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1815
2216
|
<li
|
|
1816
2217
|
class="pf-v5-c-tree-view__list-item"
|
|
1817
2218
|
role="treeitem"
|
|
2219
|
+
aria-selected="false"
|
|
1818
2220
|
aria-expanded="false"
|
|
1819
2221
|
tabindex="0"
|
|
1820
2222
|
>
|
|
@@ -1834,6 +2236,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1834
2236
|
<li
|
|
1835
2237
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
1836
2238
|
role="treeitem"
|
|
2239
|
+
aria-selected="false"
|
|
1837
2240
|
aria-expanded="true"
|
|
1838
2241
|
tabindex="0"
|
|
1839
2242
|
>
|
|
@@ -1853,6 +2256,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1853
2256
|
<li
|
|
1854
2257
|
class="pf-v5-c-tree-view__list-item"
|
|
1855
2258
|
role="treeitem"
|
|
2259
|
+
aria-selected="false"
|
|
1856
2260
|
aria-expanded="false"
|
|
1857
2261
|
tabindex="0"
|
|
1858
2262
|
>
|
|
@@ -1872,6 +2276,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1872
2276
|
<li
|
|
1873
2277
|
class="pf-v5-c-tree-view__list-item"
|
|
1874
2278
|
role="treeitem"
|
|
2279
|
+
aria-selected="false"
|
|
1875
2280
|
tabindex="-1"
|
|
1876
2281
|
>
|
|
1877
2282
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1885,6 +2290,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1885
2290
|
<li
|
|
1886
2291
|
class="pf-v5-c-tree-view__list-item"
|
|
1887
2292
|
role="treeitem"
|
|
2293
|
+
aria-selected="false"
|
|
1888
2294
|
tabindex="-1"
|
|
1889
2295
|
>
|
|
1890
2296
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -1904,6 +2310,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1904
2310
|
<li
|
|
1905
2311
|
class="pf-v5-c-tree-view__list-item"
|
|
1906
2312
|
role="treeitem"
|
|
2313
|
+
aria-selected="false"
|
|
1907
2314
|
aria-expanded="false"
|
|
1908
2315
|
tabindex="0"
|
|
1909
2316
|
>
|
|
@@ -1923,6 +2330,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1923
2330
|
<li
|
|
1924
2331
|
class="pf-v5-c-tree-view__list-item"
|
|
1925
2332
|
role="treeitem"
|
|
2333
|
+
aria-selected="false"
|
|
1926
2334
|
aria-expanded="false"
|
|
1927
2335
|
tabindex="0"
|
|
1928
2336
|
>
|
|
@@ -1942,6 +2350,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1942
2350
|
<li
|
|
1943
2351
|
class="pf-v5-c-tree-view__list-item"
|
|
1944
2352
|
role="treeitem"
|
|
2353
|
+
aria-selected="false"
|
|
1945
2354
|
aria-expanded="false"
|
|
1946
2355
|
tabindex="0"
|
|
1947
2356
|
>
|
|
@@ -1967,6 +2376,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1967
2376
|
aria-expanded="false"
|
|
1968
2377
|
type="button"
|
|
1969
2378
|
aria-label="Actions"
|
|
2379
|
+
tabindex="-1"
|
|
1970
2380
|
>
|
|
1971
2381
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1972
2382
|
</button>
|
|
@@ -2029,10 +2439,15 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2029
2439
|
|
|
2030
2440
|
```html
|
|
2031
2441
|
<div class="pf-v5-c-tree-view">
|
|
2032
|
-
<ul
|
|
2442
|
+
<ul
|
|
2443
|
+
class="pf-v5-c-tree-view__list"
|
|
2444
|
+
role="tree"
|
|
2445
|
+
aria-label="Tree View with non-expandable top level nodes example"
|
|
2446
|
+
>
|
|
2033
2447
|
<li
|
|
2034
2448
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2035
2449
|
role="treeitem"
|
|
2450
|
+
aria-selected="false"
|
|
2036
2451
|
aria-expanded="true"
|
|
2037
2452
|
tabindex="0"
|
|
2038
2453
|
>
|
|
@@ -2052,6 +2467,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2052
2467
|
<li
|
|
2053
2468
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2054
2469
|
role="treeitem"
|
|
2470
|
+
aria-selected="false"
|
|
2055
2471
|
aria-expanded="true"
|
|
2056
2472
|
tabindex="0"
|
|
2057
2473
|
>
|
|
@@ -2071,6 +2487,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2071
2487
|
<li
|
|
2072
2488
|
class="pf-v5-c-tree-view__list-item"
|
|
2073
2489
|
role="treeitem"
|
|
2490
|
+
aria-selected="false"
|
|
2074
2491
|
tabindex="-1"
|
|
2075
2492
|
>
|
|
2076
2493
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2084,6 +2501,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2084
2501
|
<li
|
|
2085
2502
|
class="pf-v5-c-tree-view__list-item"
|
|
2086
2503
|
role="treeitem"
|
|
2504
|
+
aria-selected="true"
|
|
2087
2505
|
tabindex="-1"
|
|
2088
2506
|
>
|
|
2089
2507
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2097,6 +2515,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2097
2515
|
<li
|
|
2098
2516
|
class="pf-v5-c-tree-view__list-item"
|
|
2099
2517
|
role="treeitem"
|
|
2518
|
+
aria-selected="false"
|
|
2100
2519
|
aria-expanded="false"
|
|
2101
2520
|
tabindex="0"
|
|
2102
2521
|
>
|
|
@@ -2118,6 +2537,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2118
2537
|
<li
|
|
2119
2538
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2120
2539
|
role="treeitem"
|
|
2540
|
+
aria-selected="false"
|
|
2121
2541
|
aria-expanded="true"
|
|
2122
2542
|
tabindex="0"
|
|
2123
2543
|
>
|
|
@@ -2137,6 +2557,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2137
2557
|
<li
|
|
2138
2558
|
class="pf-v5-c-tree-view__list-item"
|
|
2139
2559
|
role="treeitem"
|
|
2560
|
+
aria-selected="false"
|
|
2140
2561
|
tabindex="-1"
|
|
2141
2562
|
>
|
|
2142
2563
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2150,6 +2571,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2150
2571
|
<li
|
|
2151
2572
|
class="pf-v5-c-tree-view__list-item"
|
|
2152
2573
|
role="treeitem"
|
|
2574
|
+
aria-selected="false"
|
|
2153
2575
|
aria-expanded="false"
|
|
2154
2576
|
tabindex="0"
|
|
2155
2577
|
>
|
|
@@ -2169,6 +2591,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2169
2591
|
<li
|
|
2170
2592
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2171
2593
|
role="treeitem"
|
|
2594
|
+
aria-selected="false"
|
|
2172
2595
|
aria-expanded="true"
|
|
2173
2596
|
tabindex="0"
|
|
2174
2597
|
>
|
|
@@ -2188,6 +2611,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2188
2611
|
<li
|
|
2189
2612
|
class="pf-v5-c-tree-view__list-item"
|
|
2190
2613
|
role="treeitem"
|
|
2614
|
+
aria-selected="false"
|
|
2191
2615
|
aria-expanded="false"
|
|
2192
2616
|
tabindex="0"
|
|
2193
2617
|
>
|
|
@@ -2207,6 +2631,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2207
2631
|
<li
|
|
2208
2632
|
class="pf-v5-c-tree-view__list-item"
|
|
2209
2633
|
role="treeitem"
|
|
2634
|
+
aria-selected="false"
|
|
2210
2635
|
tabindex="-1"
|
|
2211
2636
|
>
|
|
2212
2637
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2220,6 +2645,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2220
2645
|
<li
|
|
2221
2646
|
class="pf-v5-c-tree-view__list-item"
|
|
2222
2647
|
role="treeitem"
|
|
2648
|
+
aria-selected="false"
|
|
2223
2649
|
tabindex="-1"
|
|
2224
2650
|
>
|
|
2225
2651
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2236,7 +2662,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2236
2662
|
</li>
|
|
2237
2663
|
</ul>
|
|
2238
2664
|
</li>
|
|
2239
|
-
<li
|
|
2665
|
+
<li
|
|
2666
|
+
class="pf-v5-c-tree-view__list-item"
|
|
2667
|
+
role="treeitem"
|
|
2668
|
+
aria-selected="false"
|
|
2669
|
+
tabindex="-1"
|
|
2670
|
+
>
|
|
2240
2671
|
<div class="pf-v5-c-tree-view__content">
|
|
2241
2672
|
<button class="pf-v5-c-tree-view__node">
|
|
2242
2673
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -2248,6 +2679,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2248
2679
|
<li
|
|
2249
2680
|
class="pf-v5-c-tree-view__list-item"
|
|
2250
2681
|
role="treeitem"
|
|
2682
|
+
aria-selected="false"
|
|
2251
2683
|
aria-expanded="false"
|
|
2252
2684
|
tabindex="0"
|
|
2253
2685
|
>
|
|
@@ -2264,7 +2696,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2264
2696
|
</button>
|
|
2265
2697
|
</div>
|
|
2266
2698
|
</li>
|
|
2267
|
-
<li
|
|
2699
|
+
<li
|
|
2700
|
+
class="pf-v5-c-tree-view__list-item"
|
|
2701
|
+
role="treeitem"
|
|
2702
|
+
aria-selected="false"
|
|
2703
|
+
tabindex="-1"
|
|
2704
|
+
>
|
|
2268
2705
|
<div class="pf-v5-c-tree-view__content">
|
|
2269
2706
|
<button class="pf-v5-c-tree-view__node">
|
|
2270
2707
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -2284,10 +2721,15 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2284
2721
|
|
|
2285
2722
|
```html
|
|
2286
2723
|
<div class="pf-v5-c-tree-view">
|
|
2287
|
-
<ul
|
|
2724
|
+
<ul
|
|
2725
|
+
class="pf-v5-c-tree-view__list"
|
|
2726
|
+
role="tree"
|
|
2727
|
+
aria-label="Tree View with selectable, expandable nodes example"
|
|
2728
|
+
>
|
|
2288
2729
|
<li
|
|
2289
2730
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2290
2731
|
role="treeitem"
|
|
2732
|
+
aria-selected="false"
|
|
2291
2733
|
aria-expanded="true"
|
|
2292
2734
|
tabindex="0"
|
|
2293
2735
|
>
|
|
@@ -2321,6 +2763,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2321
2763
|
<li
|
|
2322
2764
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2323
2765
|
role="treeitem"
|
|
2766
|
+
aria-selected="false"
|
|
2324
2767
|
aria-expanded="true"
|
|
2325
2768
|
tabindex="0"
|
|
2326
2769
|
>
|
|
@@ -2354,6 +2797,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2354
2797
|
<li
|
|
2355
2798
|
class="pf-v5-c-tree-view__list-item"
|
|
2356
2799
|
role="treeitem"
|
|
2800
|
+
aria-selected="false"
|
|
2357
2801
|
tabindex="-1"
|
|
2358
2802
|
>
|
|
2359
2803
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2367,6 +2811,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2367
2811
|
<li
|
|
2368
2812
|
class="pf-v5-c-tree-view__list-item"
|
|
2369
2813
|
role="treeitem"
|
|
2814
|
+
aria-selected="false"
|
|
2370
2815
|
tabindex="-1"
|
|
2371
2816
|
>
|
|
2372
2817
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2380,6 +2825,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2380
2825
|
<li
|
|
2381
2826
|
class="pf-v5-c-tree-view__list-item"
|
|
2382
2827
|
role="treeitem"
|
|
2828
|
+
aria-selected="false"
|
|
2383
2829
|
aria-expanded="false"
|
|
2384
2830
|
tabindex="0"
|
|
2385
2831
|
>
|
|
@@ -2415,6 +2861,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2415
2861
|
<li
|
|
2416
2862
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2417
2863
|
role="treeitem"
|
|
2864
|
+
aria-selected="false"
|
|
2418
2865
|
aria-expanded="true"
|
|
2419
2866
|
tabindex="0"
|
|
2420
2867
|
>
|
|
@@ -2448,6 +2895,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2448
2895
|
<li
|
|
2449
2896
|
class="pf-v5-c-tree-view__list-item"
|
|
2450
2897
|
role="treeitem"
|
|
2898
|
+
aria-selected="false"
|
|
2451
2899
|
tabindex="-1"
|
|
2452
2900
|
>
|
|
2453
2901
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2461,6 +2909,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2461
2909
|
<li
|
|
2462
2910
|
class="pf-v5-c-tree-view__list-item"
|
|
2463
2911
|
role="treeitem"
|
|
2912
|
+
aria-selected="false"
|
|
2464
2913
|
aria-expanded="false"
|
|
2465
2914
|
tabindex="0"
|
|
2466
2915
|
>
|
|
@@ -2494,6 +2943,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2494
2943
|
<li
|
|
2495
2944
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2496
2945
|
role="treeitem"
|
|
2946
|
+
aria-selected="false"
|
|
2497
2947
|
aria-expanded="true"
|
|
2498
2948
|
tabindex="0"
|
|
2499
2949
|
>
|
|
@@ -2527,6 +2977,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2527
2977
|
<li
|
|
2528
2978
|
class="pf-v5-c-tree-view__list-item"
|
|
2529
2979
|
role="treeitem"
|
|
2980
|
+
aria-selected="true"
|
|
2530
2981
|
aria-expanded="false"
|
|
2531
2982
|
tabindex="0"
|
|
2532
2983
|
>
|
|
@@ -2560,6 +3011,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2560
3011
|
<li
|
|
2561
3012
|
class="pf-v5-c-tree-view__list-item"
|
|
2562
3013
|
role="treeitem"
|
|
3014
|
+
aria-selected="false"
|
|
2563
3015
|
tabindex="-1"
|
|
2564
3016
|
>
|
|
2565
3017
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2573,6 +3025,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2573
3025
|
<li
|
|
2574
3026
|
class="pf-v5-c-tree-view__list-item"
|
|
2575
3027
|
role="treeitem"
|
|
3028
|
+
aria-selected="false"
|
|
2576
3029
|
tabindex="-1"
|
|
2577
3030
|
>
|
|
2578
3031
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2592,6 +3045,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2592
3045
|
<li
|
|
2593
3046
|
class="pf-v5-c-tree-view__list-item"
|
|
2594
3047
|
role="treeitem"
|
|
3048
|
+
aria-selected="false"
|
|
2595
3049
|
aria-expanded="false"
|
|
2596
3050
|
tabindex="0"
|
|
2597
3051
|
>
|
|
@@ -2625,6 +3079,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2625
3079
|
<li
|
|
2626
3080
|
class="pf-v5-c-tree-view__list-item"
|
|
2627
3081
|
role="treeitem"
|
|
3082
|
+
aria-selected="false"
|
|
2628
3083
|
aria-expanded="false"
|
|
2629
3084
|
tabindex="0"
|
|
2630
3085
|
>
|
|
@@ -2658,6 +3113,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2658
3113
|
<li
|
|
2659
3114
|
class="pf-v5-c-tree-view__list-item"
|
|
2660
3115
|
role="treeitem"
|
|
3116
|
+
aria-selected="false"
|
|
2661
3117
|
aria-expanded="false"
|
|
2662
3118
|
tabindex="0"
|
|
2663
3119
|
>
|
|
@@ -2697,10 +3153,15 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2697
3153
|
|
|
2698
3154
|
```html
|
|
2699
3155
|
<div class="pf-v5-c-tree-view pf-m-guides">
|
|
2700
|
-
<ul
|
|
3156
|
+
<ul
|
|
3157
|
+
class="pf-v5-c-tree-view__list"
|
|
3158
|
+
role="tree"
|
|
3159
|
+
aria-label="Tree View guides example"
|
|
3160
|
+
>
|
|
2701
3161
|
<li
|
|
2702
3162
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2703
3163
|
role="treeitem"
|
|
3164
|
+
aria-selected="false"
|
|
2704
3165
|
aria-expanded="true"
|
|
2705
3166
|
tabindex="0"
|
|
2706
3167
|
>
|
|
@@ -2720,6 +3181,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2720
3181
|
<li
|
|
2721
3182
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2722
3183
|
role="treeitem"
|
|
3184
|
+
aria-selected="false"
|
|
2723
3185
|
aria-expanded="true"
|
|
2724
3186
|
tabindex="0"
|
|
2725
3187
|
>
|
|
@@ -2739,6 +3201,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2739
3201
|
<li
|
|
2740
3202
|
class="pf-v5-c-tree-view__list-item"
|
|
2741
3203
|
role="treeitem"
|
|
3204
|
+
aria-selected="false"
|
|
2742
3205
|
tabindex="-1"
|
|
2743
3206
|
>
|
|
2744
3207
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2752,6 +3215,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2752
3215
|
<li
|
|
2753
3216
|
class="pf-v5-c-tree-view__list-item"
|
|
2754
3217
|
role="treeitem"
|
|
3218
|
+
aria-selected="true"
|
|
2755
3219
|
tabindex="-1"
|
|
2756
3220
|
>
|
|
2757
3221
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2765,6 +3229,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2765
3229
|
<li
|
|
2766
3230
|
class="pf-v5-c-tree-view__list-item"
|
|
2767
3231
|
role="treeitem"
|
|
3232
|
+
aria-selected="false"
|
|
2768
3233
|
aria-expanded="false"
|
|
2769
3234
|
tabindex="0"
|
|
2770
3235
|
>
|
|
@@ -2786,6 +3251,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2786
3251
|
<li
|
|
2787
3252
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2788
3253
|
role="treeitem"
|
|
3254
|
+
aria-selected="false"
|
|
2789
3255
|
aria-expanded="true"
|
|
2790
3256
|
tabindex="0"
|
|
2791
3257
|
>
|
|
@@ -2805,6 +3271,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2805
3271
|
<li
|
|
2806
3272
|
class="pf-v5-c-tree-view__list-item"
|
|
2807
3273
|
role="treeitem"
|
|
3274
|
+
aria-selected="false"
|
|
2808
3275
|
tabindex="-1"
|
|
2809
3276
|
>
|
|
2810
3277
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2818,6 +3285,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2818
3285
|
<li
|
|
2819
3286
|
class="pf-v5-c-tree-view__list-item"
|
|
2820
3287
|
role="treeitem"
|
|
3288
|
+
aria-selected="false"
|
|
2821
3289
|
aria-expanded="false"
|
|
2822
3290
|
tabindex="0"
|
|
2823
3291
|
>
|
|
@@ -2837,6 +3305,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2837
3305
|
<li
|
|
2838
3306
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
2839
3307
|
role="treeitem"
|
|
3308
|
+
aria-selected="false"
|
|
2840
3309
|
aria-expanded="true"
|
|
2841
3310
|
tabindex="0"
|
|
2842
3311
|
>
|
|
@@ -2856,6 +3325,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2856
3325
|
<li
|
|
2857
3326
|
class="pf-v5-c-tree-view__list-item"
|
|
2858
3327
|
role="treeitem"
|
|
3328
|
+
aria-selected="false"
|
|
2859
3329
|
aria-expanded="false"
|
|
2860
3330
|
tabindex="0"
|
|
2861
3331
|
>
|
|
@@ -2875,6 +3345,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2875
3345
|
<li
|
|
2876
3346
|
class="pf-v5-c-tree-view__list-item"
|
|
2877
3347
|
role="treeitem"
|
|
3348
|
+
aria-selected="false"
|
|
2878
3349
|
tabindex="-1"
|
|
2879
3350
|
>
|
|
2880
3351
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2888,6 +3359,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2888
3359
|
<li
|
|
2889
3360
|
class="pf-v5-c-tree-view__list-item"
|
|
2890
3361
|
role="treeitem"
|
|
3362
|
+
aria-selected="false"
|
|
2891
3363
|
tabindex="-1"
|
|
2892
3364
|
>
|
|
2893
3365
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -2907,6 +3379,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2907
3379
|
<li
|
|
2908
3380
|
class="pf-v5-c-tree-view__list-item"
|
|
2909
3381
|
role="treeitem"
|
|
3382
|
+
aria-selected="false"
|
|
2910
3383
|
aria-expanded="false"
|
|
2911
3384
|
tabindex="0"
|
|
2912
3385
|
>
|
|
@@ -2926,6 +3399,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2926
3399
|
<li
|
|
2927
3400
|
class="pf-v5-c-tree-view__list-item"
|
|
2928
3401
|
role="treeitem"
|
|
3402
|
+
aria-selected="false"
|
|
2929
3403
|
aria-expanded="false"
|
|
2930
3404
|
tabindex="0"
|
|
2931
3405
|
>
|
|
@@ -2945,6 +3419,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2945
3419
|
<li
|
|
2946
3420
|
class="pf-v5-c-tree-view__list-item"
|
|
2947
3421
|
role="treeitem"
|
|
3422
|
+
aria-selected="false"
|
|
2948
3423
|
aria-expanded="false"
|
|
2949
3424
|
tabindex="0"
|
|
2950
3425
|
>
|
|
@@ -2972,8 +3447,17 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2972
3447
|
|
|
2973
3448
|
```html
|
|
2974
3449
|
<div class="pf-v5-c-tree-view pf-m-compact">
|
|
2975
|
-
<ul
|
|
2976
|
-
|
|
3450
|
+
<ul
|
|
3451
|
+
class="pf-v5-c-tree-view__list"
|
|
3452
|
+
role="tree"
|
|
3453
|
+
aria-label="Tree View compact example"
|
|
3454
|
+
>
|
|
3455
|
+
<li
|
|
3456
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3457
|
+
role="treeitem"
|
|
3458
|
+
aria-selected="false"
|
|
3459
|
+
tabindex="-1"
|
|
3460
|
+
>
|
|
2977
3461
|
<div class="pf-v5-c-tree-view__content">
|
|
2978
3462
|
<button class="pf-v5-c-tree-view__node">
|
|
2979
3463
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -2987,7 +3471,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2987
3471
|
</button>
|
|
2988
3472
|
</div>
|
|
2989
3473
|
</li>
|
|
2990
|
-
<li
|
|
3474
|
+
<li
|
|
3475
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3476
|
+
role="treeitem"
|
|
3477
|
+
aria-selected="false"
|
|
3478
|
+
tabindex="-1"
|
|
3479
|
+
>
|
|
2991
3480
|
<div class="pf-v5-c-tree-view__content">
|
|
2992
3481
|
<button class="pf-v5-c-tree-view__node">
|
|
2993
3482
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3001,7 +3490,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3001
3490
|
</button>
|
|
3002
3491
|
</div>
|
|
3003
3492
|
</li>
|
|
3004
|
-
<li
|
|
3493
|
+
<li
|
|
3494
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3495
|
+
role="treeitem"
|
|
3496
|
+
aria-selected="false"
|
|
3497
|
+
tabindex="-1"
|
|
3498
|
+
>
|
|
3005
3499
|
<div class="pf-v5-c-tree-view__content">
|
|
3006
3500
|
<button class="pf-v5-c-tree-view__node">
|
|
3007
3501
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3018,6 +3512,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3018
3512
|
<li
|
|
3019
3513
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
3020
3514
|
role="treeitem"
|
|
3515
|
+
aria-selected="false"
|
|
3021
3516
|
aria-expanded="true"
|
|
3022
3517
|
tabindex="0"
|
|
3023
3518
|
>
|
|
@@ -3039,7 +3534,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3039
3534
|
</button>
|
|
3040
3535
|
</div>
|
|
3041
3536
|
<ul class="pf-v5-c-tree-view__list" role="group">
|
|
3042
|
-
<li
|
|
3537
|
+
<li
|
|
3538
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3539
|
+
role="treeitem"
|
|
3540
|
+
aria-selected="false"
|
|
3541
|
+
tabindex="-1"
|
|
3542
|
+
>
|
|
3043
3543
|
<div class="pf-v5-c-tree-view__content">
|
|
3044
3544
|
<button class="pf-v5-c-tree-view__node">
|
|
3045
3545
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3053,7 +3553,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3053
3553
|
</button>
|
|
3054
3554
|
</div>
|
|
3055
3555
|
</li>
|
|
3056
|
-
<li
|
|
3556
|
+
<li
|
|
3557
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3558
|
+
role="treeitem"
|
|
3559
|
+
aria-selected="false"
|
|
3560
|
+
tabindex="-1"
|
|
3561
|
+
>
|
|
3057
3562
|
<div class="pf-v5-c-tree-view__content">
|
|
3058
3563
|
<button class="pf-v5-c-tree-view__node">
|
|
3059
3564
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3067,7 +3572,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3067
3572
|
</button>
|
|
3068
3573
|
</div>
|
|
3069
3574
|
</li>
|
|
3070
|
-
<li
|
|
3575
|
+
<li
|
|
3576
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3577
|
+
role="treeitem"
|
|
3578
|
+
aria-selected="false"
|
|
3579
|
+
tabindex="-1"
|
|
3580
|
+
>
|
|
3071
3581
|
<div class="pf-v5-c-tree-view__content">
|
|
3072
3582
|
<button class="pf-v5-c-tree-view__node">
|
|
3073
3583
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3083,7 +3593,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3083
3593
|
</button>
|
|
3084
3594
|
</div>
|
|
3085
3595
|
</li>
|
|
3086
|
-
<li
|
|
3596
|
+
<li
|
|
3597
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3598
|
+
role="treeitem"
|
|
3599
|
+
aria-selected="false"
|
|
3600
|
+
tabindex="-1"
|
|
3601
|
+
>
|
|
3087
3602
|
<div class="pf-v5-c-tree-view__content">
|
|
3088
3603
|
<button class="pf-v5-c-tree-view__node">
|
|
3089
3604
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3097,7 +3612,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3097
3612
|
</button>
|
|
3098
3613
|
</div>
|
|
3099
3614
|
</li>
|
|
3100
|
-
<li
|
|
3615
|
+
<li
|
|
3616
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3617
|
+
role="treeitem"
|
|
3618
|
+
aria-selected="false"
|
|
3619
|
+
tabindex="-1"
|
|
3620
|
+
>
|
|
3101
3621
|
<div class="pf-v5-c-tree-view__content">
|
|
3102
3622
|
<button class="pf-v5-c-tree-view__node">
|
|
3103
3623
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3116,6 +3636,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3116
3636
|
<li
|
|
3117
3637
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
3118
3638
|
role="treeitem"
|
|
3639
|
+
aria-selected="false"
|
|
3119
3640
|
aria-expanded="true"
|
|
3120
3641
|
tabindex="0"
|
|
3121
3642
|
>
|
|
@@ -3140,6 +3661,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3140
3661
|
<li
|
|
3141
3662
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
3142
3663
|
role="treeitem"
|
|
3664
|
+
aria-selected="false"
|
|
3143
3665
|
aria-expanded="true"
|
|
3144
3666
|
tabindex="0"
|
|
3145
3667
|
>
|
|
@@ -3166,6 +3688,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3166
3688
|
<li
|
|
3167
3689
|
class="pf-v5-c-tree-view__list-item"
|
|
3168
3690
|
role="treeitem"
|
|
3691
|
+
aria-selected="false"
|
|
3169
3692
|
tabindex="-1"
|
|
3170
3693
|
>
|
|
3171
3694
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -3188,6 +3711,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3188
3711
|
<li
|
|
3189
3712
|
class="pf-v5-c-tree-view__list-item"
|
|
3190
3713
|
role="treeitem"
|
|
3714
|
+
aria-selected="false"
|
|
3191
3715
|
tabindex="-1"
|
|
3192
3716
|
>
|
|
3193
3717
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -3205,7 +3729,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3205
3729
|
</li>
|
|
3206
3730
|
</ul>
|
|
3207
3731
|
</li>
|
|
3208
|
-
<li
|
|
3732
|
+
<li
|
|
3733
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3734
|
+
role="treeitem"
|
|
3735
|
+
aria-selected="false"
|
|
3736
|
+
tabindex="-1"
|
|
3737
|
+
>
|
|
3209
3738
|
<div class="pf-v5-c-tree-view__content">
|
|
3210
3739
|
<button class="pf-v5-c-tree-view__node">
|
|
3211
3740
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3230,8 +3759,17 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3230
3759
|
|
|
3231
3760
|
```html
|
|
3232
3761
|
<div class="pf-v5-c-tree-view pf-m-compact pf-m-no-background">
|
|
3233
|
-
<ul
|
|
3234
|
-
|
|
3762
|
+
<ul
|
|
3763
|
+
class="pf-v5-c-tree-view__list"
|
|
3764
|
+
role="tree"
|
|
3765
|
+
aria-label="Tree View compact no background example"
|
|
3766
|
+
>
|
|
3767
|
+
<li
|
|
3768
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3769
|
+
role="treeitem"
|
|
3770
|
+
aria-selected="false"
|
|
3771
|
+
tabindex="-1"
|
|
3772
|
+
>
|
|
3235
3773
|
<div class="pf-v5-c-tree-view__content">
|
|
3236
3774
|
<button class="pf-v5-c-tree-view__node">
|
|
3237
3775
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3245,7 +3783,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3245
3783
|
</button>
|
|
3246
3784
|
</div>
|
|
3247
3785
|
</li>
|
|
3248
|
-
<li
|
|
3786
|
+
<li
|
|
3787
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3788
|
+
role="treeitem"
|
|
3789
|
+
aria-selected="false"
|
|
3790
|
+
tabindex="-1"
|
|
3791
|
+
>
|
|
3249
3792
|
<div class="pf-v5-c-tree-view__content">
|
|
3250
3793
|
<button class="pf-v5-c-tree-view__node">
|
|
3251
3794
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3259,7 +3802,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3259
3802
|
</button>
|
|
3260
3803
|
</div>
|
|
3261
3804
|
</li>
|
|
3262
|
-
<li
|
|
3805
|
+
<li
|
|
3806
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3807
|
+
role="treeitem"
|
|
3808
|
+
aria-selected="false"
|
|
3809
|
+
tabindex="-1"
|
|
3810
|
+
>
|
|
3263
3811
|
<div class="pf-v5-c-tree-view__content">
|
|
3264
3812
|
<button class="pf-v5-c-tree-view__node">
|
|
3265
3813
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3276,6 +3824,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3276
3824
|
<li
|
|
3277
3825
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
3278
3826
|
role="treeitem"
|
|
3827
|
+
aria-selected="false"
|
|
3279
3828
|
aria-expanded="true"
|
|
3280
3829
|
tabindex="0"
|
|
3281
3830
|
>
|
|
@@ -3297,7 +3846,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3297
3846
|
</button>
|
|
3298
3847
|
</div>
|
|
3299
3848
|
<ul class="pf-v5-c-tree-view__list" role="group">
|
|
3300
|
-
<li
|
|
3849
|
+
<li
|
|
3850
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3851
|
+
role="treeitem"
|
|
3852
|
+
aria-selected="false"
|
|
3853
|
+
tabindex="-1"
|
|
3854
|
+
>
|
|
3301
3855
|
<div class="pf-v5-c-tree-view__content">
|
|
3302
3856
|
<button class="pf-v5-c-tree-view__node">
|
|
3303
3857
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3311,7 +3865,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3311
3865
|
</button>
|
|
3312
3866
|
</div>
|
|
3313
3867
|
</li>
|
|
3314
|
-
<li
|
|
3868
|
+
<li
|
|
3869
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3870
|
+
role="treeitem"
|
|
3871
|
+
aria-selected="false"
|
|
3872
|
+
tabindex="-1"
|
|
3873
|
+
>
|
|
3315
3874
|
<div class="pf-v5-c-tree-view__content">
|
|
3316
3875
|
<button class="pf-v5-c-tree-view__node">
|
|
3317
3876
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3325,7 +3884,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3325
3884
|
</button>
|
|
3326
3885
|
</div>
|
|
3327
3886
|
</li>
|
|
3328
|
-
<li
|
|
3887
|
+
<li
|
|
3888
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3889
|
+
role="treeitem"
|
|
3890
|
+
aria-selected="false"
|
|
3891
|
+
tabindex="-1"
|
|
3892
|
+
>
|
|
3329
3893
|
<div class="pf-v5-c-tree-view__content">
|
|
3330
3894
|
<button class="pf-v5-c-tree-view__node">
|
|
3331
3895
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3341,7 +3905,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3341
3905
|
</button>
|
|
3342
3906
|
</div>
|
|
3343
3907
|
</li>
|
|
3344
|
-
<li
|
|
3908
|
+
<li
|
|
3909
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3910
|
+
role="treeitem"
|
|
3911
|
+
aria-selected="false"
|
|
3912
|
+
tabindex="-1"
|
|
3913
|
+
>
|
|
3345
3914
|
<div class="pf-v5-c-tree-view__content">
|
|
3346
3915
|
<button class="pf-v5-c-tree-view__node">
|
|
3347
3916
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3355,7 +3924,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3355
3924
|
</button>
|
|
3356
3925
|
</div>
|
|
3357
3926
|
</li>
|
|
3358
|
-
<li
|
|
3927
|
+
<li
|
|
3928
|
+
class="pf-v5-c-tree-view__list-item"
|
|
3929
|
+
role="treeitem"
|
|
3930
|
+
aria-selected="false"
|
|
3931
|
+
tabindex="-1"
|
|
3932
|
+
>
|
|
3359
3933
|
<div class="pf-v5-c-tree-view__content">
|
|
3360
3934
|
<button class="pf-v5-c-tree-view__node">
|
|
3361
3935
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3374,6 +3948,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3374
3948
|
<li
|
|
3375
3949
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
3376
3950
|
role="treeitem"
|
|
3951
|
+
aria-selected="false"
|
|
3377
3952
|
aria-expanded="true"
|
|
3378
3953
|
tabindex="0"
|
|
3379
3954
|
>
|
|
@@ -3398,6 +3973,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3398
3973
|
<li
|
|
3399
3974
|
class="pf-v5-c-tree-view__list-item pf-m-expanded"
|
|
3400
3975
|
role="treeitem"
|
|
3976
|
+
aria-selected="false"
|
|
3401
3977
|
aria-expanded="true"
|
|
3402
3978
|
tabindex="0"
|
|
3403
3979
|
>
|
|
@@ -3424,6 +4000,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3424
4000
|
<li
|
|
3425
4001
|
class="pf-v5-c-tree-view__list-item"
|
|
3426
4002
|
role="treeitem"
|
|
4003
|
+
aria-selected="false"
|
|
3427
4004
|
tabindex="-1"
|
|
3428
4005
|
>
|
|
3429
4006
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -3446,6 +4023,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3446
4023
|
<li
|
|
3447
4024
|
class="pf-v5-c-tree-view__list-item"
|
|
3448
4025
|
role="treeitem"
|
|
4026
|
+
aria-selected="false"
|
|
3449
4027
|
tabindex="-1"
|
|
3450
4028
|
>
|
|
3451
4029
|
<div class="pf-v5-c-tree-view__content">
|
|
@@ -3463,7 +4041,12 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3463
4041
|
</li>
|
|
3464
4042
|
</ul>
|
|
3465
4043
|
</li>
|
|
3466
|
-
<li
|
|
4044
|
+
<li
|
|
4045
|
+
class="pf-v5-c-tree-view__list-item"
|
|
4046
|
+
role="treeitem"
|
|
4047
|
+
aria-selected="false"
|
|
4048
|
+
tabindex="-1"
|
|
4049
|
+
>
|
|
3467
4050
|
<div class="pf-v5-c-tree-view__content">
|
|
3468
4051
|
<button class="pf-v5-c-tree-view__node">
|
|
3469
4052
|
<span class="pf-v5-c-tree-view__node-container">
|
|
@@ -3486,19 +4069,6 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3486
4069
|
|
|
3487
4070
|
## Documentation
|
|
3488
4071
|
|
|
3489
|
-
### Accessibility
|
|
3490
|
-
|
|
3491
|
-
| Attribute | Applied to | Outcome |
|
|
3492
|
-
| -- | -- | -- |
|
|
3493
|
-
| `role="tree"` | `.pf-v5-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
|
|
3494
|
-
| `role="group"` | `.pf-v5-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`** |
|
|
3495
|
-
| `role="treeitem"` | `.pf-v5-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
|
|
3496
|
-
| `aria-expanded="false"` | `.pf-v5-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
|
|
3497
|
-
| `aria-expanded="true"` | `.pf-v5-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
|
|
3498
|
-
| `tabindex="-1"` | `.pf-v5-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
|
|
3499
|
-
| `tabindex="0"` | `.pf-v5-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. |
|
|
3500
|
-
| `aria-label="[button label text]"` | `.pf-v5-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** |
|
|
3501
|
-
|
|
3502
4072
|
### Usage
|
|
3503
4073
|
|
|
3504
4074
|
| Class | Applied | Outcome |
|