@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

package/components/TreeView/tree-view.scss

@@ -17,6 +17,7 @@ $pf-c-tree-view--MaxNesting: 10;
   --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
   --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-tree-view__node--BackgroundColor: transparent;
 
   // Container
   --pf-c-tree-view__node-container--Display: contents;
@@ -27,7 +28,7 @@ $pf-c-tree-view--MaxNesting: 10;
 
   // Link hover/focus
   --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
+  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
   // Nested toggle
   --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
@@ -41,6 +42,7 @@ $pf-c-tree-view--MaxNesting: 10;
   --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--BackgroundColor: transparent;
   --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
 
   // Toggle icon
@@ -81,10 +83,6 @@ $pf-c-tree-view--MaxNesting: 10;
 
   // Action
   --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
-  --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
-  --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
-  --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
 
   // Guides
   // ================================================================== //
@@ -363,6 +361,7 @@ $pf-c-tree-view--MaxNesting: 10;
   display: flex;
   padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
   color: var(--pf-c-tree-view__node--Color);
+  background-color: var(--pf-c-tree-view__node--BackgroundColor);
 
   &.pf-m-current {
     --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
@@ -371,7 +370,7 @@ $pf-c-tree-view--MaxNesting: 10;
   }
 
   &:focus {
-    background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
+    --pf-c-tree-view__node--BackgroundColor: var(--pf-c-tree-view__node--focus--BackgroundColor);
   }
 
   .pf-c-tree-view__node-count {
@@ -429,6 +428,7 @@ $pf-c-tree-view--MaxNesting: 10;
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
   color: var(--pf-c-tree-view__node-toggle--Color);
+  background-color: var(--pf-c-tree-view__node-toggle--BackgroundColor);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -456,6 +456,7 @@ $pf-c-tree-view--MaxNesting: 10;
   font-weight: inherit;
   color: inherit;
   text-align: left;
+  background-color: transparent;
   border: 0;
 }
 
@@ -484,18 +485,6 @@ $pf-c-tree-view--MaxNesting: 10;
 
 .pf-c-tree-view__action {
   margin-left: var(--pf-c-tree-view__action--MarginLeft);
-  color: var(--pf-c-tree-view__action--Color);
-  border: 0;
-
-  &:hover {
-    --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
-  }
-
-  &:focus {
-    --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
-
-    background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
-  }
 }
 
 // stylelint-disable no-duplicate-selectors

package/components/Wizard/wizard.css

@@ -50,6 +50,7 @@
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
+  --pf-c-wizard__nav-link--BackgroundColor: transparent;
   --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
   --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
   --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
@@ -399,6 +400,7 @@
   text-align: left;
   text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-wizard__nav-link--BackgroundColor);
   border: 0;
 }
 .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {

package/components/Wizard/wizard.scss

@@ -43,6 +43,7 @@
 
   // Nav link
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
+  --pf-c-wizard__nav-link--BackgroundColor: transparent;
   --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
   --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
   --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
@@ -428,6 +429,7 @@
   text-align: left; // needed for when the item is a button
   text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-wizard__nav-link--BackgroundColor);
   border: 0;
 
   // Common step number styles

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -42,20 +42,20 @@ cssPrefix: pf-c-about-modal-box
 
 ### Accessibility
 
