@patternfly/patternfly 4.179.1 → 4.180.0

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 (36) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +4 -1
  5. package/components/MenuToggle/menu-toggle.scss +4 -3
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/components/Select/select.css +3 -2
  9. package/components/Select/select.scss +4 -2
  10. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  11. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  13. package/docs/components/FormControl/examples/FormControl.md +0 -11
  14. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  15. package/docs/components/LabelGroup/examples/LabelGroup.md +135 -2
  16. package/docs/components/LogViewer/examples/LogViewer.md +567 -198
  17. package/docs/components/Menu/examples/Menu.md +1908 -983
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Nav/examples/Navigation.md +563 -231
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Spinner/examples/Spinner.md +50 -55
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/demos/ContextSelector/examples/ContextSelector.md +515 -218
  25. package/docs/demos/DataList/examples/DataList.md +159 -114
  26. package/docs/demos/Masthead/examples/Masthead.md +482 -237
  27. package/docs/demos/Page/examples/Page.md +945 -350
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  30. package/docs/demos/Table/examples/Table.md +2459 -1090
  31. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  32. package/package.json +1 -1
  33. package/patternfly-no-reset.css +12 -5
  34. package/patternfly.css +12 -5
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
@@ -85,14 +85,24 @@ wrapperTag: div
85
85
  hidden
86
86
  >
87
87
  <div class="pf-c-app-launcher__menu-search">
88
- <input
89
- class="pf-c-form-control"
90
- type="search"
91
- aria-label="Type to filter"
92
- placeholder="Filter by name..."
93
- id="page-demo-basic-masthead-application-launcher-text-input"
94
- name="textInput1"
95
- />
88
+ <div class="pf-c-search-input">
89
+ <div class="pf-c-search-input__bar">
90
+ <span class="pf-c-search-input__text">
91
+ <span class="pf-c-search-input__icon">
92
+ <i
93
+ class="fas fa-search fa-fw"
94
+ aria-hidden="true"
95
+ ></i>
96
+ </span>
97
+ <input
98
+ class="pf-c-search-input__text-input"
99
+ type="text"
100
+ placeholder="Filter by name"
101
+ aria-label="Filter by name"
102
+ />
103
+ </span>
104
+ </div>
105
+ </div>
96
106
  </div>
97
107
  <section class="pf-c-app-launcher__group">
98
108
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -282,12 +292,16 @@ wrapperTag: div
282
292
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
283
293
  <div class="pf-c-menu__content">
284
294
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
285
- <ul class="pf-c-menu__list">
286
- <li class="pf-c-menu__list-item pf-m-disabled">
295
+ <ul class="pf-c-menu__list" role="menu">
296
+ <li
297
+ class="pf-c-menu__list-item pf-m-disabled"
298
+ role="none"
299
+ >
287
300
  <button
288
301
  class="pf-c-menu__item"
289
302
  type="button"
290
303
  disabled
304
+ role="menuitem"
291
305
  >
292
306
  <span class="pf-c-menu__item-description">
293
307
  <div class="pf-u-font-size-sm">Username:</div>
@@ -297,11 +311,15 @@ wrapperTag: div
297
311
  </span>
298
312
  </button>
299
313
  </li>
300
- <li class="pf-c-menu__list-item pf-m-disabled">
314
+ <li
315
+ class="pf-c-menu__list-item pf-m-disabled"
316
+ role="none"
317
+ >
301
318
  <button
302
319
  class="pf-c-menu__item"
303
320
  type="button"
304
321
  disabled
322
+ role="menuitem"
305
323
  >
306
324
  <span class="pf-c-menu__item-description">
307
325
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -310,15 +328,23 @@ wrapperTag: div
310
328
  </button>
311
329
  </li>
312
330
  <li class="pf-c-divider" role="separator"></li>
313
- <li class="pf-c-menu__list-item">
314
- <button class="pf-c-menu__item" type="button">
331
+ <li class="pf-c-menu__list-item" role="none">
332
+ <button
333
+ class="pf-c-menu__item"
334
+ type="button"
335
+ role="menuitem"
336
+ >
315
337
  <span class="pf-c-menu__item-main">
316
338
  <span class="pf-c-menu__item-text">My profile</span>
317
339
  </span>
318
340
  </button>
319
341
  </li>
320
- <li class="pf-c-menu__list-item">
321
- <button class="pf-c-menu__item" type="button">
342
+ <li class="pf-c-menu__list-item" role="none">
343
+ <button
344
+ class="pf-c-menu__item"
345
+ type="button"
346
+ role="menuitem"
347
+ >
322
348
  <span class="pf-c-menu__item-main">
323
349
  <span
324
350
  class="pf-c-menu__item-text"
@@ -326,8 +352,12 @@ wrapperTag: div
326
352
  </span>
327
353
  </button>
328
354
  </li>
329
- <li class="pf-c-menu__list-item">
330
- <button class="pf-c-menu__item" type="button">
355
+ <li class="pf-c-menu__list-item" role="none">
356
+ <button
357
+ class="pf-c-menu__item"
358
+ type="button"
359
+ role="menuitem"
360
+ >
331
361
  <span class="pf-c-menu__item-main">
332
362
  <span class="pf-c-menu__item-text">Logout</span>
333
363
  </span>
@@ -337,11 +367,12 @@ wrapperTag: div
337
367
  </section>
338
368
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
339
369
  <section class="pf-c-menu__group">
340
- <ul class="pf-c-menu__list">
341
- <li class="pf-c-menu__list-item">
370
+ <ul class="pf-c-menu__list" role="menu">
371
+ <li class="pf-c-menu__list-item" role="none">
342
372
  <button
343
373
  class="pf-c-menu__item"
344
374
  type="button"
375
+ role="menuitem"
345
376
  aria-expanded="false"
346
377
  >
347
378
  <span class="pf-c-menu__item-main">
@@ -359,13 +390,15 @@ wrapperTag: div
359
390
  </button>
360
391
  <div class="pf-c-menu" hidden>
361
392
  <div class="pf-c-menu__content">
362
- <ul class="pf-c-menu__list">
393
+ <ul class="pf-c-menu__list" role="menu">
363
394
  <li
364
395
  class="pf-c-menu__list-item pf-m-drill-up"
396
+ role="none"
365
397
  >
366
398
  <button
367
399
  class="pf-c-menu__item"
368
400
  type="button"
401
+ role="menuitem"
369
402
  >
370
403
  <span class="pf-c-menu__item-main">
371
404
  <span
@@ -386,8 +419,12 @@ wrapperTag: div
386
419
  </button>
387
420
  </li>
388
421
  <li class="pf-c-divider" role="separator"></li>
389
- <li class="pf-c-menu__list-item">
390
- <a class="pf-c-menu__item" href="#">
422
+ <li class="pf-c-menu__list-item" role="none">
423
+ <a
424
+ class="pf-c-menu__item"
425
+ href="#"
426
+ role="menuitem"
427
+ >
391
428
  <span class="pf-c-menu__item-main">
392
429
  <span
393
430
  class="pf-c-menu__item-text"
@@ -395,8 +432,12 @@ wrapperTag: div
395
432
  </span>
396
433
  </a>
397
434
  </li>
398
- <li class="pf-c-menu__list-item">
399
- <a class="pf-c-menu__item" href="#">
435
+ <li class="pf-c-menu__list-item" role="none">
436
+ <a
437
+ class="pf-c-menu__item"
438
+ href="#"
439
+ role="menuitem"
440
+ >
400
441
  <span class="pf-c-menu__item-main">
401
442
  <span class="pf-c-menu__item-text">About</span>
402
443
  </span>
@@ -407,10 +448,11 @@ wrapperTag: div
407
448
  </div>
408
449
  </li>
409
450
 
410
- <li class="pf-c-menu__list-item">
451
+ <li class="pf-c-menu__list-item" role="none">
411
452
  <button
412
453
  class="pf-c-menu__item"
413
454
  type="button"
455
+ role="menuitem"
414
456
  aria-expanded="false"
415
457
  >
416
458
  <span class="pf-c-menu__item-main">
@@ -428,13 +470,15 @@ wrapperTag: div
428
470
  </button>
429
471
  <div class="pf-c-menu" hidden>
430
472
  <div class="pf-c-menu__content">
431
- <ul class="pf-c-menu__list">
473
+ <ul class="pf-c-menu__list" role="menu">
432
474
  <li
433
475
  class="pf-c-menu__list-item pf-m-drill-up"
476
+ role="none"
434
477
  >
435
478
  <button
436
479
  class="pf-c-menu__item"
437
480
  type="button"
481
+ role="menuitem"
438
482
  >
439
483
  <span class="pf-c-menu__item-main">
440
484
  <span
@@ -453,8 +497,12 @@ wrapperTag: div
453
497
  </button>
454
498
  </li>
455
499
  <li class="pf-c-divider" role="separator"></li>
456
- <li class="pf-c-menu__list-item">
457
- <a class="pf-c-menu__item" href="#">
500
+ <li class="pf-c-menu__list-item" role="none">
501
+ <a
502
+ class="pf-c-menu__item"
503
+ href="#"
504
+ role="menuitem"
505
+ >
458
506
  <span class="pf-c-menu__item-main">
459
507
  <span
460
508
  class="pf-c-menu__item-text"
@@ -462,8 +510,12 @@ wrapperTag: div
462
510
  </span>
463
511
  </a>
464
512
  </li>
465
- <li class="pf-c-menu__list-item">
466
- <a class="pf-c-menu__item" href="#">
513
+ <li class="pf-c-menu__list-item" role="none">
514
+ <a
515
+ class="pf-c-menu__item"
516
+ href="#"
517
+ role="menuitem"
518
+ >
467
519
  <span class="pf-c-menu__item-main">
468
520
  <span
469
521
  class="pf-c-menu__item-text"
@@ -471,8 +523,12 @@ wrapperTag: div
471
523
  </span>
472
524
  </a>
473
525
  </li>
474
- <li class="pf-c-menu__list-item">
475
- <a class="pf-c-menu__item" href="#">
526
+ <li class="pf-c-menu__list-item" role="none">
527
+ <a
528
+ class="pf-c-menu__item"
529
+ href="#"
530
+ role="menuitem"
531
+ >
476
532
  <span class="pf-c-menu__item-main">
477
533
  <span
478
534
  class="pf-c-menu__item-text"
@@ -485,8 +541,12 @@ wrapperTag: div
485
541
  </div>
486
542
  </li>
487
543
 
488
- <li class="pf-c-menu__list-item">
489
- <button class="pf-c-menu__item" type="button">
544
+ <li class="pf-c-menu__list-item" role="none">
545
+ <button
546
+ class="pf-c-menu__item"
547
+ type="button"
548
+ role="menuitem"
549
+ >
490
550
  <span class="pf-c-menu__item-main">
491
551
  <span class="pf-c-menu__item-icon">
492
552
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -501,7 +561,11 @@ wrapperTag: div
501
561
  </button>
502
562
  <div class="pf-c-menu" hidden>
503
563
  <div class="pf-c-menu__header">
504
- <button class="pf-c-menu__item" type="button">
564
+ <button
565
+ class="pf-c-menu__item"
566
+ type="button"
567
+ role="menuitem"
568
+ >
505
569
  <span class="pf-c-menu__item-main">
506
570
  <span class="pf-c-menu__item-toggle-icon">
507
571
  <i class="fas fa-angle-left"></i>
@@ -520,21 +584,36 @@ wrapperTag: div
520
584
  </div>
521
585
  <div class="pf-c-menu__search">
522
586
  <div class="pf-c-menu__search-input">
523
- <input
524
- class="pf-c-form-control pf-m-search"
525
- type="search"
526
- id="page-demo-basic-masthead-drilldown-menu-list-3-search-input"
527
- name="page-demo-basic-masthead-drilldown-menu-list-3-search-input"
528
- aria-label="Search"
529
- />
587
+ <div class="pf-c-search-input">
588
+ <div class="pf-c-search-input__bar">
589
+ <span class="pf-c-search-input__text">
590
+ <span class="pf-c-search-input__icon">
591
+ <i
592
+ class="fas fa-search fa-fw"
593
+ aria-hidden="true"
594
+ ></i>
595
+ </span>
596
+ <input
597
+ class="pf-c-search-input__text-input"
598
+ type="text"
599
+ placeholder="Search"
600
+ aria-label="Search"
601
+ />
602
+ </span>
603
+ </div>
604
+ </div>
530
605
  </div>
531
606
  </div>
532
607
  <hr class="pf-c-divider" />
533
608
  <section class="pf-c-menu__group">
534
609
  <h1 class="pf-c-menu__group-title">Favorites</h1>
535
- <ul class="pf-c-menu__list">
536
- <li class="pf-c-menu__list-item">
537
- <a class="pf-c-menu__item" href="#">
610
+ <ul class="pf-c-menu__list" role="menu">
611
+ <li class="pf-c-menu__list-item" role="none">
612
+ <a
613
+ class="pf-c-menu__item"
614
+ href="#"
615
+ role="menuitem"
616
+ >
538
617
  <span class="pf-c-menu__item-main">
539
618
  <span
540
619
  class="pf-c-menu__item-text"
