@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18

package/docs/components/Wizard/examples/Wizard.md

@@ -46,13 +46,13 @@ wrapperTag: div
   <div class="pf-c-wizard__outer-wrap">
     <div class="pf-c-wizard__inner-wrap">
       <nav class="pf-c-wizard__nav" aria-label="Steps">
-        <ol class="pf-c-wizard__nav-list">
+        <ol class="pf-c-wizard__nav-list" role="list">
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link">Information</button>
           </li>
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link pf-m-current">Configuration</button>
-            <ol class="pf-c-wizard__nav-list">
+            <ol class="pf-c-wizard__nav-list" role="list">
               <li class="pf-c-wizard__nav-item">
                 <button class="pf-c-wizard__nav-link">Substep A</button>
               </li>
@@ -252,13 +252,13 @@ wrapperTag: div
   <div class="pf-c-wizard__outer-wrap">
     <div class="pf-c-wizard__inner-wrap">
       <nav class="pf-c-wizard__nav pf-m-expanded" aria-label="Steps">
-        <ol class="pf-c-wizard__nav-list">
+        <ol class="pf-c-wizard__nav-list" role="list">
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link">Information</button>
           </li>
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link pf-m-current">Configuration</button>
-            <ol class="pf-c-wizard__nav-list">
+            <ol class="pf-c-wizard__nav-list" role="list">
               <li class="pf-c-wizard__nav-item">
                 <button class="pf-c-wizard__nav-link">Substep A</button>
               </li>
@@ -458,13 +458,13 @@ wrapperTag: div
   <div class="pf-c-wizard__outer-wrap">
     <div class="pf-c-wizard__inner-wrap">
       <nav class="pf-c-wizard__nav" aria-label="Steps">
-        <ol class="pf-c-wizard__nav-list">
+        <ol class="pf-c-wizard__nav-list" role="list">
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link">Information</button>
           </li>
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link pf-m-current">Configuration</button>
-            <ol class="pf-c-wizard__nav-list">
+            <ol class="pf-c-wizard__nav-list" role="list">
               <li class="pf-c-wizard__nav-item">
                 <button class="pf-c-wizard__nav-link">Substep A</button>
               </li>
@@ -712,7 +712,7 @@ wrapperTag: div
   <div class="pf-c-wizard__outer-wrap">
     <div class="pf-c-wizard__inner-wrap">
       <nav class="pf-c-wizard__nav" aria-label="Steps">
-        <ol class="pf-c-wizard__nav-list">
+        <ol class="pf-c-wizard__nav-list" role="list">
           <li class="pf-c-wizard__nav-item">
             <button
               class="pf-c-wizard__nav-link pf-m-current"
@@ -728,7 +728,7 @@ wrapperTag: div
                 </span>
               </span>
             </button>
-            <ol class="pf-c-wizard__nav-list">
+            <ol class="pf-c-wizard__nav-list" role="list">
               <li class="pf-c-wizard__nav-item">
                 <button class="pf-c-wizard__nav-link">Substep A</button>
               </li>
@@ -946,7 +946,7 @@ wrapperTag: div
   <div class="pf-c-wizard__outer-wrap">
     <div class="pf-c-wizard__inner-wrap">
       <nav class="pf-c-wizard__nav" aria-label="Steps">
-        <ol class="pf-c-wizard__nav-list">
+        <ol class="pf-c-wizard__nav-list" role="list">
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link">Information</button>
           </li>
@@ -962,7 +962,7 @@ wrapperTag: div
                 </span>
               </span>
             </button>
-            <ol class="pf-c-wizard__nav-list">
+            <ol class="pf-c-wizard__nav-list" role="list">
               <li class="pf-c-wizard__nav-item">
                 <button class="pf-c-wizard__nav-link">Substep A</button>
               </li>
@@ -1183,13 +1183,13 @@ wrapperTag: div
   <div class="pf-c-wizard__outer-wrap">
     <div class="pf-c-wizard__inner-wrap">
       <nav class="pf-c-wizard__nav" aria-label="Steps">
