@patternfly/patternfly 5.0.0-alpha.12 → 5.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/components/DataList/data-list.css +0 -1
  2. package/components/DataList/data-list.scss +0 -1
  3. package/components/Menu/menu.css +1 -0
  4. package/components/Menu/menu.scss +1 -0
  5. package/docs/components/AlertGroup/examples/AlertGroup.md +2 -2
  6. package/docs/components/AppLauncher/examples/application-launcher.md +17 -12
  7. package/docs/components/Breadcrumb/examples/Breadcrumb.md +5 -5
  8. package/docs/components/ContextSelector/examples/context-selector.md +6 -6
  9. package/docs/components/Divider/examples/Divider.md +1 -1
  10. package/docs/components/HelperText/examples/HelperText.md +1 -1
  11. package/docs/components/JumpLinks/examples/JumpLinks.md +14 -14
  12. package/docs/components/List/examples/List.md +12 -12
  13. package/docs/components/Login/examples/Login.md +10 -10
  14. package/docs/components/Menu/examples/Menu.md +3 -3
  15. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +3 -3
  16. package/docs/components/Nav/examples/Navigation.md +33 -33
  17. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  18. package/docs/components/ProgressStepper/examples/ProgressStepper.md +21 -14
  19. package/docs/components/SimpleList/examples/SimpleList.md +4 -4
  20. package/docs/components/Wizard/examples/Wizard.md +12 -12
  21. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  22. package/docs/demos/Alert/examples/Alert.md +13 -13
  23. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  24. package/docs/demos/Banner/examples/Banner.md +8 -8
  25. package/docs/demos/Card/examples/Card.md +7 -7
  26. package/docs/demos/CardView/examples/CardView.md +7 -7
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  28. package/docs/demos/Dashboard/examples/Dashboard.md +9 -5
  29. package/docs/demos/DataList/examples/DataList.md +18 -18
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -12
  31. package/docs/demos/Drawer/examples/Drawer.md +20 -20
  32. package/docs/demos/HelperText/examples/HelperText.md +8 -8
  33. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  34. package/docs/demos/Masthead/examples/Masthead.md +23 -23
  35. package/docs/demos/Modal/examples/Modal.md +24 -24
  36. package/docs/demos/Nav/examples/Nav.md +47 -47
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  38. package/docs/demos/Page/examples/Page.md +36 -36
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -32
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -30
  41. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  42. package/docs/demos/Table/examples/Table.md +56 -56
  43. package/docs/demos/Tabs/examples/Tabs.md +25 -25
  44. package/docs/demos/Toolbar/examples/Toolbar.md +8 -8
  45. package/docs/demos/Wizard/examples/Wizard.md +54 -54
  46. package/package.json +1 -1
  47. package/patternfly-no-reset.css +1 -1
  48. package/patternfly.css +1 -1
  49. package/patternfly.min.css +1 -1
  50. package/patternfly.min.css.map +1 -1
@@ -617,7 +617,6 @@
617
617
  font-size: var(--pf-c-data-list--FontSize);
618
618
  line-height: var(--pf-c-data-list--LineHeight);
619
619
  overflow-wrap: break-word;
620
- list-style-type: disc;
621
620
  border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
622
621
  }