@@ -554,10 +633,11 @@ wrapperTag: div
554
633
  </span>
555
634
  </button>
556
635
  </li>
557
- <li class="pf-c-menu__list-item">
636
+ <li class="pf-c-menu__list-item" role="none">
558
637
  <a
559
638
  class="pf-c-menu__item"
560
639
  href="#"
640
+ role="menuitem"
561
641
  target="_blank"
562
642
  >
563
643
  <span class="pf-c-menu__item-main">
@@ -595,9 +675,13 @@ wrapperTag: div
595
675
  <hr class="pf-c-divider" />
596
676
  <section class="pf-c-menu__group">
597
677
  <h1 class="pf-c-menu__group-title">Group 1</h1>
598
- <ul class="pf-c-menu__list">
599
- <li class="pf-c-menu__list-item">
600
- <a class="pf-c-menu__item" href="#">
678
+ <ul class="pf-c-menu__list" role="menu">
679
+ <li class="pf-c-menu__list-item" role="none">
680
+ <a
681
+ class="pf-c-menu__item"
682
+ href="#"
683
+ role="menuitem"
684
+ >
601
685
  <span class="pf-c-menu__item-main">
602
686
  <span
603
687
  class="pf-c-menu__item-text"
@@ -617,10 +701,11 @@ wrapperTag: div
617
701
  </span>
618
702
  </button>
619
703
  </li>
620
- <li class="pf-c-menu__list-item">
704
+ <li class="pf-c-menu__list-item" role="none">
621
705
  <a
622
706
  class="pf-c-menu__item"
623
707
  href="#"
708
+ role="menuitem"
624
709
  target="_blank"
625
710
  >
626
711
  <span class="pf-c-menu__item-main">
@@ -944,14 +1029,24 @@ wrapperTag: div
944
1029
  hidden
945
1030
  >
946
1031
  <div class="pf-c-app-launcher__menu-search">
947
- <input
948
- class="pf-c-form-control"
949
- type="search"
950
- aria-label="Type to filter"
951
- placeholder="Filter by name..."
952
- id="page-demo-sticky-top-horizontal-subnav-masthead-application-launcher-text-input"
953
- name="textInput1"
954
- />
1032
+ <div class="pf-c-search-input">
1033
+ <div class="pf-c-search-input__bar">
1034
+ <span class="pf-c-search-input__text">
1035
+ <span class="pf-c-search-input__icon">
1036
+ <i
1037
+ class="fas fa-search fa-fw"
1038
+ aria-hidden="true"
1039
+ ></i>
1040
+ </span>
1041
+ <input
1042
+ class="pf-c-search-input__text-input"
1043
+ type="text"
1044
+ placeholder="Filter by name"
1045
+ aria-label="Filter by name"
1046
+ />
1047
+ </span>
1048
+ </div>
1049
+ </div>
955
1050
  </div>
956
1051
  <section class="pf-c-app-launcher__group">
957
1052
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1141,12 +1236,16 @@ wrapperTag: div
1141
1236
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
1142
1237
  <div class="pf-c-menu__content">
1143
1238
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
1144
- <ul class="pf-c-menu__list">
1145
- <li class="pf-c-menu__list-item pf-m-disabled">
1239
+ <ul class="pf-c-menu__list" role="menu">
1240
+ <li
1241
+ class="pf-c-menu__list-item pf-m-disabled"
1242
+ role="none"
1243
+ >
1146
1244
  <button
1147
1245
  class="pf-c-menu__item"
1148
1246
  type="button"
1149
1247
  disabled
1248
+ role="menuitem"
1150
1249
  >
1151
1250
  <span class="pf-c-menu__item-description">
1152
1251
  <div class="pf-u-font-size-sm">Username:</div>
@@ -1156,11 +1255,15 @@ wrapperTag: div
1156
1255
  </span>
1157
1256
  </button>
1158
1257
  </li>
1159
- <li class="pf-c-menu__list-item pf-m-disabled">
1258
+ <li
1259
+ class="pf-c-menu__list-item pf-m-disabled"
1260
+ role="none"
1261
+ >
1160
1262
  <button
1161
1263
  class="pf-c-menu__item"
1162
1264
  type="button"
1163
1265
  disabled
1266
+ role="menuitem"
1164
1267
  >
1165
1268
  <span class="pf-c-menu__item-description">
1166
1269
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -1169,15 +1272,23 @@ wrapperTag: div
1169
1272
  </button>
1170
1273
  </li>
1171
1274
  <li class="pf-c-divider" role="separator"></li>
1172
- <li class="pf-c-menu__list-item">
1173
- <button class="pf-c-menu__item" type="button">
1275
+ <li class="pf-c-menu__list-item" role="none">
1276
+ <button
1277
+ class="pf-c-menu__item"
1278
+ type="button"
1279
+ role="menuitem"
1280
+ >
1174
1281
  <span class="pf-c-menu__item-main">
1175
1282
  <span class="pf-c-menu__item-text">My profile</span>
1176
1283
  </span>
1177
1284
  </button>
1178
1285
  </li>
1179
- <li class="pf-c-menu__list-item">
1180
- <button class="pf-c-menu__item" type="button">
1286
+ <li class="pf-c-menu__list-item" role="none">
1287
+ <button
1288
+ class="pf-c-menu__item"
1289
+ type="button"
1290
+ role="menuitem"
1291
+ >
1181
1292
  <span class="pf-c-menu__item-main">
1182
1293
  <span
1183
1294
  class="pf-c-menu__item-text"
@@ -1185,8 +1296,12 @@ wrapperTag: div
1185
1296
  </span>
1186
1297
  </button>
1187
1298
  </li>
1188
- <li class="pf-c-menu__list-item">
1189
- <button class="pf-c-menu__item" type="button">
1299
+ <li class="pf-c-menu__list-item" role="none">
1300
+ <button
1301
+ class="pf-c-menu__item"
1302
+ type="button"
1303
+ role="menuitem"
1304
+ >
1190
1305
  <span class="pf-c-menu__item-main">
1191
1306
  <span class="pf-c-menu__item-text">Logout</span>
1192
1307
  </span>
@@ -1196,11 +1311,12 @@ wrapperTag: div
1196
1311
  </section>
1197
1312
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
1198
1313
  <section class="pf-c-menu__group">
1199
- <ul class="pf-c-menu__list">
1200
- <li class="pf-c-menu__list-item">
1314
+ <ul class="pf-c-menu__list" role="menu">
1315
+ <li class="pf-c-menu__list-item" role="none">
1201
1316
  <button
1202
1317
  class="pf-c-menu__item"
1203
1318
  type="button"
1319
+ role="menuitem"
1204
1320
  aria-expanded="false"
1205
1321
  >
1206
1322
  <span class="pf-c-menu__item-main">
@@ -1218,13 +1334,15 @@ wrapperTag: div
1218
1334
  </button>
1219
1335
  <div class="pf-c-menu" hidden>
1220
1336
  <div class="pf-c-menu__content">
1221
- <ul class="pf-c-menu__list">
1337
+ <ul class="pf-c-menu__list" role="menu">
1222
1338
  <li
1223
1339
  class="pf-c-menu__list-item pf-m-drill-up"
1340
+ role="none"
1224
1341
  >
1225
1342
  <button
1226
1343
  class="pf-c-menu__item"
1227
1344
  type="button"
1345
+ role="menuitem"
1228
1346
  >
1229
1347
  <span class="pf-c-menu__item-main">
1230
1348
  <span
@@ -1245,8 +1363,12 @@ wrapperTag: div
1245
1363
  </button>
1246
1364
  </li>
1247
1365
  <li class="pf-c-divider" role="separator"></li>
1248
- <li class="pf-c-menu__list-item">
1249
- <a class="pf-c-menu__item" href="#">
1366
+ <li class="pf-c-menu__list-item" role="none">
1367
+ <a
1368
+ class="pf-c-menu__item"
1369
+ href="#"
1370
+ role="menuitem"
1371
+ >
1250
1372
  <span class="pf-c-menu__item-main">
1251
1373
  <span
1252
1374
  class="pf-c-menu__item-text"
@@ -1254,8 +1376,12 @@ wrapperTag: div
1254
1376
  </span>
1255
1377
  </a>
1256
1378
  </li>
1257
- <li class="pf-c-menu__list-item">
1258
- <a class="pf-c-menu__item" href="#">
1379
+ <li class="pf-c-menu__list-item" role="none">
1380
+ <a
1381
+ class="pf-c-menu__item"
1382
+ href="#"
1383
+ role="menuitem"
1384
+ >
1259
1385
  <span class="pf-c-menu__item-main">
1260
1386
  <span class="pf-c-menu__item-text">About</span>
1261
1387
  </span>
@@ -1266,10 +1392,11 @@ wrapperTag: div
1266
1392
  </div>
1267
1393
  </li>
1268
1394
 
1269
- <li class="pf-c-menu__list-item">
1395
+ <li class="pf-c-menu__list-item" role="none">
1270
1396
  <button
1271
1397
  class="pf-c-menu__item"
1272
1398
  type="button"
1399
+ role="menuitem"
1273
1400
  aria-expanded="false"
1274
1401
  >
1275
1402
  <span class="pf-c-menu__item-main">
@@ -1287,13 +1414,15 @@ wrapperTag: div
1287
1414
  </button>
1288
1415
  <div class="pf-c-menu" hidden>
1289
1416
  <div class="pf-c-menu__content">
1290
- <ul class="pf-c-menu__list">
1417
+ <ul class="pf-c-menu__list" role="menu">
1291
1418
  <li
1292
1419
  class="pf-c-menu__list-item pf-m-drill-up"
1420
+ role="none"
1293
1421
  >
1294
1422
  <button
1295
1423
  class="pf-c-menu__item"
1296
1424
  type="button"
1425
+ role="menuitem"
1297
1426
  >
1298
1427
  <span class="pf-c-menu__item-main">
1299
1428
  <span
@@ -1312,8 +1441,12 @@ wrapperTag: div
1312
1441
  </button>
1313
1442
  </li>
1314
1443
  <li class="pf-c-divider" role="separator"></li>
1315
- <li class="pf-c-menu__list-item">
1316
- <a class="pf-c-menu__item" href="#">
1444
+ <li class="pf-c-menu__list-item" role="none">
1445
+ <a
1446
+ class="pf-c-menu__item"
1447
+ href="#"
1448
+ role="menuitem"
1449
+ >
1317
1450
  <span class="pf-c-menu__item-main">
1318
1451
  <span
1319
1452
  class="pf-c-menu__item-text"
@@ -1321,8 +1454,12 @@ wrapperTag: div
1321
1454
  </span>
1322
1455
  </a>
1323
1456
  </li>
1324
- <li class="pf-c-menu__list-item">
1325
- <a class="pf-c-menu__item" href="#">
1457
+ <li class="pf-c-menu__list-item" role="none">
1458
+ <a
1459
+ class="pf-c-menu__item"
1460
+ href="#"
1461
+ role="menuitem"
1462
+ >
1326
1463
  <span class="pf-c-menu__item-main">
1327
1464
  <span
1328
1465
  class="pf-c-menu__item-text"
@@ -1330,8 +1467,12 @@ wrapperTag: div
1330
1467
  </span>
1331
1468
  </a>
1332
1469
  </li>
1333
- <li class="pf-c-menu__list-item">
1334
- <a class="pf-c-menu__item" href="#">
1470
+ <li class="pf-c-menu__list-item" role="none">
1471
+ <a
1472
+ class="pf-c-menu__item"
1473
+ href="#"
1474
+ role="menuitem"
1475
+ >
1335
1476
  <span class="pf-c-menu__item-main">
1336
1477
  <span
1337
1478
  class="pf-c-menu__item-text"
@@ -1344,8 +1485,12 @@ wrapperTag: div
1344
1485
  </div>
1345
1486
  </li>
1346
1487
 
1347
- <li class="pf-c-menu__list-item">
1348
- <button class="pf-c-menu__item" type="button">
1488
+ <li class="pf-c-menu__list-item" role="none">
1489
+ <button
1490
+ class="pf-c-menu__item"
1491
+ type="button"
1492
+ role="menuitem"
1493
+ >
1349
1494
  <span class="pf-c-menu__item-main">
1350
1495
  <span class="pf-c-menu__item-icon">
1351
1496
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -1360,7 +1505,11 @@ wrapperTag: div
1360
1505
  </button>
1361
1506
  <div class="pf-c-menu" hidden>
1362
1507
  <div class="pf-c-menu__header">
1363
- <button class="pf-c-menu__item" type="button">
1508
+ <button
1509
+ class="pf-c-menu__item"
1510
+ type="button"
1511
+ role="menuitem"
1512
+ >
1364
1513
  <span class="pf-c-menu__item-main">
1365
1514
  <span class="pf-c-menu__item-toggle-icon">
1366
1515
  <i class="fas fa-angle-left"></i>
@@ -1379,21 +1528,36 @@ wrapperTag: div
1379
1528
  </div>
1380
1529
  <div class="pf-c-menu__search">
1381
1530
  <div class="pf-c-menu__search-input">
