@patternfly/patternfly 4.183.2 → 4.184.2

package/docs/components/Pagination/examples/Pagination.md

@@ -2,7 +2,9 @@
 id: Pagination
 section: components
 cssPrefix: pf-c-pagination
----## Examples
+---import './Pagination.css'
+
+## Examples
 
 ### Top
 
@@ -13,23 +15,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-top-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-top-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-options-menu-top-example-toggle"
@@ -115,23 +115,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu pf-m-expanded">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-top-expanded-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="true"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-top-expanded-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-options-menu-top-expanded-example-toggle"
@@ -216,23 +214,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-top-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-top-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-options-menu-top-example-toggle"
@@ -328,23 +324,21 @@ cssPrefix: pf-c-pagination
     <b>many</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-top-indeterminate-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>many</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-top-indeterminate-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-options-menu-top-indeterminate-example-toggle"
@@ -425,23 +419,21 @@ cssPrefix: pf-c-pagination
 ```html
 <div class="pf-c-pagination pf-m-bottom">
   <div class="pf-c-options-menu pf-m-top">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-bottom-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-bottom-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu pf-m-top"
       aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -533,23 +525,21 @@ cssPrefix: pf-c-pagination
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
 <div class="pf-c-pagination pf-m-bottom pf-m-sticky">
   <div class="pf-c-options-menu pf-m-top">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-bottom-sticky-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-bottom-sticky-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu pf-m-top"
       aria-labelledby="pagination-options-menu-bottom-sticky-example-toggle"
@@ -635,24 +625,22 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-disabled pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-top-disabled-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+      disabled
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-top-disabled-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-        disabled
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-options-menu-top-disabled-example-toggle"
@@ -741,23 +729,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-options-menu-compact-example-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-options-menu-compact-example-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-options-menu-compact-example-toggle"
@@ -813,23 +799,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-top-with-summary-modifier-options-menu-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-top-with-summary-modifier-options-menu-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-top-with-summary-modifier-options-menu-toggle"
@@ -915,23 +899,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-top-with-full-modifier-options-menu-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-top-with-full-modifier-options-menu-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-top-with-full-modifier-options-menu-toggle"
@@ -1019,23 +1001,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
@@ -1121,23 +1101,21 @@ cssPrefix: pf-c-pagination
     <b>36</b>
   </div>
   <div class="pf-c-options-menu">
-    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+    <button
+      class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+      type="button"
+      id="pagination-compact-with-full-modifier-options-menu-toggle"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+    >
       <span class="pf-c-options-menu__toggle-text">
         <b>1 - 10</b>&nbsp;of&nbsp;
         <b>36</b>
       </span>
-      <button
-        class="pf-c-options-menu__toggle-button"
-        id="pagination-compact-with-full-modifier-options-menu-toggle"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        aria-label="Items per page"
-      >
-        <span class="pf-c-options-menu__toggle-button-icon">
-          <i class="fas fa-caret-down" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
+      <div class="pf-c-options-menu__toggle-icon">
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </div>
+    </button>
     <ul
       class="pf-c-options-menu__menu"
       aria-labelledby="pagination-compact-with-full-modifier-options-menu-toggle"

package/docs/components/Toolbar/examples/Toolbar.md

@@ -3137,23 +3137,21 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
         <div class="pf-c-pagination" aria-label="Element pagination">
           <div class="pf-c-pagination__total-items">37 items</div>
           <div class="pf-c-options-menu">
-            <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+            <button
+              class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+              type="button"
+              id="toolbar-stacked-example-pagination-options-menu-toggle"
+              aria-haspopup="listbox"
+              aria-expanded="false"
+            >
               <span class="pf-c-options-menu__toggle-text">
                 <b>1 - 10</b>&nbsp;of&nbsp;
                 <b>36</b>
               </span>
-              <button
-                class="pf-c-options-menu__toggle-button"
-                id="toolbar-stacked-example-pagination-options-menu-toggle"
-                aria-haspopup="listbox"
-                aria-expanded="false"
-                aria-label="Items per page"
-              >
-                <span class="pf-c-options-menu__toggle-button-icon">
-                  <i class="fas fa-caret-down" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
+              <div class="pf-c-options-menu__toggle-icon">
+                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              </div>
+            </button>
             <ul
               class="pf-c-options-menu__menu"
               aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
@@ -3652,23 +3650,21 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
         <div class="pf-c-pagination" aria-label="Element pagination">
           <div class="pf-c-pagination__total-items">37 items</div>
           <div class="pf-c-options-menu">
-            <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+            <button
+              class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+              type="button"
+              id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
+              aria-haspopup="listbox"
+              aria-expanded="false"
+            >
               <span class="pf-c-options-menu__toggle-text">
                 <b>1 - 10</b>&nbsp;of&nbsp;
                 <b>36</b>
               </span>
-              <button
-                class="pf-c-options-menu__toggle-button"
-                id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
-                aria-haspopup="listbox"
-                aria-expanded="false"
-                aria-label="Items per page"
-              >
-                <span class="pf-c-options-menu__toggle-button-icon">
-                  <i class="fas fa-caret-down" aria-hidden="true"></i>
-                </span>
-              </button>
-            </div>
+              <div class="pf-c-options-menu__toggle-icon">
+                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              </div>
+            </button>
             <ul
               class="pf-c-options-menu__menu"
               aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"

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

@@ -75,7 +75,7 @@ wrapperTag: div
           </li>
         </ol>
       </nav>
-      <main class="pf-c-wizard__main">
+      <main class="pf-c-wizard__main" tabindex="0">
         <div class="pf-c-wizard__main-body">
           <form novalidate class="pf-c-form">
             <div class="pf-c-form__group">
@@ -302,7 +302,7 @@ wrapperTag: div
           </li>
         </ol>
       </nav>
-      <main class="pf-c-wizard__main">
+      <main class="pf-c-wizard__main" tabindex="0">
         <div class="pf-c-wizard__main-body">
           <form novalidate class="pf-c-form">
             <div class="pf-c-form__group">
@@ -536,7 +536,7 @@ wrapperTag: div
           </li>
         </ol>
       </nav>
-      <main class="pf-c-wizard__main">
+      <main class="pf-c-wizard__main" tabindex="0">
         <div class="pf-c-wizard__main-body">
           <form novalidate class="pf-c-form">
             <div class="pf-c-form__group">
@@ -794,7 +794,7 @@ wrapperTag: div
           </li>
         </ol>
       </nav>
-      <main class="pf-c-wizard__main">
+      <main class="pf-c-wizard__main" tabindex="0">
         <div class="pf-c-wizard__main-body">
           <form novalidate class="pf-c-form">
             <div class="pf-c-form__group">
@@ -1039,7 +1039,7 @@ wrapperTag: div
           </li>
         </ol>
       </nav>
-      <main class="pf-c-wizard__main">
+      <main class="pf-c-wizard__main" tabindex="0">
         <div class="pf-c-wizard__main-body">
           <div class="pf-l-bullseye">
             <div class="pf-c-empty-state pf-m-lg">
@@ -1106,19 +1106,20 @@ 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`**       |
+| 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
 

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