-| Attribute                   | Applies to                            | Outcome                                                                                           |
-| --------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| Attribute | Applies to | Outcome |
+| -- | -- | -- |
 | `aria-label="Close Dialog"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
 
 ### Usage
 
-| Class                                | Applied to           | Outcome                               |
-| ------------------------------------ | -------------------- | ------------------------------------- |
-| `.pf-c-about-modal-box`              | `<div>`, `<article>` | Initiates a modal box.                |
-| `.pf-c-about-modal-box__brand`       | `<div>`              | Initiates a modal box brand cell.     |
-| `.pf-c-about-modal-box__brand-image` | `<img>`              | Initiates a modal box brand image.    |
-| `.pf-c-about-modal-box__close`       | `<div>`              | Initiates a modal box close cell.     |
-| `.pf-c-about-modal-box__header`      | `<div>`, `<header>`  | Initiates a modal box header cell.    |
-| `.pf-c-about-modal-box__hero`        | `<div>`              | Initiates a modal box hero cell.      |
-| `.pf-c-about-modal-box__content`     | `<div>`              | Initiates a modal box content cell.   |
-| `.pf-c-about-modal-box__body`        | `<div>`              | Initiates a modal box body cell.      |
-| `.pf-c-about-modal-box__strapline`   | `<p>`                | Initiates a modal box strapline cell. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-about-modal-box` |  `<div>`, `<article>`  |  Initiates a modal box. |
+| `.pf-c-about-modal-box__brand` |  `<div>` |  Initiates a modal box brand cell. |
+| `.pf-c-about-modal-box__brand-image` |  `<img>` |  Initiates a modal box brand image. |
+| `.pf-c-about-modal-box__close` |  `<div>` |  Initiates a modal box close cell. |
+| `.pf-c-about-modal-box__header` |  `<div>`, `<header>` |  Initiates a modal box header cell. |
+| `.pf-c-about-modal-box__hero` |  `<div>` |  Initiates a modal box hero cell. |
+| `.pf-c-about-modal-box__content` |  `<div>` |  Initiates a modal box content cell. |
+| `.pf-c-about-modal-box__body` |  `<div>` |  Initiates a modal box body cell. |
+| `.pf-c-about-modal-box__strapline` |  `<p>` |  Initiates a modal box strapline cell. |

package/docs/components/Accordion/examples/Accordion.md

@@ -436,15 +436,15 @@ In these examples `.pf-c-accordion` uses `<dl>`, `.pf-c-accordion__toggle` uses
 
 ### Usage
 
-| Class                                      | Applied to                                                       | Outcome                                                                                          |
-| ------------------------------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `.pf-c-accordion`                          | `<div>`, `<dl>`                                                  | Initiates an accordion component. **Required**                                                   |
-| `.pf-c-accordion__toggle`                  | `<h1-h6><button>`, `<dt><button>`                                | Initiates a toggle in the accordion. **Required**                                                |
-| `.pf-c-accordion__toggle-text`             | `<span>`                                                         | Initiates the text inside the toggle. **Required**                                               |
-| `.pf-c-accordion__toggle-icon`             | `<span>`                                                         | Initiates the toggle icon wrapper. **Required**                                                  |
-| `.pf-c-accordion__expandable-content`      | `<div>`, `<dd>`                                                  | Initiates expandable content. **Must be paired with a button**                                   |
-| `.pf-c-accordion__expandable-content-body` | `<div>`                                                          | Initiates expandable content body. **Required**                                                  |
-| `.pf-m-bordered`                           | `.pf-c-accordion`                                                | Modifies the accordion to add borders between items.                                             |
-| `.pf-m-display-lg`                         | `.pf-c-accordion`                                                | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
-| `.pf-m-expanded`                           | `.pf-c-accordion__toggle`, `.pf-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state.                     |
-| `.pf-m-fixed`                              | `.pf-c-accordion__expandable-content`                            | Modifies the expandable content for the fixed state.                                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required**|
+| `.pf-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
+| `.pf-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
+| `.pf-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
+| `.pf-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
+| `.pf-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
+| `.pf-m-bordered` | `.pf-c-accordion` | Modifies the accordion to add borders between items. |
+| `.pf-m-display-lg` | `.pf-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
+| `.pf-m-expanded` | `.pf-c-accordion__toggle`, `.pf-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state. |
+| `.pf-m-fixed` | `.pf-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |

package/docs/components/ActionList/examples/ActionList.md

@@ -109,9 +109,9 @@ In modals, forms, data lists
 
 ### Usage
 
-| Attribute                  | Applied to                                      | Outcome                                           |
-| -------------------------- | ----------------------------------------------- | ------------------------------------------------- |
-| `.pf-c-action-list`        | `<div>`                                         | Initiates the action list container.              |
-| `.pf-c-action-list__item`  | `<div>`                                         | Initiates the action list item container.         |
-| `.pf-c-action-list__group` | `<div>`                                         | Initiates the action list group container.        |
-| `.pf-m-icons`              | `.pf-c-action-list`, `.pf-c-action-list__group` | Modifies the action list to support button icons. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-action-list` | `<div>` | Initiates the action list container. |
+| `.pf-c-action-list__item` | `<div>` | Initiates the action list item container. |
+| `.pf-c-action-list__group` | `<div>` | Initiates the action list group container. |
+| `.pf-m-icons` | `.pf-c-action-list`, `.pf-c-action-list__group` | Modifies the action list to support button icons. |

package/docs/components/Alert/examples/Alert.md