1382
- <input
1383
- class="pf-c-form-control pf-m-search"
1384
- type="search"
1385
- id="page-demo-sticky-top-horizontal-subnav-masthead-drilldown-menu-list-3-search-input"
1386
- name="page-demo-sticky-top-horizontal-subnav-masthead-drilldown-menu-list-3-search-input"
1387
- aria-label="Search"
1388
- />
1531
+ <div class="pf-c-search-input">
1532
+ <div class="pf-c-search-input__bar">
1533
+ <span class="pf-c-search-input__text">
1534
+ <span class="pf-c-search-input__icon">
1535
+ <i
1536
+ class="fas fa-search fa-fw"
1537
+ aria-hidden="true"
1538
+ ></i>
1539
+ </span>
1540
+ <input
1541
+ class="pf-c-search-input__text-input"
1542
+ type="text"
1543
+ placeholder="Search"
1544
+ aria-label="Search"
1545
+ />
1546
+ </span>
1547
+ </div>
1548
+ </div>
1389
1549
  </div>
1390
1550
  </div>
1391
1551
  <hr class="pf-c-divider" />
1392
1552
  <section class="pf-c-menu__group">
1393
1553
  <h1 class="pf-c-menu__group-title">Favorites</h1>
1394
- <ul class="pf-c-menu__list">
1395
- <li class="pf-c-menu__list-item">
1396
- <a class="pf-c-menu__item" href="#">
1554
+ <ul class="pf-c-menu__list" role="menu">
1555
+ <li class="pf-c-menu__list-item" role="none">
1556
+ <a
1557
+ class="pf-c-menu__item"
1558
+ href="#"
1559
+ role="menuitem"
1560
+ >
1397
1561
  <span class="pf-c-menu__item-main">
1398
1562
  <span
1399
1563
  class="pf-c-menu__item-text"
@@ -1413,10 +1577,11 @@ wrapperTag: div
1413
1577
  </span>
1414
1578
  </button>
1415
1579
  </li>
1416
- <li class="pf-c-menu__list-item">
1580
+ <li class="pf-c-menu__list-item" role="none">
1417
1581
  <a
1418
1582
  class="pf-c-menu__item"
1419
1583
  href="#"
1584
+ role="menuitem"
1420
1585
  target="_blank"
1421
1586
  >
1422
1587
  <span class="pf-c-menu__item-main">
@@ -1454,9 +1619,13 @@ wrapperTag: div
1454
1619
  <hr class="pf-c-divider" />
1455
1620
  <section class="pf-c-menu__group">
1456
1621
  <h1 class="pf-c-menu__group-title">Group 1</h1>
1457
- <ul class="pf-c-menu__list">
1458
- <li class="pf-c-menu__list-item">
1459
- <a class="pf-c-menu__item" href="#">
1622
+ <ul class="pf-c-menu__list" role="menu">
1623
+ <li class="pf-c-menu__list-item" role="none">
1624
+ <a
1625
+ class="pf-c-menu__item"
1626
+ href="#"
1627
+ role="menuitem"
1628
+ >
1460
1629
  <span class="pf-c-menu__item-main">
1461
1630
  <span
1462
1631
  class="pf-c-menu__item-text"
@@ -1476,10 +1645,11 @@ wrapperTag: div
1476
1645
  </span>
1477
1646
  </button>
1478
1647
  </li>
1479
- <li class="pf-c-menu__list-item">
1648
+ <li class="pf-c-menu__list-item" role="none">
1480
1649
  <a
1481
1650
  class="pf-c-menu__item"
1482
1651
  href="#"
1652
+ role="menuitem"
1483
1653
  target="_blank"
1484
1654
  >
1485
1655
  <span class="pf-c-menu__item-main">
@@ -2044,14 +2214,24 @@ wrapperTag: div
2044
2214
  hidden
2045
2215
  >
2046
2216
  <div class="pf-c-app-launcher__menu-search">
2047
- <input
2048
- class="pf-c-form-control"
2049
- type="search"
2050
- aria-label="Type to filter"
2051
- placeholder="Filter by name..."
2052
- id="page-demo-sticky-top-breadcrumb-masthead-application-launcher-text-input"
2053
- name="textInput1"
2054
- />
2217
+ <div class="pf-c-search-input">
2218
+ <div class="pf-c-search-input__bar">
2219
+ <span class="pf-c-search-input__text">
2220
+ <span class="pf-c-search-input__icon">
2221
+ <i
2222
+ class="fas fa-search fa-fw"
2223
+ aria-hidden="true"
2224
+ ></i>
2225
+ </span>
2226
+ <input
2227
+ class="pf-c-search-input__text-input"
2228
+ type="text"
2229
+ placeholder="Filter by name"
2230
+ aria-label="Filter by name"
2231
+ />
2232
+ </span>
2233
+ </div>
2234
+ </div>
2055
2235
  </div>
2056
2236
  <section class="pf-c-app-launcher__group">
2057
2237
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2241,12 +2421,16 @@ wrapperTag: div
2241
2421
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
2242
2422
  <div class="pf-c-menu__content">
2243
2423
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
2244
- <ul class="pf-c-menu__list">
2245
- <li class="pf-c-menu__list-item pf-m-disabled">
2424
+ <ul class="pf-c-menu__list" role="menu">
2425
+ <li
2426
+ class="pf-c-menu__list-item pf-m-disabled"
2427
+ role="none"
2428
+ >
2246
2429
  <button
2247
2430
  class="pf-c-menu__item"
2248
2431
  type="button"
2249
2432
  disabled
2433
+ role="menuitem"
2250
2434
  >
2251
2435
  <span class="pf-c-menu__item-description">
2252
2436
  <div class="pf-u-font-size-sm">Username:</div>
@@ -2256,11 +2440,15 @@ wrapperTag: div
2256
2440
  </span>
2257
2441
  </button>
2258
2442
  </li>
2259
- <li class="pf-c-menu__list-item pf-m-disabled">
2443
+ <li
2444
+ class="pf-c-menu__list-item pf-m-disabled"
2445
+ role="none"
2446
+ >
2260
2447
  <button
2261
2448
  class="pf-c-menu__item"
2262
2449
  type="button"
2263
2450
  disabled
2451
+ role="menuitem"
2264
2452
  >
2265
2453
  <span class="pf-c-menu__item-description">
2266
2454
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -2269,15 +2457,23 @@ wrapperTag: div
2269
2457
  </button>
2270
2458
  </li>
2271
2459
  <li class="pf-c-divider" role="separator"></li>
2272
- <li class="pf-c-menu__list-item">
2273
- <button class="pf-c-menu__item" type="button">
2460
+ <li class="pf-c-menu__list-item" role="none">
2461
+ <button
2462
+ class="pf-c-menu__item"
2463
+ type="button"
2464
+ role="menuitem"
2465
+ >
2274
2466
  <span class="pf-c-menu__item-main">
2275
2467
  <span class="pf-c-menu__item-text">My profile</span>
2276
2468
  </span>
2277
2469
  </button>
2278
2470
  </li>
2279
- <li class="pf-c-menu__list-item">
2280
- <button class="pf-c-menu__item" type="button">
2471
+ <li class="pf-c-menu__list-item" role="none">
2472
+ <button
2473
+ class="pf-c-menu__item"
2474
+ type="button"
2475
+ role="menuitem"
2476
+ >
2281
2477
  <span class="pf-c-menu__item-main">
2282
2478
  <span
2283
2479
  class="pf-c-menu__item-text"
@@ -2285,8 +2481,12 @@ wrapperTag: div
2285
2481
  </span>
2286
2482
  </button>
2287
2483
  </li>
2288
- <li class="pf-c-menu__list-item">
2289
- <button class="pf-c-menu__item" type="button">
2484
+ <li class="pf-c-menu__list-item" role="none">
2485
+ <button
2486
+ class="pf-c-menu__item"
2487
+ type="button"
2488
+ role="menuitem"
2489
+ >
2290
2490
  <span class="pf-c-menu__item-main">
2291
2491
  <span class="pf-c-menu__item-text">Logout</span>
2292
2492
  </span>
@@ -2296,11 +2496,12 @@ wrapperTag: div
2296
2496
  </section>
2297
2497
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
2298
2498
  <section class="pf-c-menu__group">
2299
- <ul class="pf-c-menu__list">
2300
- <li class="pf-c-menu__list-item">
2499
+ <ul class="pf-c-menu__list" role="menu">
2500
+ <li class="pf-c-menu__list-item" role="none">
2301
2501
  <button
2302
2502
  class="pf-c-menu__item"
2303
2503
  type="button"
2504
+ role="menuitem"
2304
2505
  aria-expanded="false"
2305
2506
  >
2306
2507
  <span class="pf-c-menu__item-main">
@@ -2318,13 +2519,15 @@ wrapperTag: div
2318
2519
  </button>
2319
2520
  <div class="pf-c-menu" hidden>
2320
2521
  <div class="pf-c-menu__content">
2321
- <ul class="pf-c-menu__list">
2522
+ <ul class="pf-c-menu__list" role="menu">
2322
2523
  <li
2323
2524
  class="pf-c-menu__list-item pf-m-drill-up"
2525
+ role="none"
2324
2526
  >
2325
2527
  <button
2326
2528
  class="pf-c-menu__item"
2327
2529
  type="button"
2530
+ role="menuitem"
2328
2531
  >
2329
2532
  <span class="pf-c-menu__item-main">
2330
2533
  <span
@@ -2345,8 +2548,12 @@ wrapperTag: div
2345
2548
  </button>
2346
2549
  </li>
2347
2550
  <li class="pf-c-divider" role="separator"></li>
2348
- <li class="pf-c-menu__list-item">
2349
- <a class="pf-c-menu__item" href="#">
2551
+ <li class="pf-c-menu__list-item" role="none">
2552
+ <a
2553
+ class="pf-c-menu__item"
2554
+ href="#"
2555
+ role="menuitem"
2556
+ >
2350
2557
  <span class="pf-c-menu__item-main">
2351
2558
  <span
2352
2559
  class="pf-c-menu__item-text"
@@ -2354,8 +2561,12 @@ wrapperTag: div
2354
2561
  </span>
2355
2562
  </a>
2356
2563
  </li>
2357
- <li class="pf-c-menu__list-item">
2358
- <a class="pf-c-menu__item" href="#">
2564
+ <li class="pf-c-menu__list-item" role="none">
2565
+ <a
2566
+ class="pf-c-menu__item"
2567
+ href="#"
2568
+ role="menuitem"
2569
+ >
2359
2570
  <span class="pf-c-menu__item-main">
2360
2571
  <span class="pf-c-menu__item-text">About</span>
2361
2572
  </span>
@@ -2366,10 +2577,11 @@ wrapperTag: div
2366
2577
  </div>
2367
2578
  </li>
2368
2579
 
2369
- <li class="pf-c-menu__list-item">
2580
+ <li class="pf-c-menu__list-item" role="none">
2370
2581
  <button
2371
2582
  class="pf-c-menu__item"
2372
2583
  type="button"
2584
+ role="menuitem"
2373
2585
  aria-expanded="false"
2374
2586
  >
2375
2587
  <span class="pf-c-menu__item-main">
@@ -2387,13 +2599,15 @@ wrapperTag: div
2387
2599
  </button>
2388
2600
  <div class="pf-c-menu" hidden>
2389
2601
  <div class="pf-c-menu__content">
2390
- <ul class="pf-c-menu__list">
2602
+ <ul class="pf-c-menu__list" role="menu">
2391
2603
  <li
2392
2604
  class="pf-c-menu__list-item pf-m-drill-up"
2605
+ role="none"
2393
2606
  >
2394
2607
  <button
2395
2608
  class="pf-c-menu__item"
2396
2609
  type="button"
2610
+ role="menuitem"
2397
2611
  >
2398
2612
  <span class="pf-c-menu__item-main">
2399
2613
  <span
@@ -2412,8 +2626,12 @@ wrapperTag: div
2412
2626
  </button>
2413
2627
  </li>
2414
2628
  <li class="pf-c-divider" role="separator"></li>
2415
- <li class="pf-c-menu__list-item">
2416
- <a class="pf-c-menu__item" href="#">
2629
+ <li class="pf-c-menu__list-item" role="none">
2630
+ <a
2631
+ class="pf-c-menu__item"
2632
+ href="#"
2633
+ role="menuitem"
2634
+ >
2417
2635
  <span class="pf-c-menu__item-main">
2418
2636
  <span
2419
2637
  class="pf-c-menu__item-text"
@@ -2421,8 +2639,12 @@ wrapperTag: div
2421
2639
  </span>
2422
2640
  </a>
2423
2641
  </li>
2424
- <li class="pf-c-menu__list-item">
2425
- <a class="pf-c-menu__item" href="#">
2642
+ <li class="pf-c-menu__list-item" role="none">
2643
+ <a
2644
+ class="pf-c-menu__item"
2645
+ href="#"
2646
+ role="menuitem"
2647
+ >
2426
2648
  <span class="pf-c-menu__item-main">
2427
2649
  <span
2428
2650
  class="pf-c-menu__item-text"
@@ -2430,8 +2652,12 @@ wrapperTag: div
2430
2652
  </span>
2431
2653
  </a>
2432
2654
  </li>
