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

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

@@ -55,8 +55,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

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

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

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

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

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

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

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