@@ -583,22 +583,22 @@ Add a modifier class to the default alert to change the color: `.pf-m-success`,
 
 ### Usage
 
-| Class                       | Applied to                    | Outcome                                                                                                                                                                                                                         |
-| --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-alert`               | `<div>`                       | Applies default alert styling. Always use with a modifier class. **Required**                                                                                                                                                   |
-| `.pf-c-alert__toggle`       | `<div>`                       | Defines the expandable alert toggle icon. **Required for expandable alerts**                                                                                                                                                    |
-| `.pf-c-alert__toggle-icon`  | `<span>`                      | Defines the expandable alert toggle icon. **Required for expandable alerts**                                                                                                                                                    |
-| `.pf-c-alert__icon`         | `<div>`                       | Defines the alert icon. **Required**                                                                                                                                                                                            |
-| `.pf-c-alert__title`        | `<p>, <h1-h6>`                | Defines the alert title. **Required**                                                                                                                                                                                           |
-| `.pf-c-alert__description`  | `<div>`                       | Defines the alert description area.                                                                                                                                                                                             |
-| `.pf-c-alert__action`       | `<div>`                       | Defines the action button wrapper. Should contain `.pf-c-button.pf-m-plain` for close action or `.pf-c-button.pf-m-link` for link text. It should only include one action.                                                      |
-| `.pf-c-alert__action-group` | `<div>`                       | Defines the action button group. Should contain `.pf-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group.                                          |
-| `.pf-m-success`             | `.pf-c-alert`                 | Applies success styling.                                                                                                                                                                                                        |
-| `.pf-m-danger`              | `.pf-c-alert`                 | Applies danger styling.                                                                                                                                                                                                         |
-| `.pf-m-warning`             | `.pf-c-alert`                 | Applies warning styling.                                                                                                                                                                                                        |
-| `.pf-m-info`                | `.pf-c-alert`                 | Applies info styling.                                                                                                                                                                                                           |
-| `.pf-m-inline`              | `.pf-c-alert`                 | Applies inline styling.                                                                                                                                                                                                         |
-| `.pf-m-plain`               | `.pf-c-alert.pf-m-inline`     | Applies plain styling to an inline alert.                                                                                                                                                                                       |
-| `.pf-m-expandable`          | `.pf-c-alert`                 | Applies expandable styles to the alert.                                                                                                                                                                                         |
-| `.pf-m-expanded`            | `.pf-c-alert.pf-m-expandable` | Applies expanded styles to an expandable alert.                                                                                                                                                                                 |
-| `.pf-m-truncate`            | `.pf-c-alert__title`          | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-c-alert__title--max-lines` (the default value is `1`). |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-alert` | `<div>` | Applies default alert styling. Always use with a modifier class. **Required** |
+| `.pf-c-alert__toggle` | `<div>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
+| `.pf-c-alert__toggle-icon` | `<span>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
+| `.pf-c-alert__icon` | `<div>` | Defines the alert icon. **Required** |
+| `.pf-c-alert__title` | `<p>, <h1-h6>` | Defines the alert title. **Required** |
+| `.pf-c-alert__description` | `<div>` | Defines the alert description area. |
+| `.pf-c-alert__action` | `<div>` | Defines the action button wrapper. Should contain `.pf-c-button.pf-m-plain` for close action or `.pf-c-button.pf-m-link` for link text. It should only include one action. |
+| `.pf-c-alert__action-group` | `<div>` | Defines the action button group. Should contain `.pf-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. |
+| `.pf-m-success` | `.pf-c-alert` | Applies success styling. |
+| `.pf-m-danger` | `.pf-c-alert` | Applies danger styling. |
+| `.pf-m-warning` | `.pf-c-alert` | Applies warning styling. |
+| `.pf-m-info` | `.pf-c-alert` | Applies info styling. |
+| `.pf-m-inline` | `.pf-c-alert` | Applies inline styling. |
+| `.pf-m-plain` | `.pf-c-alert.pf-m-inline` | Applies plain styling to an inline alert. |
+| `.pf-m-expandable` | `.pf-c-alert` | Applies expandable styles to the alert. |
+| `.pf-m-expanded` | `.pf-c-alert.pf-m-expandable` | Applies expanded styles to an expandable alert. |
+| `.pf-m-truncate` | `.pf-c-alert__title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-c-alert__title--max-lines` (the default value is `1`). |

package/docs/components/AlertGroup/examples/AlertGroup.md

@@ -7,7 +7,7 @@ cssPrefix: pf-c-alert-group
 ### Static alert group
 
 ```html