2433
- <li class="pf-c-menu__list-item">
2434
- <a class="pf-c-menu__item" href="#">
2655
+ <li class="pf-c-menu__list-item" role="none">
2656
+ <a
2657
+ class="pf-c-menu__item"
2658
+ href="#"
2659
+ role="menuitem"
2660
+ >
2435
2661
  <span class="pf-c-menu__item-main">
2436
2662
  <span
2437
2663
  class="pf-c-menu__item-text"
@@ -2444,8 +2670,12 @@ wrapperTag: div
2444
2670
  </div>
2445
2671
  </li>
2446
2672
 
2447
- <li class="pf-c-menu__list-item">
2448
- <button class="pf-c-menu__item" type="button">
2673
+ <li class="pf-c-menu__list-item" role="none">
2674
+ <button
2675
+ class="pf-c-menu__item"
2676
+ type="button"
2677
+ role="menuitem"
2678
+ >
2449
2679
  <span class="pf-c-menu__item-main">
2450
2680
  <span class="pf-c-menu__item-icon">
2451
2681
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -2460,7 +2690,11 @@ wrapperTag: div
2460
2690
  </button>
2461
2691
  <div class="pf-c-menu" hidden>
2462
2692
  <div class="pf-c-menu__header">
2463
- <button class="pf-c-menu__item" type="button">
2693
+ <button
2694
+ class="pf-c-menu__item"
2695
+ type="button"
2696
+ role="menuitem"
2697
+ >
2464
2698
  <span class="pf-c-menu__item-main">
2465
2699
  <span class="pf-c-menu__item-toggle-icon">
2466
2700
  <i class="fas fa-angle-left"></i>
@@ -2479,21 +2713,36 @@ wrapperTag: div
2479
2713
  </div>
2480
2714
  <div class="pf-c-menu__search">
2481
2715
  <div class="pf-c-menu__search-input">
2482
- <input
2483
- class="pf-c-form-control pf-m-search"
2484
- type="search"
2485
- id="page-demo-sticky-top-breadcrumb-masthead-drilldown-menu-list-3-search-input"
2486
- name="page-demo-sticky-top-breadcrumb-masthead-drilldown-menu-list-3-search-input"
2487
- aria-label="Search"
2488
- />
2716
+ <div class="pf-c-search-input">
2717
+ <div class="pf-c-search-input__bar">
2718
+ <span class="pf-c-search-input__text">
2719
+ <span class="pf-c-search-input__icon">
2720
+ <i
2721
+ class="fas fa-search fa-fw"
2722
+ aria-hidden="true"
2723
+ ></i>
2724
+ </span>
2725
+ <input
2726
+ class="pf-c-search-input__text-input"
2727
+ type="text"
2728
+ placeholder="Search"
2729
+ aria-label="Search"
2730
+ />
2731
+ </span>
2732
+ </div>
2733
+ </div>
2489
2734
  </div>
2490
2735
  </div>
2491
2736
  <hr class="pf-c-divider" />
2492
2737
  <section class="pf-c-menu__group">
2493
2738
  <h1 class="pf-c-menu__group-title">Favorites</h1>
2494
- <ul class="pf-c-menu__list">
2495
- <li class="pf-c-menu__list-item">
2496
- <a class="pf-c-menu__item" href="#">
2739
+ <ul class="pf-c-menu__list" role="menu">
2740
+ <li class="pf-c-menu__list-item" role="none">
2741
+ <a
2742
+ class="pf-c-menu__item"
2743
+ href="#"
2744
+ role="menuitem"
2745
+ >
2497
2746
  <span class="pf-c-menu__item-main">
2498
2747
  <span
2499
2748
  class="pf-c-menu__item-text"
@@ -2513,10 +2762,11 @@ wrapperTag: div
2513
2762
  </span>
2514
2763
  </button>
2515
2764
  </li>
2516
- <li class="pf-c-menu__list-item">
2765
+ <li class="pf-c-menu__list-item" role="none">
2517
2766
  <a
2518
2767
  class="pf-c-menu__item"
2519
2768
  href="#"
2769
+ role="menuitem"
2520
2770
  target="_blank"
2521
2771
  >
2522
2772
  <span class="pf-c-menu__item-main">
@@ -2554,9 +2804,13 @@ wrapperTag: div
2554
2804
  <hr class="pf-c-divider" />
2555
2805
  <section class="pf-c-menu__group">
2556
2806
  <h1 class="pf-c-menu__group-title">Group 1</h1>
2557
- <ul class="pf-c-menu__list">
2558
- <li class="pf-c-menu__list-item">
2559
- <a class="pf-c-menu__item" href="#">
2807
+ <ul class="pf-c-menu__list" role="menu">
2808
+ <li class="pf-c-menu__list-item" role="none">
2809
+ <a
2810
+ class="pf-c-menu__item"
2811
+ href="#"
2812
+ role="menuitem"
2813
+ >
2560
2814
  <span class="pf-c-menu__item-main">
2561
2815
  <span
2562
2816
  class="pf-c-menu__item-text"
@@ -2576,10 +2830,11 @@ wrapperTag: div
2576
2830
  </span>
2577
2831
  </button>
2578
2832
  </li>
2579
- <li class="pf-c-menu__list-item">
2833
+ <li class="pf-c-menu__list-item" role="none">
2580
2834
  <a
2581
2835
  class="pf-c-menu__item"
2582
2836
  href="#"
2837
+ role="menuitem"
2583
2838
  target="_blank"
2584
2839
  >
2585
2840
  <span class="pf-c-menu__item-main">
@@ -3109,14 +3364,24 @@ wrapperTag: div
3109
3364
  hidden
3110
3365
  >
3111
3366
  <div class="pf-c-app-launcher__menu-search">
3112
- <input
3113
- class="pf-c-form-control"
3114
- type="search"
3115
- aria-label="Type to filter"
3116
- placeholder="Filter by name..."
3117
- id="page-demo-sticky-top-section-group-masthead-application-launcher-text-input"
3118
- name="textInput1"
3119
- />
3367
+ <div class="pf-c-search-input">
3368
+ <div class="pf-c-search-input__bar">
3369
+ <span class="pf-c-search-input__text">
3370
+ <span class="pf-c-search-input__icon">
3371
+ <i
3372
+ class="fas fa-search fa-fw"
3373
+ aria-hidden="true"
3374
+ ></i>
3375
+ </span>
3376
+ <input
3377
+ class="pf-c-search-input__text-input"
3378
+ type="text"
3379
+ placeholder="Filter by name"
3380
+ aria-label="Filter by name"
3381
+ />
3382
+ </span>
3383
+ </div>
3384
+ </div>
3120
3385
  </div>
3121
3386
  <section class="pf-c-app-launcher__group">
3122
3387
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -3306,12 +3571,16 @@ wrapperTag: div
3306
3571
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
3307
3572
  <div class="pf-c-menu__content">
3308
3573
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
3309
- <ul class="pf-c-menu__list">
3310
- <li class="pf-c-menu__list-item pf-m-disabled">
3574
+ <ul class="pf-c-menu__list" role="menu">
3575
+ <li
3576
+ class="pf-c-menu__list-item pf-m-disabled"
3577
+ role="none"
3578
+ >
3311
3579
  <button
3312
3580
  class="pf-c-menu__item"
3313
3581
  type="button"
3314
3582
  disabled
3583
+ role="menuitem"
3315
3584
  >
3316
3585
  <span class="pf-c-menu__item-description">
3317
3586
  <div class="pf-u-font-size-sm">Username:</div>
@@ -3321,11 +3590,15 @@ wrapperTag: div
3321
3590
  </span>
3322
3591
  </button>
3323
3592
  </li>
3324
- <li class="pf-c-menu__list-item pf-m-disabled">
3593
+ <li
3594
+ class="pf-c-menu__list-item pf-m-disabled"
3595
+ role="none"
3596
+ >
3325
3597
  <button
3326
3598
  class="pf-c-menu__item"
3327
3599
  type="button"
3328
3600
  disabled
3601
+ role="menuitem"
3329
3602
  >
3330
3603
  <span class="pf-c-menu__item-description">
3331
3604
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -3334,15 +3607,23 @@ wrapperTag: div
3334
3607
  </button>
3335
3608
  </li>
3336
3609
  <li class="pf-c-divider" role="separator"></li>
3337
- <li class="pf-c-menu__list-item">
3338
- <button class="pf-c-menu__item" type="button">
3610
+ <li class="pf-c-menu__list-item" role="none">
3611
+ <button
3612
+ class="pf-c-menu__item"
3613
+ type="button"
3614
+ role="menuitem"
3615
+ >
3339
3616
  <span class="pf-c-menu__item-main">
3340
3617
  <span class="pf-c-menu__item-text">My profile</span>
3341
3618
  </span>
3342
3619
  </button>
3343
3620
  </li>
3344
- <li class="pf-c-menu__list-item">
3345
- <button class="pf-c-menu__item" type="button">
3621
+ <li class="pf-c-menu__list-item" role="none">
3622
+ <button
3623
+ class="pf-c-menu__item"
3624
+ type="button"
3625
+ role="menuitem"
3626
+ >
3346
3627
  <span class="pf-c-menu__item-main">
3347
3628
  <span
3348
3629
  class="pf-c-menu__item-text"
@@ -3350,8 +3631,12 @@ wrapperTag: div
3350
3631
  </span>
3351
3632
  </button>
3352
3633
  </li>
3353
- <li class="pf-c-menu__list-item">
3354
- <button class="pf-c-menu__item" type="button">
3634
+ <li class="pf-c-menu__list-item" role="none">
3635
+ <button
3636
+ class="pf-c-menu__item"
3637
+ type="button"
3638
+ role="menuitem"
3639
+ >
3355
3640
  <span class="pf-c-menu__item-main">
3356
3641
  <span class="pf-c-menu__item-text">Logout</span>
3357
3642
  </span>
@@ -3361,11 +3646,12 @@ wrapperTag: div
3361
3646
  </section>
3362
3647
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
3363
3648
  <section class="pf-c-menu__group">
3364
- <ul class="pf-c-menu__list">
3365
- <li class="pf-c-menu__list-item">
3649
+ <ul class="pf-c-menu__list" role="menu">
3650
+ <li class="pf-c-menu__list-item" role="none">
3366
3651
  <button
3367
3652
  class="pf-c-menu__item"
3368
3653
  type="button"
3654
+ role="menuitem"
3369
3655
  aria-expanded="false"
3370
3656
  >
3371
3657
  <span class="pf-c-menu__item-main">
@@ -3383,13 +3669,15 @@ wrapperTag: div
3383
3669
  </button>
3384
3670
  <div class="pf-c-menu" hidden>
3385
3671
  <div class="pf-c-menu__content">
3386
- <ul class="pf-c-menu__list">
3672
+ <ul class="pf-c-menu__list" role="menu">
3387
3673
  <li
3388
3674
  class="pf-c-menu__list-item pf-m-drill-up"
3675
+ role="none"
3389
3676
  >
3390
3677
  <button
3391
3678
  class="pf-c-menu__item"
3392
3679
  type="button"
3680
+ role="menuitem"
3393
3681
  >
3394
3682
  <span class="pf-c-menu__item-main">
3395
3683
  <span
@@ -3410,8 +3698,12 @@ wrapperTag: div
3410
3698
  </button>
3411
3699
  </li>
3412
3700
  <li class="pf-c-divider" role="separator"></li>
3413
- <li class="pf-c-menu__list-item">
3414
- <a class="pf-c-menu__item" href="#">
3701
+ <li class="pf-c-menu__list-item" role="none">
3702
+ <a
3703
+ class="pf-c-menu__item"
3704
+ href="#"
3705
+ role="menuitem"
3706
+ >
3415
3707
  <span class="pf-c-menu__item-main">
3416
3708
  <span
3417
3709
  class="pf-c-menu__item-text"
@@ -3419,8 +3711,12 @@ wrapperTag: div
3419
3711
  </span>
3420
3712
  </a>
3421
3713
  </li>
3422
- <li class="pf-c-menu__list-item">
3423
- <a class="pf-c-menu__item" href="#">
3714
+ <li class="pf-c-menu__list-item" role="none">
3715
+ <a
3716
+ class="pf-c-menu__item"
3717
+ href="#"
3718
+ role="menuitem"
3719
+ >
3424
3720
  <span class="pf-c-menu__item-main">
3425
3721
  <span class="pf-c-menu__item-text">About</span>
3426
3722
  </span>
@@ -3431,10 +3727,11 @@ wrapperTag: div
3431
3727
  </div>
3432
3728
  </li>
3433
3729
 
3434
- <li class="pf-c-menu__list-item">
3730
+ <li class="pf-c-menu__list-item" role="none">
3435
3731
  <button
3436
3732
  class="pf-c-menu__item"
3437
3733
  type="button"
3734
+ role="menuitem"
3438
3735
  aria-expanded="false"
3439
3736
  >
3440
3737
  <span class="pf-c-menu__item-main">
@@ -3452,13 +3749,15 @@ wrapperTag: div
3452
3749
  </button>
3453
3750
  <div class="pf-c-menu" hidden>
3454
3751
  <div class="pf-c-menu__content">