@@ -407,23 +407,21 @@ section: demos
             <div class="pf-c-toolbar__item pf-m-pagination">
               <div class="pf-c-pagination pf-m-compact">
                 <div class="pf-c-options-menu">
-                  <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+                  <button
+                    class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+                    type="button"
+                    id="-top-pagination-toggle"
+                    aria-haspopup="listbox"
+                    aria-expanded="false"
+                  >
                     <span class="pf-c-options-menu__toggle-text">
                       <b>1 - 10</b>&nbsp;of&nbsp;
                       <b>36</b>
                     </span>
-                    <button
-                      class="pf-c-options-menu__toggle-button"
-                      id="-top-pagination-toggle"
-                      aria-haspopup="listbox"
-                      aria-expanded="false"
-                      aria-label="Items per page"
-                    >
-                      <span class="pf-c-options-menu__toggle-button-icon">
-                        <i class="fas fa-caret-down" aria-hidden="true"></i>
-                      </span>
-                    </button>
-                  </div>
+                    <div class="pf-c-options-menu__toggle-icon">
+                      <i class="fas fa-caret-down" aria-hidden="true"></i>
+                    </div>
+                  </button>
                   <ul
                     class="pf-c-options-menu__menu"
                     aria-labelledby="-top-pagination-toggle"
@@ -1259,23 +1257,21 @@ section: demos
     >
       <div class="pf-c-pagination pf-m-bottom">
         <div class="pf-c-options-menu pf-m-top">
-          <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
+          <button
+            class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+            type="button"
+            id="pagination-options-menu-bottom-example-toggle"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+          >
             <span class="pf-c-options-menu__toggle-text">
               <b>1 - 10</b>&nbsp;of&nbsp;
               <b>36</b>
             </span>
-            <button
-              class="pf-c-options-menu__toggle-button"
-              id="pagination-options-menu-bottom-example-toggle"
-              aria-haspopup="listbox"
-              aria-expanded="false"
-              aria-label="Items per page"
-            >
-              <span class="pf-c-options-menu__toggle-button-icon">
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
-              </span>
-            </button>
-          </div>
+            <div class="pf-c-options-menu__toggle-icon">
+              <i class="fas fa-caret-down" aria-hidden="true"></i>
+            </div>
+          </button>
           <ul
             class="pf-c-options-menu__menu pf-m-top"
             aria-labelledby="pagination-options-menu-bottom-example-toggle"