-<ul class="pf-c-alert-group">
+<ul class="pf-c-alert-group" role="list">
   <li class="pf-c-alert-group__item">
     <div class="pf-c-alert pf-m-inline pf-m-success" aria-label="Success alert">
       <div class="pf-c-alert__icon">
@@ -62,15 +62,15 @@ cssPrefix: pf-c-alert-group
 
 ### Usage
 
-| Attribute                 | Applied to | Outcome                                        |
-| ------------------------- | ---------- | ---------------------------------------------- |
-| `.pf-c-alert-group`       | `<ul>`     | Creates an alert group component. **Required** |
-| `.pf-c-alert-group__item` | `<li>`     | Creates an alert group item. **Required**      |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-alert-group` | `<ul>` | Creates an alert group component. **Required** |
+| `.pf-c-alert-group__item` | `<li>` | Creates an alert group item. **Required** |
 
 ### Toast alert group
 
 ```html isFullscreen
-<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 toast alert">
       <div class="pf-c-alert__icon">
@@ -157,15 +157,15 @@ When toast alerts include a link or action, these elements are not announced as
 
 For sighted users, interactive elements can be included in this message in one of the following ways:
 
--   Using a link to the Builds page: “The build is complete. Go to the [Builds](<>) page to download” using `<a href="url">Builds</a>`
--   Using a button to download: “The build is complete. Go to the Builds page to [download](<>)" using `<button class="pf-c-button pf-m-link pf-m-inline type="button">download</button>`
+*   Using a link to the Builds page: “The build is complete. Go to the [Builds]() page to download” using `<a href="url">Builds</a>`
+*   Using a button to download: “The build is complete. Go to the Builds page to [download]()" using `<button class="pf-c-button pf-m-link pf-m-inline type="button">download</button>`
 
 ### Modifiers
 
-| Class                                | Applied to          | Outcome                                                            |
-| ------------------------------------ | ------------------- | ------------------------------------------------------------------ |
-| `.pf-m-toast`                        | `.pf-c-alert-group` | Applies toast alert styling to an alert group.                     |
-| `.pf-c-alert-group__overflow-button` | `<button>`          | Applies overflow button styling to an alert group overflow button. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-toast`| `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
+| `.pf-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
 
 ## Documentation
 

package/docs/components/AppLauncher/examples/application-launcher.md

@@ -26,6 +26,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-collapsed-button"
+    role="list"
     hidden
   >
     <li>
@@ -69,6 +70,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-disabled-button"
+    role="list"
     hidden
   >
     <li>
@@ -111,6 +113,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-expanded-button"
+    role="list"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -152,6 +155,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu pf-m-align-right"
     aria-labelledby="application-launcher-aligned-right-button"
+    role="list"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -193,6 +197,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-aligned-top-button"
+    role="list"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -233,7 +238,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <section class="pf-c-app-launcher__group">
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Link not in group</a>
         </li>
@@ -242,7 +247,7 @@ cssPrefix: pf-c-app-launcher
     <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>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 1 link</a>
         </li>
@@ -254,7 +259,7 @@ cssPrefix: pf-c-app-launcher
     <hr class="pf-c-divider" />
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 2 link</a>
         </li>
@@ -287,7 +292,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <section class="pf-c-app-launcher__group">
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Link not in group</a>
         </li>
@@ -296,7 +301,7 @@ cssPrefix: pf-c-app-launcher
     </section>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 1 link</a>
         </li>
@@ -308,7 +313,7 @@ cssPrefix: pf-c-app-launcher
     </section>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 2 link</a>
         </li>
@@ -341,7 +346,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <section class="pf-c-app-launcher__group">
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">
             <span class="pf-c-app-launcher__menu-item-icon">
@@ -355,7 +360,7 @@ cssPrefix: pf-c-app-launcher
     <li class="pf-c-divider" role="separator"></li>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a
             class="pf-c-app-launcher__menu-item pf-m-external"
@@ -397,7 +402,7 @@ cssPrefix: pf-c-app-launcher
     </section>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a
             class="pf-c-app-launcher__menu-item pf-m-external"
@@ -478,7 +483,7 @@ cssPrefix: pf-c-app-launcher
     </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">
           <a
             class="pf-c-app-launcher__menu-item pf-m-link"
@@ -534,7 +539,7 @@ cssPrefix: pf-c-app-launcher
     <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">
           <a
             class="pf-c-app-launcher__menu-item pf-m-link"
@@ -590,7 +595,7 @@ cssPrefix: pf-c-app-launcher
     <hr class="pf-c-divider" />
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite">
           <a
             class="pf-c-app-launcher__menu-item pf-m-link"
@@ -652,40 +657,40 @@ cssPrefix: pf-c-app-launcher
 
 ### Accessibility
 
-| Attribute                           | Applied                                           | Outcome                                                                                                            |
-| ----------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `aria-label="Application launcher"` | `.pf-c-app-launcher`                              | Gives the app launcher element an accessible name. **Required**                                                    |
-| `aria-expanded="false"`             | `.pf-c-button`                                    | Indicates that the menu is hidden.                                                                                 |
-| `aria-expanded="true"`              | `.pf-c-button`                                    | Indicates that the menu is visible.                                                                                |
-| `aria-label="Actions"`              | `.pf-c-button`                                    | Provides an accessible name for the app launcher when an icon is used. **Required**                                |
-| `hidden`                            | `.pf-c-app-launcher__menu`                        | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `disabled`                          | `.pf-c-app-launcher__toggle`                      | Disables the app launcher toggle and removes it from keyboard focus.                                               |
-| `disabled`                          | `button.pf-c-app-launcher__menu-item`             | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.     |
-| `aria-disabled="true"`              | `a.pf-c-app-launcher__menu-item`                  | When the menu item uses a link element, indicates that it is unavailable.                                          |
-| `tabindex="-1"`                     | `a.pf-c-app-launcher__menu-item`                  | When the menu item uses a link element, removes it from keyboard focus.                                            |
-| `aria-hidden="true"`                | `.pf-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies.                                                                        |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `aria-label="Application launcher"` | `.pf-c-app-launcher` |  Gives the app launcher element an accessible name. **Required** |
+| `aria-expanded="false"` | `.pf-c-button` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-button` |  Indicates that the menu is visible. |
+| `aria-label="Actions"` | `.pf-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
+| `hidden` | `.pf-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `disabled` | `.pf-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
+| `disabled` | `button.pf-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
+| `aria-hidden="true"` | `.pf-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
 
 ### Usage
 