3455
- <ul class="pf-c-menu__list">
3752
+ <ul class="pf-c-menu__list" role="menu">
3456
3753
  <li
3457
3754
  class="pf-c-menu__list-item pf-m-drill-up"
3755
+ role="none"
3458
3756
  >
3459
3757
  <button
3460
3758
  class="pf-c-menu__item"
3461
3759
  type="button"
3760
+ role="menuitem"
3462
3761
  >
3463
3762
  <span class="pf-c-menu__item-main">
3464
3763
  <span
@@ -3477,8 +3776,12 @@ wrapperTag: div
3477
3776
  </button>
3478
3777
  </li>
3479
3778
  <li class="pf-c-divider" role="separator"></li>
3480
- <li class="pf-c-menu__list-item">
3481
- <a class="pf-c-menu__item" href="#">
3779
+ <li class="pf-c-menu__list-item" role="none">
3780
+ <a
3781
+ class="pf-c-menu__item"
3782
+ href="#"
3783
+ role="menuitem"
3784
+ >
3482
3785
  <span class="pf-c-menu__item-main">
3483
3786
  <span
3484
3787
  class="pf-c-menu__item-text"
@@ -3486,8 +3789,12 @@ wrapperTag: div
3486
3789
  </span>
3487
3790
  </a>
3488
3791
  </li>
3489
- <li class="pf-c-menu__list-item">
3490
- <a class="pf-c-menu__item" href="#">
3792
+ <li class="pf-c-menu__list-item" role="none">
3793
+ <a
3794
+ class="pf-c-menu__item"
3795
+ href="#"
3796
+ role="menuitem"
3797
+ >
3491
3798
  <span class="pf-c-menu__item-main">
3492
3799
  <span
3493
3800
  class="pf-c-menu__item-text"
@@ -3495,8 +3802,12 @@ wrapperTag: div
3495
3802
  </span>
3496
3803
  </a>
3497
3804
  </li>
3498
- <li class="pf-c-menu__list-item">
3499
- <a class="pf-c-menu__item" href="#">
3805
+ <li class="pf-c-menu__list-item" role="none">
3806
+ <a
3807
+ class="pf-c-menu__item"
3808
+ href="#"
3809
+ role="menuitem"
3810
+ >
3500
3811
  <span class="pf-c-menu__item-main">
3501
3812
  <span
3502
3813
  class="pf-c-menu__item-text"
@@ -3509,8 +3820,12 @@ wrapperTag: div
3509
3820
  </div>
3510
3821
  </li>
3511
3822
 
3512
- <li class="pf-c-menu__list-item">
3513
- <button class="pf-c-menu__item" type="button">
3823
+ <li class="pf-c-menu__list-item" role="none">
3824
+ <button
3825
+ class="pf-c-menu__item"
3826
+ type="button"
3827
+ role="menuitem"
3828
+ >
3514
3829
  <span class="pf-c-menu__item-main">
3515
3830
  <span class="pf-c-menu__item-icon">
3516
3831
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -3525,7 +3840,11 @@ wrapperTag: div
3525
3840
  </button>
3526
3841
  <div class="pf-c-menu" hidden>
3527
3842
  <div class="pf-c-menu__header">
3528
- <button class="pf-c-menu__item" type="button">
3843
+ <button
3844
+ class="pf-c-menu__item"
3845
+ type="button"
3846
+ role="menuitem"
3847
+ >
3529
3848
  <span class="pf-c-menu__item-main">
3530
3849
  <span class="pf-c-menu__item-toggle-icon">
3531
3850
  <i class="fas fa-angle-left"></i>
@@ -3544,21 +3863,36 @@ wrapperTag: div
3544
3863
  </div>
3545
3864
  <div class="pf-c-menu__search">
3546
3865
  <div class="pf-c-menu__search-input">
3547
- <input
3548
- class="pf-c-form-control pf-m-search"
3549
- type="search"
3550
- id="page-demo-sticky-top-section-group-masthead-drilldown-menu-list-3-search-input"
3551
- name="page-demo-sticky-top-section-group-masthead-drilldown-menu-list-3-search-input"
3552
- aria-label="Search"
3553
- />
3866
+ <div class="pf-c-search-input">
3867
+ <div class="pf-c-search-input__bar">
3868
+ <span class="pf-c-search-input__text">
3869
+ <span class="pf-c-search-input__icon">
3870
+ <i
3871
+ class="fas fa-search fa-fw"
3872
+ aria-hidden="true"
3873
+ ></i>
3874
+ </span>
3875
+ <input
3876
+ class="pf-c-search-input__text-input"
3877
+ type="text"
3878
+ placeholder="Search"
3879
+ aria-label="Search"
3880
+ />
3881
+ </span>
3882
+ </div>
3883
+ </div>
3554
3884
  </div>
3555
3885
  </div>
3556
3886
  <hr class="pf-c-divider" />
3557
3887
  <section class="pf-c-menu__group">
3558
3888
  <h1 class="pf-c-menu__group-title">Favorites</h1>
3559
- <ul class="pf-c-menu__list">
3560
- <li class="pf-c-menu__list-item">
3561
- <a class="pf-c-menu__item" href="#">
3889
+ <ul class="pf-c-menu__list" role="menu">
3890
+ <li class="pf-c-menu__list-item" role="none">
3891
+ <a
3892
+ class="pf-c-menu__item"
3893
+ href="#"
3894
+ role="menuitem"
3895
+ >
3562
3896
  <span class="pf-c-menu__item-main">
3563
3897
  <span
3564
3898
  class="pf-c-menu__item-text"
@@ -3578,10 +3912,11 @@ wrapperTag: div
3578
3912
  </span>
3579
3913
  </button>
3580
3914
  </li>
3581
- <li class="pf-c-menu__list-item">
3915
+ <li class="pf-c-menu__list-item" role="none">
3582
3916
  <a
3583
3917
  class="pf-c-menu__item"
3584
3918
  href="#"
3919
+ role="menuitem"
3585
3920
  target="_blank"
3586
3921
  >
3587
3922
  <span class="pf-c-menu__item-main">
@@ -3619,9 +3954,13 @@ wrapperTag: div
3619
3954
  <hr class="pf-c-divider" />
3620
3955
  <section class="pf-c-menu__group">
3621
3956
  <h1 class="pf-c-menu__group-title">Group 1</h1>
3622
- <ul class="pf-c-menu__list">
3623
- <li class="pf-c-menu__list-item">
3624
- <a class="pf-c-menu__item" href="#">
3957
+ <ul class="pf-c-menu__list" role="menu">
3958
+ <li class="pf-c-menu__list-item" role="none">
3959
+ <a
3960
+ class="pf-c-menu__item"
3961
+ href="#"
3962
+ role="menuitem"
3963
+ >
3625
3964
  <span class="pf-c-menu__item-main">
3626
3965
  <span
3627
3966
  class="pf-c-menu__item-text"
@@ -3641,10 +3980,11 @@ wrapperTag: div
3641
3980
  </span>
3642
3981
  </button>
3643
3982
  </li>
3644
- <li class="pf-c-menu__list-item">
3983
+ <li class="pf-c-menu__list-item" role="none">
3645
3984
  <a
3646
3985
  class="pf-c-menu__item"
3647
3986
  href="#"
3987
+ role="menuitem"
3648
3988
  target="_blank"
3649
3989
  >
3650
3990
  <span class="pf-c-menu__item-main">
@@ -4171,14 +4511,24 @@ wrapperTag: div
4171
4511
  hidden
4172
4512
  >
4173
4513
  <div class="pf-c-app-launcher__menu-search">
4174
- <input
4175
- class="pf-c-form-control"
4176
- type="search"
4177
- aria-label="Type to filter"
4178
- placeholder="Filter by name..."
4179
- id="page-demo-sticky-section-bottom-masthead-application-launcher-text-input"
4180
- name="textInput1"
4181
- />
4514
+ <div class="pf-c-search-input">
4515
+ <div class="pf-c-search-input__bar">
4516
+ <span class="pf-c-search-input__text">
4517
+ <span class="pf-c-search-input__icon">
4518
+ <i
4519
+ class="fas fa-search fa-fw"
4520
+ aria-hidden="true"
4521
+ ></i>
4522
+ </span>
4523
+ <input
4524
+ class="pf-c-search-input__text-input"
4525
+ type="text"
4526
+ placeholder="Filter by name"
4527
+ aria-label="Filter by name"
4528
+ />
4529
+ </span>
4530
+ </div>
4531
+ </div>
4182
4532
  </div>
4183
4533
  <section class="pf-c-app-launcher__group">
4184
4534
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -4368,12 +4718,16 @@ wrapperTag: div
4368
4718
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
4369
4719
  <div class="pf-c-menu__content">
4370
4720
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
4371
- <ul class="pf-c-menu__list">
4372
- <li class="pf-c-menu__list-item pf-m-disabled">
4721
+ <ul class="pf-c-menu__list" role="menu">
4722
+ <li
4723
+ class="pf-c-menu__list-item pf-m-disabled"
4724
+ role="none"
4725
+ >
4373
4726
  <button
4374
4727
  class="pf-c-menu__item"
4375
4728
  type="button"
4376
4729
  disabled
4730
+ role="menuitem"
4377
4731
  >
4378
4732
  <span class="pf-c-menu__item-description">
4379
4733
  <div class="pf-u-font-size-sm">Username:</div>
@@ -4383,11 +4737,15 @@ wrapperTag: div
4383
4737
  </span>
4384
4738
  </button>
4385
4739
  </li>
4386
- <li class="pf-c-menu__list-item pf-m-disabled">
4740
+ <li
4741
+ class="pf-c-menu__list-item pf-m-disabled"
4742
+ role="none"
4743
+ >
4387
4744
  <button
4388
4745
  class="pf-c-menu__item"
4389
4746
  type="button"
4390
4747
  disabled
4748
+ role="menuitem"
4391
4749
  >
4392
4750
  <span class="pf-c-menu__item-description">
4393
4751
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -4396,15 +4754,23 @@ wrapperTag: div
4396
4754
  </button>
4397
4755
  </li>
4398
4756
  <li class="pf-c-divider" role="separator"></li>
4399
- <li class="pf-c-menu__list-item">
4400
- <button class="pf-c-menu__item" type="button">
4757
+ <li class="pf-c-menu__list-item" role="none">
4758
+ <button
4759
+ class="pf-c-menu__item"
4760
+ type="button"
4761
+ role="menuitem"
4762
+ >
4401
4763
  <span class="pf-c-menu__item-main">
4402
4764
  <span class="pf-c-menu__item-text">My profile</span>
4403
4765
  </span>
4404
4766
  </button>
4405
4767
  </li>
4406
- <li class="pf-c-menu__list-item">
4407
- <button class="pf-c-menu__item" type="button">
4768
+ <li class="pf-c-menu__list-item" role="none">
4769
+ <button
4770
+ class="pf-c-menu__item"
4771
+ type="button"
4772
+ role="menuitem"
4773
+ >
4408
4774
  <span class="pf-c-menu__item-main">
4409
4775
  <span
4410
4776
  class="pf-c-menu__item-text"
@@ -4412,8 +4778,12 @@ wrapperTag: div
4412
4778
  </span>
4413
4779
  </button>
4414
4780
  </li>
4415
- <li class="pf-c-menu__list-item">
4416
- <button class="pf-c-menu__item" type="button">
4781
+ <li class="pf-c-menu__list-item" role="none">
4782
+ <button
4783
+ class="pf-c-menu__item"
4784
+ type="button"
4785
+ role="menuitem"
4786
+ >
4417
4787
  <span class="pf-c-menu__item-main">
4418
4788
  <span class="pf-c-menu__item-text">Logout</span>
4419
4789
  </span>
@@ -4423,11 +4793,12 @@ wrapperTag: div
4423
4793
  </section>
4424
4794
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
4425
4795
  <section class="pf-c-menu__group">
4426
- <ul class="pf-c-menu__list">
4427
- <li class="pf-c-menu__list-item">
4796
+ <ul class="pf-c-menu__list" role="menu">
4797
+ <li class="pf-c-menu__list-item" role="none">
4428
4798
  <button
4429
4799
  class="pf-c-menu__item"
4430
4800
  type="button"
4801
+ role="menuitem"
4431
4802
  aria-expanded="false"
4432
4803
  >
4433
4804
  <span class="pf-c-menu__item-main">
@@ -4445,13 +4816,15 @@ wrapperTag: div
4445
4816
  </button>
4446
4817
  <div class="pf-c-menu" hidden>
4447
4818
  <div class="pf-c-menu__content">
4448
- <ul class="pf-c-menu__list">
4819
+ <ul class="pf-c-menu__list" role="menu">
4449
4820
  <li
4450
4821
  class="pf-c-menu__list-item pf-m-drill-up"
4822
+ role="none"
4451
4823
  >
4452
4824
  <button
4453
4825
  class="pf-c-menu__item"
4454
4826
  type="button"
4827
+ role="menuitem"
4455
4828
  >
4456
4829
  <span class="pf-c-menu__item-main">
4457
4830
  <span
@@ -4472,8 +4845,12 @@ wrapperTag: div
4472
4845
  </button>