623
622
  @media screen and (min-width: 576px) {
@@ -167,7 +167,6 @@
167
167
  font-size: var(--pf-c-data-list--FontSize);
168
168
  line-height: var(--pf-c-data-list--LineHeight);
169
169
  overflow-wrap: break-word;
170
- list-style-type: disc;
171
170
  border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
172
171
 
173
172
  &.pf-m-compact {
@@ -270,6 +270,7 @@
270
270
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
271
271
  position: relative;
272
272
  overflow: hidden;
273
+ visibility: visible;
273
274
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
274
275
  }
275
276
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
@@ -274,6 +274,7 @@
274
274
  .pf-c-menu__list {
275
275
  position: relative;
276
276
  overflow: hidden;
277
+ visibility: visible;
277
278
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
278
279
 
279
280
  & .pf-c-menu__list {
@@ -7,7 +7,7 @@ cssPrefix: pf-c-alert-group
7
7
  ### Static alert group
8
8
 
9
9
  ```html
10
- <ul class="pf-c-alert-group">
10
+ <ul class="pf-c-alert-group" role="list">
11
11
  <li class="pf-c-alert-group__item">
12
12
  <div class="pf-c-alert pf-m-inline pf-m-success" aria-label="Success alert">
13
13
  <div class="pf-c-alert__icon">
@@ -70,7 +70,7 @@ cssPrefix: pf-c-alert-group
70
70
  ### Toast alert group
71
71
 
72
72
  ```html isFullscreen
73
- <ul class="pf-c-alert-group pf-m-toast">
73
+ <ul class="pf-c-alert-group pf-m-toast" role="list">
74
74
  <li class="pf-c-alert-group__item">
75
75
  <div class="pf-c-alert pf-m-success" aria-label="Success toast alert">
76
76
  <div class="pf-c-alert__icon">
@@ -26,6 +26,7 @@ cssPrefix: pf-c-app-launcher
26
26
  <ul
27
27
  class="pf-c-app-launcher__menu"
28
28
  aria-labelledby="application-launcher-collapsed-button"
29
+ role="list"
29
30
  hidden
30
31
  >
31
32
  <li>
@@ -69,6 +70,7 @@ cssPrefix: pf-c-app-launcher
69
70
  <ul
70
71
  class="pf-c-app-launcher__menu"
71
72
  aria-labelledby="application-launcher-disabled-button"
73
+ role="list"
72
74
  hidden
73
75
  >
74
76
  <li>
@@ -111,6 +113,7 @@ cssPrefix: pf-c-app-launcher
111
113
  <ul
112
114
  class="pf-c-app-launcher__menu"
113
115
  aria-labelledby="application-launcher-expanded-button"
116
+ role="list"
114
117
  >
115
118
  <li>
116
119
  <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -152,6 +155,7 @@ cssPrefix: pf-c-app-launcher
152
155
  <ul
153
156
  class="pf-c-app-launcher__menu pf-m-align-right"
154
157
  aria-labelledby="application-launcher-aligned-right-button"
158
+ role="list"
155
159
  >
156
160
  <li>
157
161
  <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -193,6 +197,7 @@ cssPrefix: pf-c-app-launcher
193
197
  <ul
194
198
  class="pf-c-app-launcher__menu"
195
199
  aria-labelledby="application-launcher-aligned-top-button"
200
+ role="list"
196
201
  >
197
202
  <li>
198
203
  <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -233,7 +238,7 @@ cssPrefix: pf-c-app-launcher
233
238
  </button>
234
239
  <div class="pf-c-app-launcher__menu">
235
240
  <section class="pf-c-app-launcher__group">
236
- <ul>
241
+ <ul role="list">
237
242
  <li>
238
243
  <a class="pf-c-app-launcher__menu-item" href="#">Link not in group</a>
239
244
  </li>
@@ -242,7 +247,7 @@ cssPrefix: pf-c-app-launcher
242
247
  <hr class="pf-c-divider" />
243
248
  <section class="pf-c-app-launcher__group">
244
249
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
245
- <ul>
250
+ <ul role="list">
246
251
  <li>
247
252
  <a class="pf-c-app-launcher__menu-item" href="#">Group 1 link</a>
248
253
  </li>
@@ -254,7 +259,7 @@ cssPrefix: pf-c-app-launcher
254
259
  <hr class="pf-c-divider" />
255
260
  <section class="pf-c-app-launcher__group">
256
261
  <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
257
- <ul>
262
+ <ul role="list">
258
263
  <li>
259
264
  <a class="pf-c-app-launcher__menu-item" href="#">Group 2 link</a>
260
265
  </li>
@@ -287,7 +292,7 @@ cssPrefix: pf-c-app-launcher
287
292
  </button>
288
293
  <div class="pf-c-app-launcher__menu">
289
294
  <section class="pf-c-app-launcher__group">
290
- <ul>
295
+ <ul role="list">
291
296
  <li>
292
297
  <a class="pf-c-app-launcher__menu-item" href="#">Link not in group</a>
293
298
  </li>
@@ -296,7 +301,7 @@ cssPrefix: pf-c-app-launcher
296
301
  </section>
297
302
  <section class="pf-c-app-launcher__group">
298
303
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
299
- <ul>
304
+ <ul role="list">
300
305
  <li>
301
306
  <a class="pf-c-app-launcher__menu-item" href="#">Group 1 link</a>
302
307
  </li>
@@ -308,7 +313,7 @@ cssPrefix: pf-c-app-launcher
308
313
  </section>
309
314
  <section class="pf-c-app-launcher__group">
310
315
  <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
311
- <ul>
316
+ <ul role="list">
312
317
  <li>
313
318
  <a class="pf-c-app-launcher__menu-item" href="#">Group 2 link</a>
314
319
  </li>
@@ -341,7 +346,7 @@ cssPrefix: pf-c-app-launcher
341
346
  </button>
342
347
  <div class="pf-c-app-launcher__menu">
343
348
  <section class="pf-c-app-launcher__group">
344
- <ul>
349
+ <ul role="list">
345
350
  <li>
346
351
  <a class="pf-c-app-launcher__menu-item" href="#">
347
352
  <span class="pf-c-app-launcher__menu-item-icon">
@@ -355,7 +360,7 @@ cssPrefix: pf-c-app-launcher
355
360
  <li class="pf-c-divider" role="separator"></li>
356
361
  <section class="pf-c-app-launcher__group">
357
362
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
358
- <ul>
363
+ <ul role="list">
359
364
  <li>
360
365
  <a
361
366
  class="pf-c-app-launcher__menu-item pf-m-external"
@@ -397,7 +402,7 @@ cssPrefix: pf-c-app-launcher
397
402
  </section>
398
403
  <section class="pf-c-app-launcher__group">
399
404
  <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
400
- <ul>
405
+ <ul role="list">
401
406
  <li>
402
407
  <a
403
408
  class="pf-c-app-launcher__menu-item pf-m-external"
@@ -478,7 +483,7 @@ cssPrefix: pf-c-app-launcher
478
483
  </div>
479
484
  <section class="pf-c-app-launcher__group">
480
485
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
481
- <ul>
486
+ <ul role="list">
482
487
  <li class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite">
483
488
  <a
484
489
  class="pf-c-app-launcher__menu-item pf-m-link"
@@ -534,7 +539,7 @@ cssPrefix: pf-c-app-launcher
534
539
  <hr class="pf-c-divider" />
535
540
  <section class="pf-c-app-launcher__group">
536
541
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
537
- <ul>
542
+ <ul role="list">
538
543
  <li class="pf-c-app-launcher__menu-wrapper pf-m-external">
539
544
  <a
540
545
  class="pf-c-app-launcher__menu-item pf-m-link"
@@ -590,7 +595,7 @@ cssPrefix: pf-c-app-launcher
590
595
  <hr class="pf-c-divider" />
591
596
  <section class="pf-c-app-launcher__group">
592
597
  <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
593
- <ul>
598
+ <ul role="list">
594
599
  <li class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite">
595
600
  <a
596
601
  class="pf-c-app-launcher__menu-item pf-m-link"
@@ -10,7 +10,7 @@ cssPrefix: pf-c-breadcrumb
10
10
 
11
11
  ```html
12
12
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
13
- <ol class="pf-c-breadcrumb__list">
13
+ <ol class="pf-c-breadcrumb__list" role="list">
14
14
  <li class="pf-c-breadcrumb__item">
15
15
  <span class="pf-c-breadcrumb__item-divider">
16
16
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -48,7 +48,7 @@ cssPrefix: pf-c-breadcrumb
48
48
 
49
49
  ```html
50
50
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
51
- <ol class="pf-c-breadcrumb__list">
51
+ <ol class="pf-c-breadcrumb__list" role="list">
52
52
  <li class="pf-c-breadcrumb__item">
53
53
  <span class="pf-c-breadcrumb__item-divider">
54
54
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -98,7 +98,7 @@ cssPrefix: pf-c-breadcrumb
98
98
 
99
99
  ```html
100
100
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
101
- <ol class="pf-c-breadcrumb__list">
101
+ <ol class="pf-c-breadcrumb__list" role="list">
102
102
  <li class="pf-c-breadcrumb__item">
103
103
  <span class="pf-c-breadcrumb__item-divider">
104
104
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -144,7 +144,7 @@ cssPrefix: pf-c-breadcrumb
144
144
 
145
145
  ```html
146
146
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
147
- <ol class="pf-c-breadcrumb__list">
147
+ <ol class="pf-c-breadcrumb__list" role="list">
148
148
  <li class="pf-c-breadcrumb__item">
149
149
  <span class="pf-c-breadcrumb__item-divider">
150
150
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -235,7 +235,7 @@ cssPrefix: pf-c-breadcrumb
235
235
 
236
236
  ```html
237
237
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
238
- <ol class="pf-c-breadcrumb__list">
238
+ <ol class="pf-c-breadcrumb__list" role="list">
239
239
  <li class="pf-c-breadcrumb__item">
240
240
  <span class="pf-c-breadcrumb__item-divider">
241
241
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -40,7 +40,7 @@ cssPrefix: pf-c-context-selector
40
40
  </div>
41
41
  </div>
42
42
  </div>
43
- <ul class="pf-c-context-selector__menu-list">
43
+ <ul class="pf-c-context-selector__menu-list" role="list">
44
44
  <li>
45
45
  <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
46
46
  </li>
@@ -154,7 +154,7 @@ cssPrefix: pf-c-context-selector
154
154
  </div>
155
155
  </div>
156
156
  </div>
157
- <ul class="pf-c-context-selector__menu-list">
157
+ <ul class="pf-c-context-selector__menu-list" role="list">
158
158
  <li>
159
159
  <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
160
160
  </li>
@@ -276,7 +276,7 @@ cssPrefix: pf-c-context-selector
276
276
  </div>
277
277
  </div>
278
278
  </div>
279
- <ul class="pf-c-context-selector__menu-list">
279
+ <ul class="pf-c-context-selector__menu-list" role="list">
280
280
  <li>
281
281
  <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
282
282
  </li>
@@ -393,7 +393,7 @@ cssPrefix: pf-c-context-selector
393
393
  </div>
394
394
  </div>
395
395
  </div>
396
- <ul class="pf-c-context-selector__menu-list">
396
+ <ul class="pf-c-context-selector__menu-list" role="list">
397
397
  <li>
398
398
  <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
399
399
  </li>
@@ -512,7 +512,7 @@ cssPrefix: pf-c-context-selector
512
512
  </div>
513
513
  </div>
514
514
  </div>
515
- <ul class="pf-c-context-selector__menu-list">
515
+ <ul class="pf-c-context-selector__menu-list" role="list">
516
516
  <li>
517
517
  <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
518
518
  </li>
@@ -633,7 +633,7 @@ cssPrefix: pf-c-context-selector
633
633
  </div>
634
634
  </div>
635
635
  </div>
636
- <ul class="pf-c-context-selector__menu-list">
636
+ <ul class="pf-c-context-selector__menu-list" role="list">
637
637
  <li>
638
638
  <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
639
639
  </li>
@@ -16,7 +16,7 @@ cssPrefix: pf-c-divider
16
16
  ### li
17
17
 
18
18
  ```html
19
- <ul>
19
+ <ul role="list">
20
20
  <li>List item one</li>
21
21
  <li class="pf-c-divider" role="separator"></li>
22
22
  <li>List item two</li>
@@ -163,7 +163,7 @@ cssPrefix: pf-c-helper-text
163
163
  ### Dynamic list
164
164
 
165
165
  ```html
166
- <ul class="pf-c-helper-text">
166
+ <ul class="pf-c-helper-text" role="list">
167
167
  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
168
168
  <span class="pf-c-helper-text__item-icon">
169
169
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
@@ -8,7 +8,7 @@ cssPrefix: pf-c-jump-links
8
8
 
9
9
  ```html
10
10
  <nav class="pf-c-jump-links">
11
- <ul class="pf-c-jump-links__list">
11
+ <ul class="pf-c-jump-links__list" role="list">
12
12
  <li class="pf-c-jump-links__item">
13
13
  <a class="pf-c-jump-links__link" href="#">
14
14
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -33,7 +33,7 @@ cssPrefix: pf-c-jump-links
33
33
 
34
34
  ```html
35
35
  <nav class="pf-c-jump-links pf-m-center">
36
- <ul class="pf-c-jump-links__list">
36
+ <ul class="pf-c-jump-links__list" role="list">
37
37
  <li class="pf-c-jump-links__item">
38
38
  <a class="pf-c-jump-links__link" href="#">
39
39
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -62,7 +62,7 @@ cssPrefix: pf-c-jump-links
62
62
  <div class="pf-c-jump-links__header">
63
63
  <div class="pf-c-jump-links__label">Jump to section</div>
64
64
  </div>
65
- <ul class="pf-c-jump-links__list">
65
+ <ul class="pf-c-jump-links__list" role="list">
66
66
  <li class="pf-c-jump-links__item">
67
67
  <a class="pf-c-jump-links__link" href="#">
68
68
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -87,7 +87,7 @@ cssPrefix: pf-c-jump-links
87
87
  <div class="pf-c-jump-links__header">
88
88
  <div class="pf-c-jump-links__label">Jump to section</div>
89
89
  </div>
90
- <ul class="pf-c-jump-links__list">
90
+ <ul class="pf-c-jump-links__list" role="list">
91
91
  <li class="pf-c-jump-links__item">
92
92
  <a class="pf-c-jump-links__link" href="#">
93
93
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -113,7 +113,7 @@ cssPrefix: pf-c-jump-links
113
113
 
114
114
  ```html
115
115
  <nav class="pf-c-jump-links pf-m-vertical">
116
- <ul class="pf-c-jump-links__list">
116
+ <ul class="pf-c-jump-links__list" role="list">
117
117
  <li class="pf-c-jump-links__item">
118
118
  <a class="pf-c-jump-links__link" href="#">
119
119
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -151,7 +151,7 @@ cssPrefix: pf-c-jump-links
151
151
  <div class="pf-c-jump-links__header">
152
152
  <div class="pf-c-jump-links__label">Jump to section</div>
153
153
  </div>
154
- <ul class="pf-c-jump-links__list">
154
+ <ul class="pf-c-jump-links__list" role="list">
155
155
  <li class="pf-c-jump-links__item">
156
156
  <a class="pf-c-jump-links__link" href="#">
157
157
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -189,7 +189,7 @@ cssPrefix: pf-c-jump-links
189
189
  <div class="pf-c-jump-links__header">
190
190
  <div class="pf-c-jump-links__label">Jump to section</div>
191
191
  </div>
192
- <ul class="pf-c-jump-links__list">
192
+ <ul class="pf-c-jump-links__list" role="list">
193
193
  <li class="pf-c-jump-links__item pf-m-current">
194
194
  <a class="pf-c-jump-links__link" href="#">
195
195
  <span class="pf-c-jump-links__link-text">Active section</span>
@@ -204,7 +204,7 @@ cssPrefix: pf-c-jump-links
204
204
  <a class="pf-c-jump-links__link" href="#">
205
205
  <span class="pf-c-jump-links__link-text">Inactive section</span>
206
206
  </a>
207
- <ul class="pf-c-jump-links__list">
207
+ <ul class="pf-c-jump-links__list" role="list">
208
208
  <li class="pf-c-jump-links__item">
209
209
  <a class="pf-c-jump-links__link" href="#">
210
210
  <span class="pf-c-jump-links__link-text">Inactive subsection</span>
@@ -239,7 +239,7 @@ cssPrefix: pf-c-jump-links
239
239
  <div class="pf-c-jump-links__header">
240
240
  <div class="pf-c-jump-links__label">Jump to section</div>
241
241
  </div>
242
- <ul class="pf-c-jump-links__list">
242
+ <ul class="pf-c-jump-links__list" role="list">
243
243
  <li class="pf-c-jump-links__item">
244
244
  <a class="pf-c-jump-links__link" href="#">
245
245
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -254,7 +254,7 @@ cssPrefix: pf-c-jump-links
254
254
  <a class="pf-c-jump-links__link" href="#">
255
255
  <span class="pf-c-jump-links__link-text">Active section</span>
256
256
  </a>
257
- <ul class="pf-c-jump-links__list">
257
+ <ul class="pf-c-jump-links__list" role="list">
258
258
  <li class="pf-c-jump-links__item pf-m-current">
259
259
  <a class="pf-c-jump-links__link" href="#">
260
260
  <span class="pf-c-jump-links__link-text">Active subsection</span>
@@ -305,7 +305,7 @@ cssPrefix: pf-c-jump-links
305
305
  </div>
306
306
  <div class="pf-c-jump-links__label">Jump to section</div>
307
307
  </div>
308
- <ul class="pf-c-jump-links__list">
308
+ <ul class="pf-c-jump-links__list" role="list">
309
309
  <li class="pf-c-jump-links__item">
310
310
  <a class="pf-c-jump-links__link" href="#">
311
311
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -359,7 +359,7 @@ cssPrefix: pf-c-jump-links
359
359
  </div>
360
360
  <div class="pf-c-jump-links__label">Jump to section</div>
361
361
  </div>
362
- <ul class="pf-c-jump-links__list">
362
+ <ul class="pf-c-jump-links__list" role="list">
363
363
  <li class="pf-c-jump-links__item">
364
364
  <a class="pf-c-jump-links__link" href="#">
365
365
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -413,7 +413,7 @@ cssPrefix: pf-c-jump-links
413
413
  </div>
414
414
  <div class="pf-c-jump-links__label">Jump to section</div>
415
415
  </div>
416
- <ul class="pf-c-jump-links__list">
416
+ <ul class="pf-c-jump-links__list" role="list">
417
417
  <li class="pf-c-jump-links__item">
418
418
  <a class="pf-c-jump-links__link" href="#">
419
419
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -465,7 +465,7 @@ cssPrefix: pf-c-jump-links
465
465
  </button>
466
466
  </div>
467
467
  </div>
468
- <ul class="pf-c-jump-links__list">
468
+ <ul class="pf-c-jump-links__list" role="list">
469
469
  <li class="pf-c-jump-links__item">
470
470
  <a class="pf-c-jump-links__link" href="#">
471
471
  <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -7,17 +7,17 @@ cssPrefix: pf-c-list
7
7
  ### Unordered
8
8
 
9
9
  ```html
10
- <ul class="pf-c-list">
10
+ <ul class="pf-c-list" role="list">
11
11
  <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
12
12
  <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
13
13
  <li>
14
14
  Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
15
- <ul class="pf-c-list">
15
+ <ul class="pf-c-list" role="list">
16
16
  <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
17
17
  <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
18
18
  <li>
19
19
  Ut venenatis, nisl scelerisque.
20
- <ol class="pf-c-list">
20
+ <ol class="pf-c-list" role="list">
21
21
  <li>Donec blandit a lorem id convallis.</li>
22
22
  <li>Cras gravida arcu at diam gravida gravida.</li>
23
23
  <li>Integer in volutpat libero.</li>
@@ -33,19 +33,19 @@ cssPrefix: pf-c-list
33
33
  ### Ordered
34
34
 
35
35
  ```html
36
- <ol class="pf-c-list">
36
+ <ol class="pf-c-list" role="list">
37
37
  <li>Donec blandit a lorem id convallis.</li>
38
38
  <li>Cras gravida arcu at diam gravida gravida.</li>
39
39
  <li>Integer in volutpat libero.</li>
40
40
  <li>Donec a diam tellus.</li>
41
41
  <li>
42
42
  Etiam auctor nisl et.
43
- <ul class="pf-c-list">
43
+ <ul class="pf-c-list" role="list">
44
44
  <li>Donec blandit a lorem id convallis.</li>
45
45
  <li>Cras gravida arcu at diam gravida gravida.</li>
46
46
  <li>
47
47
  Integer in volutpat libero.
48
- <ol class="pf-c-list">
48
+ <ol class="pf-c-list" role="list">
49
49
  <li>Donec blandit a lorem id convallis.</li>
50
50
  <li>Cras gravida arcu at diam gravida gravida.</li>
51
51
  </ol>
@@ -62,7 +62,7 @@ cssPrefix: pf-c-list
62
62
  ### Inline
63
63
 
64
64
  ```html
65
- <ul class="pf-c-list pf-m-inline">
65
+ <ul class="pf-c-list pf-m-inline" role="list">
66
66
  <li>Inline list item 1</li>
67
67
  <li>Inline list item 2</li>
68
68
  <li>Inline list item 3</li>
@@ -73,12 +73,12 @@ cssPrefix: pf-c-list
73
73
  ### Plain
74
74
 
75
75
  ```html
76
- <ul class="pf-c-list pf-m-plain">
76
+ <ul class="pf-c-list pf-m-plain" role="list">
77
77
  <li>Donec blandit a lorem id convallis.</li>
78
78
  <li>Integer in volutpat libero.</li>
79
79
  <li>
80
80
  Donec a diam tellus.
81
- <ul class="pf-c-list">
81
+ <ul class="pf-c-list" role="list">
82
82
  <li>Donec blandit a lorem id convallis.</li>
83
83
  <li>Cras gravida arcu at diam gravida gravida.</li>
84
84
  <li>Integer in volutpat libero.</li>
@@ -93,7 +93,7 @@ cssPrefix: pf-c-list
93
93
  ### With horizontal rules
94
94
 
95
95
  ```html
96
- <ul class="pf-c-list pf-m-plain pf-m-bordered">
96
+ <ul class="pf-c-list pf-m-plain pf-m-bordered" role="list">
97
97
  <li>Donec blandit a lorem id convallis.</li>
98
98
  <li>Integer in volutpat libero.</li>
99
99
  <li>Donec a diam tellus.</li>
@@ -106,7 +106,7 @@ cssPrefix: pf-c-list
106
106
  ### With small icons
107
107
 
108
108
  ```html
109
- <ul class="pf-c-list pf-m-plain">
109
+ <ul class="pf-c-list pf-m-plain" role="list">
110
110
  <li class="pf-c-list__item">
111
111
  <span class="pf-c-list__item-icon">
112
112
  <i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
@@ -132,7 +132,7 @@ cssPrefix: pf-c-list
132
132
  ### With large icons
133
133
 
134
134
  ```html
135
- <ul class="pf-c-list pf-m-plain pf-m-icon-lg">
135
+ <ul class="pf-c-list pf-m-plain pf-m-icon-lg" role="list">
136
136
  <li class="pf-c-list__item">
137
137
  <span class="pf-c-list__item-icon">
138
138
  <i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
@@ -104,7 +104,7 @@ wrapperTag: div
104
104
  </form>
105
105
  </div>
106
106
  <footer class="pf-c-login__main-footer">
107
- <ul class="pf-c-login__main-footer-links">
107
+ <ul class="pf-c-login__main-footer-links" role="list">
108
108
  <li class="pf-c-login__main-footer-links-item">
109
109
  <a
110
110
  href="#"
@@ -204,7 +204,7 @@ wrapperTag: div
204
204
  </main>
205
205
  <footer class="pf-c-login__footer">
206
206
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
207
- <ul class="pf-c-list pf-m-inline">
207
+ <ul class="pf-c-list pf-m-inline" role="list">
208
208
  <li>
209
209
  <a href="#">Terms of use</a>
210
210
  </li>
@@ -326,7 +326,7 @@ wrapperTag: div
326
326
  </form>
327
327
  </div>
328
328
  <footer class="pf-c-login__main-footer">
329
- <ul class="pf-c-login__main-footer-links">
329
+ <ul class="pf-c-login__main-footer-links" role="list">
330
330
  <li class="pf-c-login__main-footer-links-item">
331
331
  <a
332
332
  href="#"
@@ -426,7 +426,7 @@ wrapperTag: div
426
426
  </main>
427
427
  <footer class="pf-c-login__footer">
428
428
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
429
- <ul class="pf-c-list pf-m-inline">
429
+ <ul class="pf-c-list pf-m-inline" role="list">
430
430
  <li>
431
431
  <a href="#">Terms of use</a>
432
432
  </li>
@@ -553,7 +553,7 @@ wrapperTag: div
553
553
  </form>
554
554
  </div>
555
555
  <footer class="pf-c-login__main-footer">
556
- <ul class="pf-c-login__main-footer-links">
556
+ <ul class="pf-c-login__main-footer-links" role="list">
557
557
  <li class="pf-c-login__main-footer-links-item">
558
558
  <a
559
559
  href="#"
@@ -653,7 +653,7 @@ wrapperTag: div
653
653
  </main>
654
654
  <footer class="pf-c-login__footer">
655
655
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
656
- <ul class="pf-c-list pf-m-inline">
656
+ <ul class="pf-c-list pf-m-inline" role="list">
657
657
  <li>
658
658
  <a href="#">Terms of use</a>
659
659
  </li>
@@ -780,7 +780,7 @@ wrapperTag: div
780
780
  </form>
781
781
  </div>
782
782
  <footer class="pf-c-login__main-footer">
783
- <ul class="pf-c-login__main-footer-links">
783
+ <ul class="pf-c-login__main-footer-links" role="list">
784
784
  <li class="pf-c-login__main-footer-links-item">
785
785
  <a
786
786
  href="#"
@@ -880,7 +880,7 @@ wrapperTag: div
880
880
  </main>
881
881
  <footer class="pf-c-login__footer">
882
882
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
883
- <ul class="pf-c-list pf-m-inline">
883
+ <ul class="pf-c-list pf-m-inline" role="list">
884
884
  <li>
885
885
  <a href="#">Terms of use</a>
886
886
  </li>
@@ -1042,7 +1042,7 @@ wrapperTag: div
1042
1042
  </form>
1043
1043
  </div>
1044
1044
  <footer class="pf-c-login__main-footer">
1045
- <ul class="pf-c-login__main-footer-links">
1045
+ <ul class="pf-c-login__main-footer-links" role="list">
1046
1046
  <li class="pf-c-login__main-footer-links-item">
1047
1047
  <a
1048
1048
  href="#"
@@ -1142,7 +1142,7 @@ wrapperTag: div
1142
1142
  </main>
1143
1143
  <footer class="pf-c-login__footer">
1144
1144
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
1145
- <ul class="pf-c-list pf-m-inline">
1145
+ <ul class="pf-c-list pf-m-inline" role="list">
1146
1146
  <li>
1147
1147
  <a href="#">Terms of use</a>
1148
1148
  </li>
@@ -4140,7 +4140,7 @@ cssPrefix: pf-c-menu
4140
4140
  >
4141
4141
  <div class="pf-c-menu__breadcrumb">
4142
4142
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4143
- <ol class="pf-c-breadcrumb__list">
4143
+ <ol class="pf-c-breadcrumb__list" role="list">
4144
4144
  <li class="pf-c-breadcrumb__item">
4145
4145
  <span class="pf-c-breadcrumb__item-divider">
4146
4146
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4334,7 +4334,7 @@ cssPrefix: pf-c-menu
4334
4334
  >
4335
4335
  <div class="pf-c-menu__breadcrumb">
4336
4336
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4337
- <ol class="pf-c-breadcrumb__list">
4337
+ <ol class="pf-c-breadcrumb__list" role="list">
4338
4338
  <li class="pf-c-breadcrumb__item">
4339
4339
  <span class="pf-c-breadcrumb__item-divider">
4340
4340
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4564,7 +4564,7 @@ cssPrefix: pf-c-menu
4564
4564
  >
4565
4565
  <div class="pf-c-menu__breadcrumb">
4566
4566
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4567
- <ol class="pf-c-breadcrumb__list">
4567
+ <ol class="pf-c-breadcrumb__list" role="list">
4568
4568
  <li class="pf-c-breadcrumb__item">
4569
4569
  <span class="pf-c-breadcrumb__item-divider">
4570
4570
  <i class="fas fa-angle-right" aria-hidden="true"></i>