-| Class                                         | Applied                                                                      | Outcome                                                                                                |
-| --------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `.pf-c-app-launcher`                          | `<nav>`                                                                      | Defines the parent wrapper of the app launcher.                                                        |
-| `.pf-c-app-launcher__toggle`                  | `<button>`                                                                   | Defines the app launcher toggle.                                                                       |
-| `.pf-c-app-launcher__menu`                    | `<ul>`, `<div>`                                                              | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups.           |
-| `.pf-c-app-launcher__menu-search`             | `<div>`                                                                      | Defines the wrapper for the search input.                                                              |
-| `.pf-c-app-launcher__group`                   | `<section>`                                                                  | Defines a group of items. Required when there is more than one group.                                  |
-| `.pf-c-app-launcher__group-title`             | `<h1>`                                                                       | Defines a title for a group of items.                                                                  |
-| `.pf-c-app-launcher__menu-wrapper`            | `<li>`                                                                       | Defines a menu wrapper for use with multiple actionable items in a single item row.                    |
-| `.pf-c-app-launcher__menu-item`               | `<a>`, `<button>`                                                            | Defines a menu item.                                                                                   |
-| `.pf-c-app-launcher__menu-item-icon`          | `<span>`                                                                     | Defines the wrapper for the menu item icon.                                                            |
-| `.pf-c-app-launcher__menu-item-external-icon` | `<span>`                                                                     | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
-| `.pf-m-expanded`                              | `.pf-c-app-launcher`                                                         | Modifies for the expanded state.                                                                       |
-| `.pf-m-top`                                   | `.pf-c-app-launcher`                                                         | Modifies to display the menu above the toggle.                                                         |
-| `.pf-m-align-right`                           | `.pf-c-app-launcher__menu`                                                   | Modifies to display the menu aligned to the right edge of the toggle.                                  |
-| `.pf-m-static`                                | `.pf-c-app-launcher__menu`                                                   | Modifies to position the menu statically to support custom positioning.                                |
-| `.pf-m-disabled`                              | `a.pf-c-app-launcher__menu-item`                                             | Modifies to display the menu item as disabled.                                                         |
-| `.pf-m-external`                              | `.pf-c-app-launcher__menu-item`                                              | Modifies to display the menu item as having an external link icon on hover/focus.                      |
-| `.pf-m-favorite`                              | `.pf-c-app-launcher__menu-wrapper`                                           | Modifies wrapper to indicate that the item row has been favorited.                                     |
-| `.pf-m-link`                                  | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item for link styles.                                                                         |
-| `.pf-m-action`                                | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item to for action styles.                                                                    |
-| `.pf-m-active`                                | `.pf-c-app-launcher__toggle`                                                 | Forces display of the active state of the toggle.                                                      |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
+| `.pf-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
+| `.pf-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
+| `.pf-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
+| `.pf-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
+| `.pf-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
+| `.pf-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
+| `.pf-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
+| `.pf-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
+| `.pf-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
+| `.pf-m-expanded` | `.pf-c-app-launcher` | Modifies for the expanded state. |
+| `.pf-m-top` | `.pf-c-app-launcher` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-right` | `.pf-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
+| `.pf-m-static` | `.pf-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
+| `.pf-m-disabled` | `a.pf-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
+| `.pf-m-external` | `.pf-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
+| `.pf-m-favorite` | `.pf-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
+| `.pf-m-link` | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item for link styles. |
+| `.pf-m-action` | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item to for action styles. |
+| `.pf-m-active` | `.pf-c-app-launcher__toggle` | Forces display of the active state of the toggle. |

package/docs/components/Avatar/examples/Avatar.md

@@ -91,18 +91,18 @@ The avatar component provides a default SVG icon. If an image is used it should
 
 ### Accessibility
 
-| Attribute | Applied to     | Outcome                                                                                   |
-| --------- | -------------- | ----------------------------------------------------------------------------------------- |
-| `alt`     | `.pf-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `alt` | `.pf-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
 
 ### Usage
 
-| Class                        | Applied to     | Outcome                                                                                                                                                                             |
-| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-avatar`               | `<img>`        | Initiates an avatar image. **Required**                                                                                                                                             |
-| `.pf-m-light`                | `.pf-c-avatar` | Modifies an avatar for use against a light background.                                                                                                                              |
-| `.pf-m-dark`                 | `.pf-c-avatar` | Modifies an avatar for use against a dark background.                                                                                                                               |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
+| `.pf-m-light` | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
+| `.pf-m-dark` | `.pf-c-avatar` | Modifies an avatar for use against a dark background. |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/BackToTop/examples/BackToTop.md