4473
4846
  </li>
4474
4847
  <li class="pf-c-divider" role="separator"></li>
4475
- <li class="pf-c-menu__list-item">
4476
- <a class="pf-c-menu__item" href="#">
4848
+ <li class="pf-c-menu__list-item" role="none">
4849
+ <a
4850
+ class="pf-c-menu__item"
4851
+ href="#"
4852
+ role="menuitem"
4853
+ >
4477
4854
  <span class="pf-c-menu__item-main">
4478
4855
  <span
4479
4856
  class="pf-c-menu__item-text"
@@ -4481,8 +4858,12 @@ wrapperTag: div
4481
4858
  </span>
4482
4859
  </a>
4483
4860
  </li>
4484
- <li class="pf-c-menu__list-item">
4485
- <a class="pf-c-menu__item" href="#">
4861
+ <li class="pf-c-menu__list-item" role="none">
4862
+ <a
4863
+ class="pf-c-menu__item"
4864
+ href="#"
4865
+ role="menuitem"
4866
+ >
4486
4867
  <span class="pf-c-menu__item-main">
4487
4868
  <span class="pf-c-menu__item-text">About</span>
4488
4869
  </span>
@@ -4493,10 +4874,11 @@ wrapperTag: div
4493
4874
  </div>
4494
4875
  </li>
4495
4876
 
4496
- <li class="pf-c-menu__list-item">
4877
+ <li class="pf-c-menu__list-item" role="none">
4497
4878
  <button
4498
4879
  class="pf-c-menu__item"
4499
4880
  type="button"
4881
+ role="menuitem"
4500
4882
  aria-expanded="false"
4501
4883
  >
4502
4884
  <span class="pf-c-menu__item-main">
@@ -4514,13 +4896,15 @@ wrapperTag: div
4514
4896
  </button>
4515
4897
  <div class="pf-c-menu" hidden>
4516
4898
  <div class="pf-c-menu__content">
4517
- <ul class="pf-c-menu__list">
4899
+ <ul class="pf-c-menu__list" role="menu">
4518
4900
  <li
4519
4901
  class="pf-c-menu__list-item pf-m-drill-up"
4902
+ role="none"
4520
4903
  >
4521
4904
  <button
4522
4905
  class="pf-c-menu__item"
4523
4906
  type="button"
4907
+ role="menuitem"
4524
4908
  >
4525
4909
  <span class="pf-c-menu__item-main">
4526
4910
  <span
@@ -4539,8 +4923,12 @@ wrapperTag: div
4539
4923
  </button>
4540
4924
  </li>
4541
4925
  <li class="pf-c-divider" role="separator"></li>
4542
- <li class="pf-c-menu__list-item">
4543
- <a class="pf-c-menu__item" href="#">
4926
+ <li class="pf-c-menu__list-item" role="none">
4927
+ <a
4928
+ class="pf-c-menu__item"
4929
+ href="#"
4930
+ role="menuitem"
4931
+ >
4544
4932
  <span class="pf-c-menu__item-main">
4545
4933
  <span
4546
4934
  class="pf-c-menu__item-text"
@@ -4548,8 +4936,12 @@ wrapperTag: div
4548
4936
  </span>
4549
4937
  </a>
4550
4938
  </li>
4551
- <li class="pf-c-menu__list-item">
4552
- <a class="pf-c-menu__item" href="#">
4939
+ <li class="pf-c-menu__list-item" role="none">
4940
+ <a
4941
+ class="pf-c-menu__item"
4942
+ href="#"
4943
+ role="menuitem"
4944
+ >
4553
4945
  <span class="pf-c-menu__item-main">
4554
4946
  <span
4555
4947
  class="pf-c-menu__item-text"
@@ -4557,8 +4949,12 @@ wrapperTag: div
4557
4949
  </span>
4558
4950
  </a>
4559
4951
  </li>
4560
- <li class="pf-c-menu__list-item">
4561
- <a class="pf-c-menu__item" href="#">
4952
+ <li class="pf-c-menu__list-item" role="none">
4953
+ <a
4954
+ class="pf-c-menu__item"
4955
+ href="#"
4956
+ role="menuitem"
4957
+ >
4562
4958
  <span class="pf-c-menu__item-main">
4563
4959
  <span
4564
4960
  class="pf-c-menu__item-text"
@@ -4571,8 +4967,12 @@ wrapperTag: div
4571
4967
  </div>
4572
4968
  </li>
4573
4969
 
4574
- <li class="pf-c-menu__list-item">
4575
- <button class="pf-c-menu__item" type="button">
4970
+ <li class="pf-c-menu__list-item" role="none">
4971
+ <button
4972
+ class="pf-c-menu__item"
4973
+ type="button"
4974
+ role="menuitem"
4975
+ >
4576
4976
  <span class="pf-c-menu__item-main">
4577
4977
  <span class="pf-c-menu__item-icon">
4578
4978
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -4587,7 +4987,11 @@ wrapperTag: div
4587
4987
  </button>
4588
4988
  <div class="pf-c-menu" hidden>
4589
4989
  <div class="pf-c-menu__header">
4590
- <button class="pf-c-menu__item" type="button">
4990
+ <button
4991
+ class="pf-c-menu__item"
4992
+ type="button"
4993
+ role="menuitem"
4994
+ >
4591
4995
  <span class="pf-c-menu__item-main">
4592
4996
  <span class="pf-c-menu__item-toggle-icon">
4593
4997
  <i class="fas fa-angle-left"></i>
@@ -4606,21 +5010,36 @@ wrapperTag: div
4606
5010
  </div>
4607
5011
  <div class="pf-c-menu__search">
4608
5012
  <div class="pf-c-menu__search-input">
4609
- <input
4610
- class="pf-c-form-control pf-m-search"
4611
- type="search"
4612
- id="page-demo-sticky-section-bottom-masthead-drilldown-menu-list-3-search-input"
4613
- name="page-demo-sticky-section-bottom-masthead-drilldown-menu-list-3-search-input"
4614
- aria-label="Search"
4615
- />
5013
+ <div class="pf-c-search-input">
5014
+ <div class="pf-c-search-input__bar">
5015
+ <span class="pf-c-search-input__text">
5016
+ <span class="pf-c-search-input__icon">
5017
+ <i
5018
+ class="fas fa-search fa-fw"
5019
+ aria-hidden="true"
5020
+ ></i>
5021
+ </span>
5022
+ <input
5023
+ class="pf-c-search-input__text-input"
5024
+ type="text"
5025
+ placeholder="Search"
5026
+ aria-label="Search"
5027
+ />
5028
+ </span>
5029
+ </div>
5030
+ </div>
4616
5031
  </div>
4617
5032
  </div>
4618
5033
  <hr class="pf-c-divider" />
4619
5034
  <section class="pf-c-menu__group">
4620
5035
  <h1 class="pf-c-menu__group-title">Favorites</h1>
4621
- <ul class="pf-c-menu__list">
4622
- <li class="pf-c-menu__list-item">
4623
- <a class="pf-c-menu__item" href="#">
5036
+ <ul class="pf-c-menu__list" role="menu">
5037
+ <li class="pf-c-menu__list-item" role="none">
5038
+ <a
5039
+ class="pf-c-menu__item"
5040
+ href="#"
5041
+ role="menuitem"
5042
+ >
4624
5043
  <span class="pf-c-menu__item-main">
4625
5044
  <span
4626
5045
  class="pf-c-menu__item-text"
@@ -4640,10 +5059,11 @@ wrapperTag: div
4640
5059
  </span>
4641
5060
  </button>
4642
5061
  </li>
4643
- <li class="pf-c-menu__list-item">
5062
+ <li class="pf-c-menu__list-item" role="none">
4644
5063
  <a
4645
5064
  class="pf-c-menu__item"
4646
5065
  href="#"
5066
+ role="menuitem"
4647
5067
  target="_blank"
4648
5068
  >
4649
5069
  <span class="pf-c-menu__item-main">
@@ -4681,9 +5101,13 @@ wrapperTag: div
4681
5101
  <hr class="pf-c-divider" />
4682
5102
  <section class="pf-c-menu__group">
4683
5103
  <h1 class="pf-c-menu__group-title">Group 1</h1>
4684
- <ul class="pf-c-menu__list">
4685
- <li class="pf-c-menu__list-item">
4686
- <a class="pf-c-menu__item" href="#">
5104
+ <ul class="pf-c-menu__list" role="menu">
5105
+ <li class="pf-c-menu__list-item" role="none">
5106
+ <a
5107
+ class="pf-c-menu__item"
5108
+ href="#"
5109
+ role="menuitem"
5110
+ >
4687
5111
  <span class="pf-c-menu__item-main">
4688
5112
  <span
4689
5113
  class="pf-c-menu__item-text"
@@ -4703,10 +5127,11 @@ wrapperTag: div
4703
5127
  </span>
4704
5128
  </button>
4705
5129
  </li>
4706
- <li class="pf-c-menu__list-item">
5130
+ <li class="pf-c-menu__list-item" role="none">
4707
5131
  <a
4708
5132
  class="pf-c-menu__item"
4709
5133
  href="#"
5134
+ role="menuitem"
4710
5135
  target="_blank"
4711
5136
  >
4712
5137
  <span class="pf-c-menu__item-main">
@@ -5238,14 +5663,24 @@ wrapperTag: div
5238
5663
  hidden
5239
5664
  >
5240
5665
  <div class="pf-c-app-launcher__menu-search">
5241
- <input
5242
- class="pf-c-form-control"
5243
- type="search"
5244
- aria-label="Type to filter"
5245
- placeholder="Filter by name..."
5246
- id="page-demo-overflow-scroll-masthead-application-launcher-text-input"
5247
- name="textInput1"
5248
- />
5666
+ <div class="pf-c-search-input">
5667
+ <div class="pf-c-search-input__bar">
5668
+ <span class="pf-c-search-input__text">
5669
+ <span class="pf-c-search-input__icon">
5670
+ <i
5671
+ class="fas fa-search fa-fw"
5672
+ aria-hidden="true"
5673
+ ></i>
5674
+ </span>
5675
+ <input
5676
+ class="pf-c-search-input__text-input"
5677
+ type="text"
5678
+ placeholder="Filter by name"
5679
+ aria-label="Filter by name"
5680
+ />
5681
+ </span>
5682
+ </div>
5683
+ </div>
5249
5684
  </div>
5250
5685
  <section class="pf-c-app-launcher__group">
5251
5686
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -5435,12 +5870,16 @@ wrapperTag: div
5435
5870
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
5436
5871
  <div class="pf-c-menu__content">
5437
5872
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
5438
- <ul class="pf-c-menu__list">
5439
- <li class="pf-c-menu__list-item pf-m-disabled">
5873
+ <ul class="pf-c-menu__list" role="menu">
5874
+ <li
5875
+ class="pf-c-menu__list-item pf-m-disabled"
5876
+ role="none"
5877
+ >
5440
5878
  <button
5441
5879
  class="pf-c-menu__item"
5442
5880
  type="button"
5443
5881
  disabled
5882
+ role="menuitem"
5444
5883
  >
5445
5884
  <span class="pf-c-menu__item-description">
5446
5885
  <div class="pf-u-font-size-sm">Username:</div>
@@ -5450,11 +5889,15 @@ wrapperTag: div
5450
5889
  </span>
5451
5890
  </button>
5452
5891
  </li>
5453
- <li class="pf-c-menu__list-item pf-m-disabled">
5892
+ <li
5893
+ class="pf-c-menu__list-item pf-m-disabled"
5894
+ role="none"
5895
+ >
5454
5896
  <button
5455
5897
  class="pf-c-menu__item"
5456
5898
  type="button"
5457
5899
  disabled
5900
+ role="menuitem"
5458
5901
  >
5459
5902
  <span class="pf-c-menu__item-description">
5460
5903
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -5463,15 +5906,23 @@ wrapperTag: div
5463
5906
  </button>
5464
5907
  </li>
5465
5908
  <li class="pf-c-divider" role="separator"></li>
5466
- <li class="pf-c-menu__list-item">
5467
- <button class="pf-c-menu__item" type="button">
5909
+ <li class="pf-c-menu__list-item" role="none">
5910
+ <button
5911
+ class="pf-c-menu__item"
5912
+ type="button"
5913
+ role="menuitem"
5914
+ >
5468
5915
  <span class="pf-c-menu__item-main">
5469
5916
  <span class="pf-c-menu__item-text">My profile</span>
5470
5917
  </span>
5471
5918
  </button>
5472
5919
  </li>
5473
- <li class="pf-c-menu__list-item">
5474
- <button class="pf-c-menu__item" type="button">
5920
+ <li class="pf-c-menu__list-item" role="none">
5921
+ <button
5922
+ class="pf-c-menu__item"
5923
+ type="button"
5924
+ role="menuitem"
5925
+ >
5475
5926
  <span class="pf-c-menu__item-main">
5476
5927
  <span
5477
5928
  class="pf-c-menu__item-text"
@@ -5479,8 +5930,12 @@ wrapperTag: div
5479
5930
  </span>
5480
5931
  </button>
5481
5932
  </li>
