@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/components/Tooltip/examples/Tooltip.md

@@ -128,13 +128,13 @@ A tooltip is used to provide contextual information for another component on hov
 
 ### Usage
 
-| Class                       | Applied to               | Outcome                                                                                                                           |
-| --------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-tooltip`             | `<div>`                  | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
-| `.pf-c-tooltip__arrow`      | `<div>`                  | Creates an arrow pointing towards the element the tooltip describes. **Required**                                                 |
-| `.pf-c-tooltip__content`    | `<div>`                  | Creates the body of the tooltip. **Required**                                                                                     |
-| `.pf-m-left{-top/bottom}`   | `.pf-c-tooltip`          | Positions the tooltip to the left (or left top/left bottom) of the element.                                                       |
-| `.pf-m-right{-top/bottom}`  | `.pf-c-tooltip`          | Positions the tooltip to the right (or right top/right bottom) of the element.                                                    |
-| `.pf-m-top{-left/right}`    | `.pf-c-tooltip`          | Positions the tooltip to the top (or top left/top right) of the element.                                                          |
-| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip`          | Positions the tooltip to the bottom (or bottom left/bottom right) of the element.                                                 |
-| `.pf-m-text-align-left`     | `.pf-c-tooltip__content` | Modifies tooltip content to text align left.                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-tooltip` | `<div>` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
+| `.pf-c-tooltip__arrow` | `<div>` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
+| `.pf-c-tooltip__content` | `<div>` |  Creates the body of the tooltip. **Required** |
+| `.pf-m-left{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
+| `.pf-m-right{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
+| `.pf-m-top{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
+| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
+| `.pf-m-text-align-left` | `.pf-c-tooltip__content` | Modifies tooltip content to text align left. |

package/docs/components/TreeView/examples/TreeView.md

@@ -3356,40 +3356,40 @@ cssPrefix: pf-c-tree-view
 
 ### Accessibility
 
-| Attribute                          | Applied to                                 | Outcome                                                                                                                                                                                                                             |
-| ---------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="tree"`                      | `.pf-c-tree-view__list`                    | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only**                                                                                                                                                          |
-| `role="group"`                     | `.pf-c-tree-view__list`                    | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`**                                                                                        |
-| `role="treeitem"`                  | `.pf-c-tree-view__list-item`               | Hides the implicit listitem role of the li element from assistive technologies.                                                                                                                                                     |
-| `aria-expanded="false"`            | `.pf-c-tree-view__list-item`               | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible.                                                                                                                         |
-| `aria-expanded="true"`             | `.pf-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible.                                                                                                                                                       |
-| `tabindex="-1"`                    | `.pf-c-tree-view__list-item`               | Makes the element with the treeitem role focusable without including it in the tab sequence of the page.                                                                                                                            |
-| `tabindex="0"`                     | `.pf-c-tree-view__list-item`               | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
-| `aria-label="[button label text]"` | `.pf-c-tree-view__action`                  | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text**                                                                                             |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="tree"` | `.pf-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
+| `role="group"` | `.pf-c-tree-view__list` | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`** |
+| `role="treeitem"` | `.pf-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
+| `aria-expanded="false"` | `.pf-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
+| `aria-expanded="true"` | `.pf-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
+| `tabindex="-1"` | `.pf-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
+| `tabindex="0"` | `.pf-c-tree-view__list-item` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
+| `aria-label="[button label text]"` | `.pf-c-tree-view__action` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
 
 ### Usage
 
-| Class                               | Applied                                                                        | Outcome                                                                                                                            |
-| ----------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-tree-view`                   | `<div>`                                                                        | Initiates the tree view container. **Required**                                                                                    |
-| `.pf-c-tree-view__list`             | `<ul>`                                                                         | Initiates a tree view list. **Required**                                                                                           |
-| `.pf-c-tree-view__list-item`        | `<li>`                                                                         | Initiates a tree view list item. **Required**                                                                                      |
-| `.pf-c-tree-view__content`          | `<div>`                                                                        | Initiates a tree view node. **Required**                                                                                           |
-| `.pf-c-tree-view__node`             | `<button>`, `<label>`                                                          | Initiates a tree view node. **Required**                                                                                           |
-| `.pf-c-tree-view__node-container`   | `<span>`                                                                       | Initiates a tree view node container. **Required for compact variant**                                                             |
-| `.pf-c-tree-view__node-content`     | `<span>`                                                                       | Initiates a tree view node content container used to stack elements.                                                               |
-| `.pf-c-tree-view__node-count`       | `<span>`                                                                       | Initiates a tree view node count.                                                                                                  |
-| `.pf-c-tree-view__node-toggle`      | `<span>`, `<button>`                                                           | Initiates a tree view toggle.                                                                                                      |
-| `.pf-c-tree-view__node-toggle-icon` | `<span>`                                                                       | Initiates a tree view toggle icon.                                                                                                 |
-| `.pf-c-tree-view__node-title`       | `<span>`                                                                       | Initiates a tree view node title.                                                                                                  |
-| `.pf-c-tree-view__node-text`        | `<span>`, `<button>`                                                           | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable.                                   |
-| `.pf-c-tree-view__node-icon`        | `<span>`                                                                       | Initiates a tree view icon.                                                                                                        |
-| `.pf-c-tree-view__node-check`       | `<span>`                                                                       | Initiates a tree view check.                                                                                                       |
-| `.pf-c-tree-view__action`           | `<div>`                                                                        | Initiates a tree view action wrapper.                                                                                              |
-| `.pf-c-tree-view__search`           | `<div>`                                                                        | Initiates a tree view search wrapper.                                                                                              |
-| `.pf-m-guides`                      | `.pf-c-tree-view`                                                              | Modifies the tree view to the guides presentation.                                                                                 |
-| `.pf-m-compact`                     | `.pf-c-tree-view`                                                              | Modifies the tree view to the compact presentation.                                                                                |
-| `.pf-m-no-background`               | `.pf-c-tree-view.pf-m-compact`                                                 | Modifies the tree view compact variant node containers to have a transparent background.                                           |
-| `.pf-m-current`                     | `.pf-c-tree-view__node`                                                        | Modifies the tree view node to be current.                                                                                         |
-| `.pf-m-selectable`                  | `.pf-c-tree-view__node`                                                        | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
-| `.pf-m-truncate`                    | `.pf-c-tree-view`, `.pf-c-tree-view__node-title`, `.pf-c-tree-view__node-text` | Modifies the tree view title or text to truncate.                                                                                  |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
+| `.pf-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
+| `.pf-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
+| `.pf-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
+| `.pf-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
+| `.pf-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
+| `.pf-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
+| `.pf-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
+| `.pf-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
+| `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
+| `.pf-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
+| `.pf-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
+| `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
+| `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
+| `.pf-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
+| `.pf-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
+| `.pf-m-guides` | `.pf-c-tree-view` | Modifies the tree view to the guides presentation. |
+| `.pf-m-compact` | `.pf-c-tree-view` | Modifies the tree view to the compact presentation. |
+| `.pf-m-no-background` | `.pf-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
+| `.pf-m-current` | `.pf-c-tree-view__node` | Modifies the tree view node to be current. |
+| `.pf-m-selectable` | `.pf-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
+| `.pf-m-truncate` | `.pf-c-tree-view`, `.pf-c-tree-view__node-title`, `.pf-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |

package/docs/components/Truncate/examples/Truncate.md

@@ -1,6 +1,5 @@
 ---
 id: 'Truncate'
-beta: true
 section: components
 cssPrefix: pf-c-truncate
 ---import './Truncate.css'
@@ -55,8 +54,8 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
 
 ### Usage
 
-| Class                   | Applied  | Outcome                                       |
-| ----------------------- | -------- | --------------------------------------------- |
-| `.pf-c-truncate`        | `<span>` | Initiates the truncate component.             |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-truncate` | `<span>` | Initiates the truncate component. |
 | `.pf-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
-| `.pf-c-truncate__end`   | `<span>` | Defines the truncate component ending text.   |
+| `.pf-c-truncate__end` | `<span>` | Defines the truncate component ending text. |

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

@@ -12,15 +12,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -46,13 +45,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>
@@ -218,15 +217,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -252,13 +250,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>
@@ -424,15 +422,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -458,13 +455,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>
@@ -678,15 +675,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -712,7 +708,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 +724,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>
@@ -912,15 +908,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -946,7 +941,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 +957,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>
@@ -1149,15 +1144,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard pf-m-finished">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -1183,13 +1177,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>
@@ -1214,24 +1208,23 @@ wrapperTag: div
           <div class="pf-l-bullseye">
             <div class="pf-c-empty-state pf-m-lg">
               <div class="pf-c-empty-state__content">
-                <i
-                  class="fas fa- fa-cogs pf-c-empty-state__icon"
-                  aria-hidden="true"
-                ></i>
+                <div class="pf-c-empty-state__icon">
+                  <i class="fas fa- fa-cogs" aria-hidden="true"></i>
+                </div>
 
-                <h1
-                  class="pf-c-title pf-m-lg"
+                <div
+                  class="pf-c-empty-state__title"
                   id="wizard-finished-empty-state-title"
-                >Validating credentials</h1>
+                >
+                  <h1
+                    class="pf-c-empty-state__title-text"
+                  >Validating credentials</h1>
+                </div>
                 <div class="pf-c-empty-state__body">
                   <div
                     class="pf-c-progress pf-m-singleline"
                     id="progress-singleline-example"
                   >
-                    <div
-                      class="pf-c-progress__description"
-                      id="progress-singleline-example-description"
-                    ></div>
                     <div class="pf-c-progress__status" aria-hidden="true">
                       <span class="pf-c-progress__measure">33%</span>
                     </div>
@@ -1251,9 +1244,7 @@ wrapperTag: div
                 <div
                   class="pf-c-empty-state__body"
                 >Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
-                <div class="pf-c-empty-state__secondary">
-                  <button class="pf-c-button pf-m-link" type="button">Cancel</button>
-                </div>
+                <button class="pf-c-button pf-m-link" type="button">Cancel</button>
               </div>
             </div>
           </div>
@@ -1276,53 +1267,54 @@ 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` | `<div>` | Initiates the close button. **Required** |
+| `.pf-c-wizard__title` | `<div>` | Initiates the title container. **Required** |
+| `.pf-c-wizard__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Initiates the wizard title text. |
+| `.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>
@@ -946,7 +946,6 @@ This demo implements the about modal, including the backdrop.
             id="about-modal-title"
           >Red Hat OpenShift Container Platform</h1>
         </div>
-        <div class="pf-c-about-modal-box__hero"></div>
         <div class="pf-c-about-modal-box__content">
           <div class="pf-c-content">
             <dl>