@@ -24,7 +24,7 @@ cssPrefix: pf-c-back-to-top
 
 ### Usage
 
-| Class               | Applied to          | Outcome                                           |
-| ------------------- | ------------------- | ------------------------------------------------- |
-| `.pf-c-back-to-top` | `<div>`             | Initiates the back to top component. **Required** |
-| `.pf-m-hidden`      | `.pf-c-back-to-top` | Modifies the component to be hidden.              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-back-to-top` | `<div>` | Initiates the back to top component. **Required** |
+| `.pf-m-hidden` | `.pf-c-back-to-top` | Modifies the component to be hidden. |

package/docs/components/Backdrop/examples/Backdrop.md

@@ -19,7 +19,7 @@ This component puts a backdrop over the entire viewport.
 
 ### Usage
 
-| Class                  | Applied to | Outcome                                                                                                                                                    |
-| ---------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-backdrop`       | `<div>`    | Initiates backdrop. **Required**                                                                                                                           |
-| `.pf-c-backdrop__open` | `<body>`   | Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-backdrop` | `<div>` |  Initiates backdrop. **Required** |
+| `.pf-c-backdrop__open` | `<body>` |  Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -42,7 +42,7 @@ This component puts an image on the background with an svg filter applied to it.
 
 ### Usage
 
-| Class                            | Applied to | Outcome                                                            |
-| -------------------------------- | ---------- | ------------------------------------------------------------------ |
-| `.pf-c-background-image`         | `*`        | A fixed background image is applied to the background of the page. |
-| `.pf-c-background-image__filter` | `*`        | The inline svg that provides the filter for the background image.  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-background-image` | `*` |  A fixed background image is applied to the background of the page. |
+| `.pf-c-background-image__filter` | `*` |  The inline svg that provides the filter for the background image. |