5482
- <li class="pf-c-menu__list-item">
5483
- <button class="pf-c-menu__item" type="button">
5933
+ <li class="pf-c-menu__list-item" role="none">
5934
+ <button
5935
+ class="pf-c-menu__item"
5936
+ type="button"
5937
+ role="menuitem"
5938
+ >
5484
5939
  <span class="pf-c-menu__item-main">
5485
5940
  <span class="pf-c-menu__item-text">Logout</span>
5486
5941
  </span>
@@ -5490,11 +5945,12 @@ wrapperTag: div
5490
5945
  </section>
5491
5946
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
5492
5947
  <section class="pf-c-menu__group">
5493
- <ul class="pf-c-menu__list">
5494
- <li class="pf-c-menu__list-item">
5948
+ <ul class="pf-c-menu__list" role="menu">
5949
+ <li class="pf-c-menu__list-item" role="none">
5495
5950
  <button
5496
5951
  class="pf-c-menu__item"
5497
5952
  type="button"
5953
+ role="menuitem"
5498
5954
  aria-expanded="false"
5499
5955
  >
5500
5956
  <span class="pf-c-menu__item-main">
@@ -5512,13 +5968,15 @@ wrapperTag: div
5512
5968
  </button>
5513
5969
  <div class="pf-c-menu" hidden>
5514
5970
  <div class="pf-c-menu__content">
5515
- <ul class="pf-c-menu__list">
5971
+ <ul class="pf-c-menu__list" role="menu">
5516
5972
  <li
5517
5973
  class="pf-c-menu__list-item pf-m-drill-up"
5974
+ role="none"
5518
5975
  >
5519
5976
  <button
5520
5977
  class="pf-c-menu__item"
5521
5978
  type="button"
5979
+ role="menuitem"
5522
5980
  >
5523
5981
  <span class="pf-c-menu__item-main">
5524
5982
  <span
@@ -5539,8 +5997,12 @@ wrapperTag: div
5539
5997
  </button>
5540
5998
  </li>
5541
5999
  <li class="pf-c-divider" role="separator"></li>
5542
- <li class="pf-c-menu__list-item">
5543
- <a class="pf-c-menu__item" href="#">
6000
+ <li class="pf-c-menu__list-item" role="none">
6001
+ <a
6002
+ class="pf-c-menu__item"
6003
+ href="#"
6004
+ role="menuitem"
6005
+ >
5544
6006
  <span class="pf-c-menu__item-main">
5545
6007
  <span
5546
6008
  class="pf-c-menu__item-text"
@@ -5548,8 +6010,12 @@ wrapperTag: div
5548
6010
  </span>
5549
6011
  </a>
5550
6012
  </li>
5551
- <li class="pf-c-menu__list-item">
5552
- <a class="pf-c-menu__item" href="#">
6013
+ <li class="pf-c-menu__list-item" role="none">
6014
+ <a
6015
+ class="pf-c-menu__item"
6016
+ href="#"
6017
+ role="menuitem"
6018
+ >
5553
6019
  <span class="pf-c-menu__item-main">
5554
6020
  <span class="pf-c-menu__item-text">About</span>
5555
6021
  </span>
@@ -5560,10 +6026,11 @@ wrapperTag: div
5560
6026
  </div>
5561
6027
  </li>
5562
6028
 
5563
- <li class="pf-c-menu__list-item">
6029
+ <li class="pf-c-menu__list-item" role="none">
5564
6030
  <button
5565
6031
  class="pf-c-menu__item"
5566
6032
  type="button"
6033
+ role="menuitem"
5567
6034
  aria-expanded="false"
5568
6035
  >
5569
6036
  <span class="pf-c-menu__item-main">
@@ -5581,13 +6048,15 @@ wrapperTag: div
5581
6048
  </button>
5582
6049
  <div class="pf-c-menu" hidden>
5583
6050
  <div class="pf-c-menu__content">
5584
- <ul class="pf-c-menu__list">
6051
+ <ul class="pf-c-menu__list" role="menu">
5585
6052
  <li
5586
6053
  class="pf-c-menu__list-item pf-m-drill-up"
6054
+ role="none"
5587
6055
  >
5588
6056
  <button
5589
6057
  class="pf-c-menu__item"
5590
6058
  type="button"
6059
+ role="menuitem"
5591
6060
  >
5592
6061
  <span class="pf-c-menu__item-main">
5593
6062
  <span
@@ -5606,8 +6075,12 @@ wrapperTag: div
5606
6075
  </button>
5607
6076
  </li>
5608
6077
  <li class="pf-c-divider" role="separator"></li>
5609
- <li class="pf-c-menu__list-item">
5610
- <a class="pf-c-menu__item" href="#">
6078
+ <li class="pf-c-menu__list-item" role="none">
6079
+ <a
6080
+ class="pf-c-menu__item"
6081
+ href="#"
6082
+ role="menuitem"
6083
+ >
5611
6084
  <span class="pf-c-menu__item-main">
5612
6085
  <span
5613
6086
  class="pf-c-menu__item-text"
@@ -5615,8 +6088,12 @@ wrapperTag: div
5615
6088
  </span>
5616
6089
  </a>
5617
6090
  </li>
5618
- <li class="pf-c-menu__list-item">
5619
- <a class="pf-c-menu__item" href="#">
6091
+ <li class="pf-c-menu__list-item" role="none">
6092
+ <a
6093
+ class="pf-c-menu__item"
6094
+ href="#"
6095
+ role="menuitem"
6096
+ >
5620
6097
  <span class="pf-c-menu__item-main">
5621
6098
  <span
5622
6099
  class="pf-c-menu__item-text"
@@ -5624,8 +6101,12 @@ wrapperTag: div
5624
6101
  </span>
5625
6102
  </a>
5626
6103
  </li>
5627
- <li class="pf-c-menu__list-item">
5628
- <a class="pf-c-menu__item" href="#">
6104
+ <li class="pf-c-menu__list-item" role="none">
6105
+ <a
6106
+ class="pf-c-menu__item"
6107
+ href="#"
6108
+ role="menuitem"
6109
+ >
5629
6110
  <span class="pf-c-menu__item-main">
5630
6111
  <span
5631
6112
  class="pf-c-menu__item-text"
@@ -5638,8 +6119,12 @@ wrapperTag: div
5638
6119
  </div>
5639
6120
  </li>
5640
6121
 
5641
- <li class="pf-c-menu__list-item">
5642
- <button class="pf-c-menu__item" type="button">
6122
+ <li class="pf-c-menu__list-item" role="none">
6123
+ <button
6124
+ class="pf-c-menu__item"
6125
+ type="button"
6126
+ role="menuitem"
6127
+ >
5643
6128
  <span class="pf-c-menu__item-main">
5644
6129
  <span class="pf-c-menu__item-icon">
5645
6130
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -5654,7 +6139,11 @@ wrapperTag: div
5654
6139
  </button>
5655
6140
  <div class="pf-c-menu" hidden>
5656
6141
  <div class="pf-c-menu__header">
5657
- <button class="pf-c-menu__item" type="button">
6142
+ <button
6143
+ class="pf-c-menu__item"
6144
+ type="button"
6145
+ role="menuitem"
6146
+ >
5658
6147
  <span class="pf-c-menu__item-main">
5659
6148
  <span class="pf-c-menu__item-toggle-icon">
5660
6149
  <i class="fas fa-angle-left"></i>
@@ -5673,21 +6162,36 @@ wrapperTag: div
5673
6162
  </div>
5674
6163
  <div class="pf-c-menu__search">
5675
6164
  <div class="pf-c-menu__search-input">
5676
- <input
5677
- class="pf-c-form-control pf-m-search"
5678
- type="search"
5679
- id="page-demo-overflow-scroll-masthead-drilldown-menu-list-3-search-input"
5680
- name="page-demo-overflow-scroll-masthead-drilldown-menu-list-3-search-input"
5681
- aria-label="Search"
5682
- />
6165
+ <div class="pf-c-search-input">
6166
+ <div class="pf-c-search-input__bar">
6167
+ <span class="pf-c-search-input__text">
6168
+ <span class="pf-c-search-input__icon">
6169
+ <i
6170
+ class="fas fa-search fa-fw"
6171
+ aria-hidden="true"
6172
+ ></i>
6173
+ </span>
6174
+ <input
6175
+ class="pf-c-search-input__text-input"
6176
+ type="text"
6177
+ placeholder="Search"
6178
+ aria-label="Search"
6179
+ />
6180
+ </span>
6181
+ </div>
6182
+ </div>
5683
6183
  </div>
5684
6184
  </div>
5685
6185
  <hr class="pf-c-divider" />
5686
6186
  <section class="pf-c-menu__group">
5687
6187
  <h1 class="pf-c-menu__group-title">Favorites</h1>
5688
- <ul class="pf-c-menu__list">
5689
- <li class="pf-c-menu__list-item">
5690
- <a class="pf-c-menu__item" href="#">
6188
+ <ul class="pf-c-menu__list" role="menu">
6189
+ <li class="pf-c-menu__list-item" role="none">
6190
+ <a
6191
+ class="pf-c-menu__item"
6192
+ href="#"
6193
+ role="menuitem"
6194
+ >
5691
6195
  <span class="pf-c-menu__item-main">
5692
6196
  <span
5693
6197
  class="pf-c-menu__item-text"
@@ -5707,10 +6211,11 @@ wrapperTag: div
5707
6211
  </span>
5708
6212
  </button>
5709
6213
  </li>
5710
- <li class="pf-c-menu__list-item">
6214
+ <li class="pf-c-menu__list-item" role="none">
5711
6215
  <a
5712
6216
  class="pf-c-menu__item"
5713
6217
  href="#"
6218
+ role="menuitem"
5714
6219
  target="_blank"
5715
6220
  >
5716
6221
  <span class="pf-c-menu__item-main">
@@ -5748,9 +6253,13 @@ wrapperTag: div
5748
6253
  <hr class="pf-c-divider" />
5749
6254
  <section class="pf-c-menu__group">
5750
6255
  <h1 class="pf-c-menu__group-title">Group 1</h1>
5751
- <ul class="pf-c-menu__list">
5752
- <li class="pf-c-menu__list-item">
5753
- <a class="pf-c-menu__item" href="#">
6256
+ <ul class="pf-c-menu__list" role="menu">
6257
+ <li class="pf-c-menu__list-item" role="none">
6258
+ <a
6259
+ class="pf-c-menu__item"
6260
+ href="#"
6261
+ role="menuitem"
6262
+ >
5754
6263
  <span class="pf-c-menu__item-main">
5755
6264
  <span
5756
6265
  class="pf-c-menu__item-text"
@@ -5770,10 +6279,11 @@ wrapperTag: div
5770
6279
  </span>
5771
6280
  </button>
5772
6281
  </li>
5773
- <li class="pf-c-menu__list-item">
6282
+ <li class="pf-c-menu__list-item" role="none">
5774
6283
  <a
5775
6284
  class="pf-c-menu__item"
5776
6285
  href="#"
6286
+ role="menuitem"
5777
6287
  target="_blank"
5778
6288
  >
5779
6289
  <span class="pf-c-menu__item-main">
@@ -6309,14 +6819,24 @@ wrapperTag: div
6309
6819
  hidden
6310
6820
  >
6311
6821
  <div class="pf-c-app-launcher__menu-search">
6312
- <input
6313
- class="pf-c-form-control"
6314
- type="search"
6315
- aria-label="Type to filter"
6316
- placeholder="Filter by name..."
6317
- id="page-demo-centered-contentt-masthead-application-launcher-text-input"
6318
- name="textInput1"
6319
- />
6822
+ <div class="pf-c-search-input">
6823
+ <div class="pf-c-search-input__bar">
6824
+ <span class="pf-c-search-input__text">
6825
+ <span class="pf-c-search-input__icon">
6826
+ <i
6827
+ class="fas fa-search fa-fw"
6828
+ aria-hidden="true"
6829
+ ></i>
6830
+ </span>
6831
+ <input
6832
+ class="pf-c-search-input__text-input"
6833
+ type="text"
6834
+ placeholder="Filter by name"
6835
+ aria-label="Filter by name"
6836
+ />
6837
+ </span>
6838
+ </div>
6839
+ </div>
6320
6840
  </div>
6321
6841
  <section class="pf-c-app-launcher__group">
6322
6842
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -6506,12 +7026,16 @@ wrapperTag: div
6506
7026
  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
6507
7027
  <div class="pf-c-menu__content">
6508
7028
  <section class="pf-c-menu__group pf-m-hidden-on-sm">
6509
- <ul class="pf-c-menu__list">
6510
- <li class="pf-c-menu__list-item pf-m-disabled">
7029
+ <ul class="pf-c-menu__list" role="menu">
7030
+ <li
7031
+ class="pf-c-menu__list-item pf-m-disabled"
7032
+ role="none"
7033
+ >
6511
7034
  <button
6512
7035
  class="pf-c-menu__item"
6513
7036
  type="button"
6514
7037
  disabled
7038
+ role="menuitem"
6515
7039
  >
6516
7040
  <span class="pf-c-menu__item-description">
6517
7041
  <div class="pf-u-font-size-sm">Username:</div>