-        <ol class="pf-c-wizard__nav-list">
+        <ol class="pf-c-wizard__nav-list" role="list">
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link">Information</button>
           </li>
           <li class="pf-c-wizard__nav-item">
             <button class="pf-c-wizard__nav-link">Configuration</button>
-            <ol class="pf-c-wizard__nav-list">
+            <ol class="pf-c-wizard__nav-list" role="list">
               <li class="pf-c-wizard__nav-item">
                 <button class="pf-c-wizard__nav-link">Substep A</button>
               </li>
@@ -1273,53 +1273,53 @@ wrapperTag: div
 
 ### Accessibility
 
-| Attribute               | Applied to                                                  | Outcome                                                                                                                                                                                                                                                                          |
-| ----------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-expanded="true"`  | `.pf-c-wizard__toggle`                                      | Indicates that the steps menu is visible. **Required**                                                                                                                                                                                                                           |
-| `aria-expanded="false"` | `.pf-c-wizard__toggle`                                      | Indicates that the steps menu is hidden. **Required**                                                                                                                                                                                                                            |
-| `aria-label="close"`    | `.pf-c-wizard__toggle-icon`                                 | Gives the close button an accessible name. **Required**                                                                                                                                                                                                                          |
-| `aria-hidden="true"`    | `.pf-c-wizard__toggle-icon`, `.pf-c-wizard__toggle-divider` | Hides the icon from assistive technologies. **Required**                                                                                                                                                                                                                         |
-| `aria-label="Steps"`    | `.pf-c-wizard__nav`                                         | Gives the steps nav element an accessible name. **Required**                                                                                                                                                                                                                     |
-| `disabled`              | `button.pf-c-wizard__nav-link`                              | Indicates that the element is disabled. **Required when a nav item is disabled**                                                                                                                                                                                                 |
-| `aria-disabled="true"`  | `a.pf-c-wizard__nav-link`                                   | Indicates that the element is disabled. **Required for disabled links with `.pf-m-disabled`**                                                                                                                                                                                    |
-| `aria-current="page"`   | `.pf-c-wizard__nav-link`                                    | Indicates the current page link. Can only occur once on page. **Required for the current link**                                                                                                                                                                                  |
-| `aria-expanded="true"`  | `.pf-c-wizard__nav-link`                                    | Indicates that the link subnav is visible. **Required**                                                                                                                                                                                                                          |
-| `aria-expanded="false"` | `.pf-c-wizard__nav-link`                                    | Indicates that the link subnav is hidden. **Required**                                                                                                                                                                                                                           |
-| `tabindex="-1"`         | `a.pf-c-wizard__nav-link`                                   | Removes a link from keyboard focus. **Required for disabled links with `.pf-m-disabled`**                                                                                                                                                                                        |
-| `tabindex="0"`          | `.pf-c-wizard__main`                                        | If the wizard main section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the section must include either a focusable element within the scrollable region or the section itself must be focusable by adding `tabindex="0"`. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `.pf-c-wizard__toggle` | Indicates that the steps menu is visible. **Required** |
+| `aria-expanded="false"` | `.pf-c-wizard__toggle` | Indicates that the steps menu is hidden. **Required** |
+| `aria-label="close"` | `.pf-c-wizard__toggle-icon` | Gives the close button an accessible name. **Required** |
+| `aria-hidden="true"` | `.pf-c-wizard__toggle-icon`, `.pf-c-wizard__toggle-divider` | Hides the icon from assistive technologies. **Required** |
+| `aria-label="Steps"` | `.pf-c-wizard__nav` | Gives the steps nav element an accessible name. **Required** |
+| `disabled` | `button.pf-c-wizard__nav-link` | Indicates that the element is disabled. **Required when a nav item is disabled** |
+| `aria-disabled="true"` | `a.pf-c-wizard__nav-link` | Indicates that the element is disabled. **Required for disabled links with `.pf-m-disabled`** |
+| `aria-current="page"` | `.pf-c-wizard__nav-link` | Indicates the current page link. Can only occur once on page. **Required for the current link** |
+| `aria-expanded="true"` | `.pf-c-wizard__nav-link` | Indicates that the link subnav is visible. **Required** |
+| `aria-expanded="false"` | `.pf-c-wizard__nav-link` | Indicates that the link subnav is hidden. **Required** |
+| `tabindex="-1"` | `a.pf-c-wizard__nav-link` | Removes a link from keyboard focus. **Required for disabled links with `.pf-m-disabled`** |
+| `tabindex="0"` | `.pf-c-wizard__main` | If the wizard main section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the section must include either a focusable element within the scrollable region or the section itself must be focusable by adding `tabindex="0"`. |
 
 ### Usage
 
-| Class                                | Applied to                                  | Outcome                                                                                                                               |
-| ------------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-wizard`                       | `<div>`                                     | Initiates the wizard component. **Required**                                                                                          |
-| `.pf-c-wizard__header`               | `<header>`                                  | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page.         |
-| `.pf-c-wizard__close`                | `.pf-c-button.pf-m-plain`                   | Initiates the close button. **Required**                                                                                              |
-| `.pf-c-wizard__title`                | `.pf-c-title.pf-m-3xl`                      | Initiates the title. **Required**                                                                                                     |
-| `.pf-c-wizard__description`          | `<div>`, `<p>`                              | Initiates the description.                                                                                                            |
-| `.pf-c-wizard__toggle`               | `<button>`                                  | Initiates the mobile steps menu toggle button. **Required**                                                                           |
-| `.pf-c-wizard__toggle-list`          | `<span>`                                    | Initiates the toggle list. **Required**                                                                                               |
-| `.pf-c-wizard__toggle-list-item`     | `<span>`                                    | Initiates a toggle list item. **Required**                                                                                            |
-| `.pf-c-wizard__toggle-num`           | `<span>`                                    | Initiates the step number. **Required**                                                                                               |
-| `.pf-c-wizard__toggle-separator`     | `<i>`                                       | Initiates the separator between steps.                                                                                                |
-| `.pf-c-wizard__toggle-icon`          | `<span>`                                    | Initiates the toggle icon wrapper. **Required**                                                                                       |
-| `.pf-c-wizard__outer-wrap`           | `<div>`                                     | Initiates the outer wrapper. **Required**                                                                                             |
-| `.pf-c-wizard__inner-wrap`           | `<div>`                                     | Initiates the inner wrapper. **Required**                                                                                             |
-| `.pf-c-wizard__nav`                  | `<nav>`                                     | Initiates the steps nav. **Required**                                                                                                 |
-| `.pf-c-wizard__nav-list`             | `<ol>`                                      | Initiates a list of steps. **Required**                                                                                               |
-| `.pf-c-wizard__nav-item`             | `<li>`                                      | Initiates a step list item. **Required**                                                                                              |
-| `.pf-c-wizard__nav-link`             | `<a>`                                       | Initiates a step link. **Required**                                                                                                   |
-| `.pf-c-wizard__nav-link-text`        | `<span>`                                    | Initiates the link text container. **Required when nav item is expandable**                                                           |
-| `.pf-c-wizard__nav-link-toggle`      | `<span>`                                    | Initiates the toggle container. **Required when nav item is expandable**                                                              |
-| `.pf-c-wizard__nav-link-toggle-icon` | `<span>`                                    | Initiates the toggle icon container. **Required when nav item is expandable**                                                         |
-| `.pf-c-wizard__main`                 | `<main>`, `<div>`                           | Initiates the main container. **Required** Note: use the `<main>` element when when there are no other `<main>` elements on the page. |
-| `.pf-c-wizard__main-body`            | `<div>`                                     | Initiates the main container body section. **Required**                                                                               |
-| `.pf-c-wizard__footer`               | `<footer>`                                  | Initiates the footer. **Required**                                                                                                    |
-| `.pf-c-wizard__footer-cancel`        | `<div>`                                     | Initiates the cancel button. **Required**                                                                                             |
-| `.pf-m-expanded`                     | `.pf-c-wizard__toggle`, `.pf-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state.                                                               |
-| `.pf-m-finished`                     | `.pf-c-wizard`                              | Modifies the wizard for the finished state.                                                                                           |
-| `.pf-m-expandable`                   | `.pf-c-wizard__nav-item`                    | Modifies a nav item for the expandable state.                                                                                         |
-| `.pf-m-expanded`                     | `.pf-c-wizard__nav-item`                    | Modifies a nav item for the expanded state.                                                                                           |
-| `.pf-m-current`                      | `.pf-c-wizard__nav-link`                    | Modifies a step link for the current state. **Required**                                                                              |
-| `.pf-m-disabled`                     | `.pf-c-wizard__nav-link`                    | Modifies a step link for the disabled state.                                                                                          |
-| `.pf-m-no-padding`                   | `.pf-c-wizard__main-body`                   | Modifies the main container body to remove the padding.                                                                               |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-wizard` | `<div>` | Initiates the wizard component. **Required** |
+| `.pf-c-wizard__header` | `<header>` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. |
+| `.pf-c-wizard__close` | `.pf-c-button.pf-m-plain` | Initiates the close button. **Required** |
+| `.pf-c-wizard__title` | `.pf-c-title.pf-m-3xl` | Initiates the title. **Required** |
+| `.pf-c-wizard__description` | `<div>`, `<p>` | Initiates the description. |
+| `.pf-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. **Required** |
+| `.pf-c-wizard__toggle-list` | `<span>` | Initiates the toggle list. **Required** |
+| `.pf-c-wizard__toggle-list-item` | `<span>` | Initiates a toggle list item. **Required** |
+| `.pf-c-wizard__toggle-num` | `<span>` | Initiates the step number. **Required** |
+| `.pf-c-wizard__toggle-separator` | `<i>` | Initiates the separator between steps. |
+| `.pf-c-wizard__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
+| `.pf-c-wizard__outer-wrap` | `<div>` | Initiates the outer wrapper. **Required** |
+| `.pf-c-wizard__inner-wrap` | `<div>` | Initiates the inner wrapper. **Required** |
+| `.pf-c-wizard__nav` | `<nav>` | Initiates the steps nav. **Required** |
+| `.pf-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
+| `.pf-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
+| `.pf-c-wizard__nav-link` | `<a>` | Initiates a step link. **Required** |
+| `.pf-c-wizard__nav-link-text` | `<span>` | Initiates the link text container. **Required when nav item is expandable** |
+| `.pf-c-wizard__nav-link-toggle` | `<span>` | Initiates the toggle container. **Required when nav item is expandable** |
+| `.pf-c-wizard__nav-link-toggle-icon` | `<span>` | Initiates the toggle icon container. **Required when nav item is expandable** |
+| `.pf-c-wizard__main` | `<main>`, `<div>` | Initiates the main container. **Required** Note: use the `<main>` element when when there are no other `<main>` elements on the page.|
+| `.pf-c-wizard__main-body` | `<div>` | Initiates the main container body section. **Required** |
+| `.pf-c-wizard__footer` | `<footer>` | Initiates the footer. **Required** |
+| `.pf-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
+| `.pf-m-expanded` | `.pf-c-wizard__toggle`, `.pf-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
+| `.pf-m-finished` | `.pf-c-wizard` | Modifies the wizard for the finished state. |
+| `.pf-m-expandable` | `.pf-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
+| `.pf-m-expanded` | `.pf-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
+| `.pf-m-current` | `.pf-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
+| `.pf-m-disabled` | `.pf-c-wizard__nav-link` | Modifies a step link for the disabled state. |
+| `.pf-m-no-padding` | `.pf-c-wizard__main-body` | Modifies the main container body to remove the padding. |

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -97,7 +97,7 @@ This demo implements the about modal, including the backdrop.
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -149,7 +149,7 @@ This demo implements the about modal, including the backdrop.
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -804,7 +804,7 @@ This demo implements the about modal, including the backdrop.
         id="modal-basic-example-primary-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">System panel</a>
           </li>
@@ -836,7 +836,7 @@ This demo implements the about modal, including the backdrop.
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>

package/docs/demos/Alert/examples/Alert.md

@@ -95,7 +95,7 @@ section: components
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -147,7 +147,7 @@ section: components
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -802,7 +802,7 @@ section: components
         id="alert-basic-example-primary-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">System panel</a>
           </li>
@@ -834,7 +834,7 @@ section: components
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>
@@ -913,7 +913,7 @@ section: components
     </section>
   </main>
 </div>
-<ul class="pf-c-alert-group pf-m-toast">
+<ul class="pf-c-alert-group pf-m-toast" role="list">
   <li class="pf-c-alert-group__item">
     <div class="pf-c-alert pf-m-success" aria-label="Success alert">
       <div class="pf-c-alert__icon">
@@ -1079,7 +1079,7 @@ section: components
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -1131,7 +1131,7 @@ section: components
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -1786,7 +1786,7 @@ section: components
         id="alert-horizontal-example-primary-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">System panel</a>
           </li>
@@ -1818,7 +1818,7 @@ section: components
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>
@@ -2101,7 +2101,7 @@ section: components
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -2153,7 +2153,7 @@ section: components
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -2808,7 +2808,7 @@ section: components
         id="alert-stacked-example-primary-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">System panel</a>
           </li>
@@ -2840,7 +2840,7 @@ section: components
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -96,7 +96,7 @@ cssPrefix: pf-d-back-to-top
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -148,7 +148,7 @@ cssPrefix: pf-d-back-to-top
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -803,7 +803,7 @@ cssPrefix: pf-d-back-to-top
         id="back-to-top-basic-example-primary-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">System panel</a>
           </li>
@@ -835,7 +835,7 @@ cssPrefix: pf-d-back-to-top
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>

package/docs/demos/Banner/examples/Banner.md

@@ -97,7 +97,7 @@ wrapperTag: div
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -149,7 +149,7 @@ wrapperTag: div
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -804,7 +804,7 @@ wrapperTag: div
         id="banner-basic-example-primary-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item">
             <a href="#" class="pf-c-nav__link">System panel</a>
           </li>
@@ -850,7 +850,7 @@ wrapperTag: div
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>
@@ -1164,7 +1164,7 @@ wrapperTag: div
                           </div>
                           <section class="pf-c-app-launcher__group">
                             <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                            <ul>
+                            <ul role="list">
                               <li
                                 class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                               >
@@ -1220,7 +1220,7 @@ wrapperTag: div
                           <hr class="pf-c-divider" />
                           <section class="pf-c-app-launcher__group">
                             <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                            <ul>
+                            <ul role="list">
                               <li
                                 class="pf-c-app-launcher__menu-wrapper pf-m-external"
                               >
@@ -1935,7 +1935,7 @@ wrapperTag: div
             id="banner-top-bottom-example-primary-nav"
             aria-label="Global"
           >
-            <ul class="pf-c-nav__list">
+            <ul class="pf-c-nav__list" role="list">
               <li class="pf-c-nav__item">
                 <a href="#" class="pf-c-nav__link">System panel</a>
               </li>
@@ -1967,7 +1967,7 @@ wrapperTag: div
         <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
           <div class="pf-c-page__main-body">
             <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-              <ol class="pf-c-breadcrumb__list">
+              <ol class="pf-c-breadcrumb__list" role="list">
                 <li class="pf-c-breadcrumb__item">
                   <a href="#" class="pf-c-breadcrumb__link">Section home</a>
                 </li>

package/docs/demos/Card/examples/Card.md

@@ -221,7 +221,7 @@ wrapperTag: div
               </span>
             </span>
             <p>Continue setting up your cluster to access all you cain in the Console</p>
-            <ul class="pf-c-list pf-m-plain">
+            <ul class="pf-c-list pf-m-plain" role="list">
               <li>
                 <a href="#">Add identity provider</a>
               </li>
@@ -257,7 +257,7 @@ wrapperTag: div
               </span>
             </span>
             <p>Tour some of the key features around the console</p>
-            <ul class="pf-c-list pf-m-plain">
+            <ul class="pf-c-list pf-m-plain" role="list">
               <li>
                 <a href="#">Tour the console</a>
               </li>
@@ -288,7 +288,7 @@ wrapperTag: div
               </span>
             </span>
             <p>Get started with features using our step-by-step documentation</p>
-            <ul class="pf-c-list pf-m-plain">
+            <ul class="pf-c-list pf-m-plain" role="list">
               <li>
                 <a href="#">Getting started with Serverless</a>
               </li>
@@ -322,7 +322,7 @@ wrapperTag: div
               </span>
             </span>
             <p>Learn about new features within the Console and get started with demo apps</p>
-            <ul class="pf-c-list pf-m-plain">
+            <ul class="pf-c-list pf-m-plain" role="list">
               <li>
                 <a href="#">See what's possible with the Explore page</a>
               </li>
@@ -1039,7 +1039,7 @@ wrapperTag: div
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
         </button>
-        <ul class="pf-c-notification-drawer__list" hidden>
+        <ul class="pf-c-notification-drawer__list" role="list" hidden>
           <li
             class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
             tabindex="0"
@@ -1232,7 +1232,7 @@ wrapperTag: div
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
         </button>
-        <ul class="pf-c-notification-drawer__list">
+        <ul class="pf-c-notification-drawer__list" role="list">
           <li
             class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
             tabindex="0"
@@ -1679,7 +1679,7 @@ wrapperTag: div
             <i class="fas fa-angle-right" aria-hidden="true"></i>
           </span>
         </button>
-        <ul class="pf-c-notification-drawer__list">
+        <ul class="pf-c-notification-drawer__list" role="list">
           <li
             class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
             tabindex="0"

package/docs/demos/CardView/examples/CardView.md

@@ -95,7 +95,7 @@ section: demos
                       </div>
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
                           >
@@ -147,7 +147,7 @@ section: demos
                       <hr class="pf-c-divider" />
                       <section class="pf-c-app-launcher__group">
                         <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-                        <ul>
+                        <ul role="list">
                           <li
                             class="pf-c-app-launcher__menu-wrapper pf-m-external"
                           >
@@ -802,7 +802,7 @@ section: demos
         id="card-view-basic-example-expandable-nav"
         aria-label="Global"
       >
-        <ul class="pf-c-nav__list">
+        <ul class="pf-c-nav__list" role="list">
           <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
             <button
               class="pf-c-nav__link"
@@ -820,7 +820,7 @@ section: demos
               class="pf-c-nav__subnav"
               aria-labelledby="card-view-basic-example-expandable-nav-link1"
             >
-              <ul class="pf-c-nav__list">
+              <ul class="pf-c-nav__list" role="list">
                 <li class="pf-c-nav__item">
                   <a href="#" class="pf-c-nav__link">Overview</a>
                 </li>
@@ -866,7 +866,7 @@ section: demos
               aria-labelledby="card-view-basic-example-expandable-nav-link2"
               hidden
             >
-              <ul class="pf-c-nav__list">
+              <ul class="pf-c-nav__list" role="list">
                 <li class="pf-c-nav__item">
                   <a href="#" class="pf-c-nav__link">Subnav link 1</a>
                 </li>
@@ -894,7 +894,7 @@ section: demos
               aria-labelledby="card-view-basic-example-expandable-nav-link3"
               hidden
             >
-              <ul class="pf-c-nav__list">
+              <ul class="pf-c-nav__list" role="list">
                 <li class="pf-c-nav__item">
                   <a href="#" class="pf-c-nav__link">Subnav link 1</a>
                 </li>
@@ -916,7 +916,7 @@ section: demos
     <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-c-page__main-body">
         <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
+          <ol class="pf-c-breadcrumb__list" role="list">
             <li class="pf-c-breadcrumb__item">
               <a href="#" class="pf-c-breadcrumb__link">Section home</a>
             </li>