@@ -6521,11 +7045,15 @@ wrapperTag: div
6521
7045
  </span>
6522
7046
  </button>
6523
7047
  </li>
6524
- <li class="pf-c-menu__list-item pf-m-disabled">
7048
+ <li
7049
+ class="pf-c-menu__list-item pf-m-disabled"
7050
+ role="none"
7051
+ >
6525
7052
  <button
6526
7053
  class="pf-c-menu__item"
6527
7054
  type="button"
6528
7055
  disabled
7056
+ role="menuitem"
6529
7057
  >
6530
7058
  <span class="pf-c-menu__item-description">
6531
7059
  <div class="pf-u-font-size-sm">Account number:</div>
@@ -6534,15 +7062,23 @@ wrapperTag: div
6534
7062
  </button>
6535
7063
  </li>
6536
7064
  <li class="pf-c-divider" role="separator"></li>
6537
- <li class="pf-c-menu__list-item">
6538
- <button class="pf-c-menu__item" type="button">
7065
+ <li class="pf-c-menu__list-item" role="none">
7066
+ <button
7067
+ class="pf-c-menu__item"
7068
+ type="button"
7069
+ role="menuitem"
7070
+ >
6539
7071
  <span class="pf-c-menu__item-main">
6540
7072
  <span class="pf-c-menu__item-text">My profile</span>
6541
7073
  </span>
6542
7074
  </button>
6543
7075
  </li>
6544
- <li class="pf-c-menu__list-item">
6545
- <button class="pf-c-menu__item" type="button">
7076
+ <li class="pf-c-menu__list-item" role="none">
7077
+ <button
7078
+ class="pf-c-menu__item"
7079
+ type="button"
7080
+ role="menuitem"
7081
+ >
6546
7082
  <span class="pf-c-menu__item-main">
6547
7083
  <span
6548
7084
  class="pf-c-menu__item-text"
@@ -6550,8 +7086,12 @@ wrapperTag: div
6550
7086
  </span>
6551
7087
  </button>
6552
7088
  </li>
6553
- <li class="pf-c-menu__list-item">
6554
- <button class="pf-c-menu__item" type="button">
7089
+ <li class="pf-c-menu__list-item" role="none">
7090
+ <button
7091
+ class="pf-c-menu__item"
7092
+ type="button"
7093
+ role="menuitem"
7094
+ >
6555
7095
  <span class="pf-c-menu__item-main">
6556
7096
  <span class="pf-c-menu__item-text">Logout</span>
6557
7097
  </span>
@@ -6561,11 +7101,12 @@ wrapperTag: div
6561
7101
  </section>
6562
7102
  <hr class="pf-c-divider pf-m-hidden-on-sm" />
6563
7103
  <section class="pf-c-menu__group">
6564
- <ul class="pf-c-menu__list">
6565
- <li class="pf-c-menu__list-item">
7104
+ <ul class="pf-c-menu__list" role="menu">
7105
+ <li class="pf-c-menu__list-item" role="none">
6566
7106
  <button
6567
7107
  class="pf-c-menu__item"
6568
7108
  type="button"
7109
+ role="menuitem"
6569
7110
  aria-expanded="false"
6570
7111
  >
6571
7112
  <span class="pf-c-menu__item-main">
@@ -6583,13 +7124,15 @@ wrapperTag: div
6583
7124
  </button>
6584
7125
  <div class="pf-c-menu" hidden>
6585
7126
  <div class="pf-c-menu__content">
6586
- <ul class="pf-c-menu__list">
7127
+ <ul class="pf-c-menu__list" role="menu">
6587
7128
  <li
6588
7129
  class="pf-c-menu__list-item pf-m-drill-up"
7130
+ role="none"
6589
7131
  >
6590
7132
  <button
6591
7133
  class="pf-c-menu__item"
6592
7134
  type="button"
7135
+ role="menuitem"
6593
7136
  >
6594
7137
  <span class="pf-c-menu__item-main">
6595
7138
  <span
@@ -6610,8 +7153,12 @@ wrapperTag: div
6610
7153
  </button>
6611
7154
  </li>
6612
7155
  <li class="pf-c-divider" role="separator"></li>
6613
- <li class="pf-c-menu__list-item">
6614
- <a class="pf-c-menu__item" href="#">
7156
+ <li class="pf-c-menu__list-item" role="none">
7157
+ <a
7158
+ class="pf-c-menu__item"
7159
+ href="#"
7160
+ role="menuitem"
7161
+ >
6615
7162
  <span class="pf-c-menu__item-main">
6616
7163
  <span
6617
7164
  class="pf-c-menu__item-text"
@@ -6619,8 +7166,12 @@ wrapperTag: div
6619
7166
  </span>
6620
7167
  </a>
6621
7168
  </li>
6622
- <li class="pf-c-menu__list-item">
6623
- <a class="pf-c-menu__item" href="#">
7169
+ <li class="pf-c-menu__list-item" role="none">
7170
+ <a
7171
+ class="pf-c-menu__item"
7172
+ href="#"
7173
+ role="menuitem"
7174
+ >
6624
7175
  <span class="pf-c-menu__item-main">
6625
7176
  <span class="pf-c-menu__item-text">About</span>
6626
7177
  </span>
@@ -6631,10 +7182,11 @@ wrapperTag: div
6631
7182
  </div>
6632
7183
  </li>
6633
7184
 
6634
- <li class="pf-c-menu__list-item">
7185
+ <li class="pf-c-menu__list-item" role="none">
6635
7186
  <button
6636
7187
  class="pf-c-menu__item"
6637
7188
  type="button"
7189
+ role="menuitem"
6638
7190
  aria-expanded="false"
6639
7191
  >
6640
7192
  <span class="pf-c-menu__item-main">
@@ -6652,13 +7204,15 @@ wrapperTag: div
6652
7204
  </button>
6653
7205
  <div class="pf-c-menu" hidden>
6654
7206
  <div class="pf-c-menu__content">
6655
- <ul class="pf-c-menu__list">
7207
+ <ul class="pf-c-menu__list" role="menu">
6656
7208
  <li
6657
7209
  class="pf-c-menu__list-item pf-m-drill-up"
7210
+ role="none"
6658
7211
  >
6659
7212
  <button
6660
7213
  class="pf-c-menu__item"
6661
7214
  type="button"
7215
+ role="menuitem"
6662
7216
  >
6663
7217
  <span class="pf-c-menu__item-main">
6664
7218
  <span
@@ -6677,8 +7231,12 @@ wrapperTag: div
6677
7231
  </button>
6678
7232
  </li>
6679
7233
  <li class="pf-c-divider" role="separator"></li>
6680
- <li class="pf-c-menu__list-item">
6681
- <a class="pf-c-menu__item" href="#">
7234
+ <li class="pf-c-menu__list-item" role="none">
7235
+ <a
7236
+ class="pf-c-menu__item"
7237
+ href="#"
7238
+ role="menuitem"
7239
+ >
6682
7240
  <span class="pf-c-menu__item-main">
6683
7241
  <span
6684
7242
  class="pf-c-menu__item-text"
@@ -6686,8 +7244,12 @@ wrapperTag: div
6686
7244
  </span>
6687
7245
  </a>
6688
7246
  </li>
6689
- <li class="pf-c-menu__list-item">
6690
- <a class="pf-c-menu__item" href="#">
7247
+ <li class="pf-c-menu__list-item" role="none">
7248
+ <a
7249
+ class="pf-c-menu__item"
7250
+ href="#"
7251
+ role="menuitem"
7252
+ >
6691
7253
  <span class="pf-c-menu__item-main">
6692
7254
  <span
6693
7255
  class="pf-c-menu__item-text"
@@ -6695,8 +7257,12 @@ wrapperTag: div
6695
7257
  </span>
6696
7258
  </a>
6697
7259
  </li>
6698
- <li class="pf-c-menu__list-item">
6699
- <a class="pf-c-menu__item" href="#">
7260
+ <li class="pf-c-menu__list-item" role="none">
7261
+ <a
7262
+ class="pf-c-menu__item"
7263
+ href="#"
7264
+ role="menuitem"
7265
+ >
6700
7266
  <span class="pf-c-menu__item-main">
6701
7267
  <span
6702
7268
  class="pf-c-menu__item-text"
@@ -6709,8 +7275,12 @@ wrapperTag: div
6709
7275
  </div>
6710
7276
  </li>
6711
7277
 
6712
- <li class="pf-c-menu__list-item">
6713
- <button class="pf-c-menu__item" type="button">
7278
+ <li class="pf-c-menu__list-item" role="none">
7279
+ <button
7280
+ class="pf-c-menu__item"
7281
+ type="button"
7282
+ role="menuitem"
7283
+ >
6714
7284
  <span class="pf-c-menu__item-main">
6715
7285
  <span class="pf-c-menu__item-icon">
6716
7286
  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
@@ -6725,7 +7295,11 @@ wrapperTag: div
6725
7295
  </button>
6726
7296
  <div class="pf-c-menu" hidden>
6727
7297
  <div class="pf-c-menu__header">
6728
- <button class="pf-c-menu__item" type="button">
7298
+ <button
7299
+ class="pf-c-menu__item"
7300
+ type="button"
7301
+ role="menuitem"
7302
+ >
6729
7303
  <span class="pf-c-menu__item-main">
6730
7304
  <span class="pf-c-menu__item-toggle-icon">
6731
7305
  <i class="fas fa-angle-left"></i>
@@ -6744,21 +7318,36 @@ wrapperTag: div
6744
7318
  </div>
6745
7319
  <div class="pf-c-menu__search">
6746
7320
  <div class="pf-c-menu__search-input">
6747
- <input
6748
- class="pf-c-form-control pf-m-search"
6749
- type="search"
6750
- id="page-demo-centered-contentt-masthead-drilldown-menu-list-3-search-input"
6751
- name="page-demo-centered-contentt-masthead-drilldown-menu-list-3-search-input"
6752
- aria-label="Search"
6753
- />
7321
+ <div class="pf-c-search-input">
7322
+ <div class="pf-c-search-input__bar">
7323
+ <span class="pf-c-search-input__text">
7324
+ <span class="pf-c-search-input__icon">
7325
+ <i
7326
+ class="fas fa-search fa-fw"
7327
+ aria-hidden="true"
7328
+ ></i>
7329
+ </span>
7330
+ <input
7331
+ class="pf-c-search-input__text-input"
7332
+ type="text"
7333
+ placeholder="Search"
7334
+ aria-label="Search"
7335
+ />
7336
+ </span>
7337
+ </div>
7338
+ </div>
6754
7339
  </div>
6755
7340
  </div>
6756
7341
  <hr class="pf-c-divider" />
6757
7342
  <section class="pf-c-menu__group">
6758
7343
  <h1 class="pf-c-menu__group-title">Favorites</h1>
6759
- <ul class="pf-c-menu__list">
6760
- <li class="pf-c-menu__list-item">
6761
- <a class="pf-c-menu__item" href="#">
7344
+ <ul class="pf-c-menu__list" role="menu">
7345
+ <li class="pf-c-menu__list-item" role="none">
7346
+ <a
7347
+ class="pf-c-menu__item"
7348
+ href="#"
7349
+ role="menuitem"
7350
+ >
6762
7351
  <span class="pf-c-menu__item-main">
6763
7352
  <span
6764
7353
  class="pf-c-menu__item-text"
@@ -6778,10 +7367,11 @@ wrapperTag: div
6778
7367
  </span>
6779
7368
  </button>
6780
7369
  </li>
6781
- <li class="pf-c-menu__list-item">
7370
+ <li class="pf-c-menu__list-item" role="none">
6782
7371
  <a
6783
7372
  class="pf-c-menu__item"
6784
7373
  href="#"
7374
+ role="menuitem"
6785
7375
  target="_blank"
6786
7376
  >
6787
7377
  <span class="pf-c-menu__item-main">
@@ -6819,9 +7409,13 @@ wrapperTag: div
6819
7409
  <hr class="pf-c-divider" />
6820
7410
  <section class="pf-c-menu__group">
6821
7411
  <h1 class="pf-c-menu__group-title">Group 1</h1>
6822
- <ul class="pf-c-menu__list">
6823
- <li class="pf-c-menu__list-item">
6824
- <a class="pf-c-menu__item" href="#">
7412
+ <ul class="pf-c-menu__list" role="menu">
7413
+ <li class="pf-c-menu__list-item" role="none">
7414
+ <a
7415
+ class="pf-c-menu__item"
7416
+ href="#"
7417
+ role="menuitem"
7418
+ >
6825
7419
  <span class="pf-c-menu__item-main">
6826
7420
  <span
6827
7421
  class="pf-c-menu__item-text"
@@ -6841,10 +7435,11 @@ wrapperTag: div
6841
7435
  </span>
6842
7436
  </button>
6843
7437
  </li>
6844
- <li class="pf-c-menu__list-item">
7438
+ <li class="pf-c-menu__list-item" role="none">
6845
7439
  <a
6846
7440
  class="pf-c-menu__item"
6847
7441
  href="#"
7442
+ role="menuitem"
6848
7443
  target="_blank"
6849
7444
  >
6850
7445
  <span class="pf-c-menu__item-main">