@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.11

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

@@ -1974,31 +1974,46 @@ cssPrefix: pf-v5-c-tree-view
               class="pf-v5-c-dropdown__menu pf-m-align-right"
               aria-labelledby="dropdown-kebab-button"
               hidden
+              role="menu"
             >
-              <li>
-                <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+              <li role="none">
+                <a
+                  class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
+                  href="#"
+                >Link</a>
               </li>
-              <li>
-                <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+              <li role="none">
+                <button
+                  class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
+                  type="button"
+                >Action</button>
               </li>
-              <li>
+              <li role="none">
                 <a
                   class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+                  role="menuitem"
                   href="#"
                   aria-disabled="true"
                   tabindex="-1"
                 >Disabled link</a>
               </li>
-              <li>
+              <li role="none">
                 <button
                   class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
                   type="button"
                   disabled
                 >Disabled action</button>
               </li>
               <li class="pf-v5-c-divider" role="separator"></li>
-              <li>
-                <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+              <li role="none">
+                <a
+                  class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
+                  href="#"
+                >Separated link</a>
               </li>
             </ul>
           </div>

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

@@ -51,30 +51,38 @@ wrapperTag: div
       <nav class="pf-v5-c-wizard__nav" aria-label="Steps">
         <ol class="pf-v5-c-wizard__nav-list" role="list">
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Information</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link pf-m-current">Configuration</button>
+            <button
+              class="pf-v5-c-wizard__nav-link pf-m-current"
+              type="button"
+            >Configuration</button>
             <ol class="pf-v5-c-wizard__nav-list" role="list">
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep A</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
                 <button
                   class="pf-v5-c-wizard__nav-link pf-m-current"
+                  type="button"
                   aria-current="page"
                 >Substep B</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep C</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep C</button>
               </li>
             </ol>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Additional</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Additional</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link" disabled>Review</button>
+            <button
+              class="pf-v5-c-wizard__nav-link"
+              type="button"
+              disabled
+            >Review</button>
           </li>
         </ol>
       </nav>
@@ -281,30 +289,38 @@ wrapperTag: div
       <nav class="pf-v5-c-wizard__nav pf-m-expanded" aria-label="Steps">
         <ol class="pf-v5-c-wizard__nav-list" role="list">
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Information</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link pf-m-current">Configuration</button>
+            <button
+              class="pf-v5-c-wizard__nav-link pf-m-current"
+              type="button"
+            >Configuration</button>
             <ol class="pf-v5-c-wizard__nav-list" role="list">
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep A</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
                 <button
                   class="pf-v5-c-wizard__nav-link pf-m-current"
+                  type="button"
                   aria-current="page"
                 >Substep B</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep C</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep C</button>
               </li>
             </ol>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Additional</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Additional</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link" disabled>Review</button>
+            <button
+              class="pf-v5-c-wizard__nav-link"
+              type="button"
+              disabled
+            >Review</button>
           </li>
         </ol>
       </nav>
@@ -462,30 +478,38 @@ wrapperTag: div
       <nav class="pf-v5-c-wizard__nav" aria-label="Steps">
         <ol class="pf-v5-c-wizard__nav-list" role="list">
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Information</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link pf-m-current">Configuration</button>
+            <button
+              class="pf-v5-c-wizard__nav-link pf-m-current"
+              type="button"
+            >Configuration</button>
             <ol class="pf-v5-c-wizard__nav-list" role="list">
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep A</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
                 <button
                   class="pf-v5-c-wizard__nav-link pf-m-current"
+                  type="button"
                   aria-current="page"
                 >Substep B</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep C</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep C</button>
               </li>
             </ol>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Additional</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Additional</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link" disabled>Review</button>
+            <button
+              class="pf-v5-c-wizard__nav-link"
+              type="button"
+              disabled
+            >Review</button>
           </li>
         </ol>
       </nav>
@@ -721,11 +745,16 @@ wrapperTag: div
           <li class="pf-v5-c-wizard__nav-item">
             <button
               class="pf-v5-c-wizard__nav-link pf-m-current"
+              type="button"
               aria-current="page"
             >Information</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item pf-m-expandable">
-            <button class="pf-v5-c-wizard__nav-link" aria-expanded="false">
+            <button
+              class="pf-v5-c-wizard__nav-link"
+              type="button"
+              aria-expanded="false"
+            >
               <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
               <span class="pf-v5-c-wizard__nav-link-toggle">
                 <span class="pf-v5-c-wizard__nav-link-toggle-icon">
@@ -735,21 +764,25 @@ wrapperTag: div
             </button>
             <ol class="pf-v5-c-wizard__nav-list" role="list">
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep A</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep B</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep B</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep C</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep C</button>
               </li>
             </ol>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Additional</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Additional</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link" disabled>Review</button>
+            <button
+              class="pf-v5-c-wizard__nav-link"
+              type="button"
+              disabled
+            >Review</button>
           </li>
         </ol>
       </nav>
@@ -956,11 +989,12 @@ wrapperTag: div
       <nav class="pf-v5-c-wizard__nav" aria-label="Steps">
         <ol class="pf-v5-c-wizard__nav-list" role="list">
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Information</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item pf-m-expandable pf-m-expanded">
             <button
               class="pf-v5-c-wizard__nav-link pf-m-current"
+              type="button"
               aria-expanded="true"
             >
               <span class="pf-v5-c-wizard__nav-link-text">Configuration</span>
@@ -972,24 +1006,29 @@ wrapperTag: div
             </button>
             <ol class="pf-v5-c-wizard__nav-list" role="list">
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep A</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
                 <button
                   class="pf-v5-c-wizard__nav-link pf-m-current"
+                  type="button"
                   aria-current="page"
                 >Substep B</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep C</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep C</button>
               </li>
             </ol>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Additional</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Additional</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link" disabled>Review</button>
+            <button
+              class="pf-v5-c-wizard__nav-link"
+              type="button"
+              disabled
+            >Review</button>
           </li>
         </ol>
       </nav>
@@ -1196,27 +1235,27 @@ wrapperTag: div
       <nav class="pf-v5-c-wizard__nav" aria-label="Steps">
         <ol class="pf-v5-c-wizard__nav-list" role="list">
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Information</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Information</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Configuration</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Configuration</button>
             <ol class="pf-v5-c-wizard__nav-list" role="list">
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep A</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep A</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep B</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep B</button>
               </li>
               <li class="pf-v5-c-wizard__nav-item">
-                <button class="pf-v5-c-wizard__nav-link">Substep C</button>
+                <button class="pf-v5-c-wizard__nav-link" type="button">Substep C</button>
               </li>
             </ol>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Additional</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Additional</button>
           </li>
           <li class="pf-v5-c-wizard__nav-item">
-            <button class="pf-v5-c-wizard__nav-link">Review</button>
+            <button class="pf-v5-c-wizard__nav-link" type="button">Review</button>
           </li>
         </ol>
       </nav>

package/docs/demos/Card/examples/Card.css

@@ -1,5 +1,5 @@
 #ws-html-demos-c-card-status-card-expanded-with-popover {
-  padding-top: 180px;
+  padding-block-start: 180px;
 }
 
 #ws-html-demos-c-card-status-card-expanded-with-popover #carview-demo--popover-parent,
@@ -9,10 +9,10 @@
 
 #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-popover {
   position: absolute;
-  margin-top: -12px;
+  margin-block-start: -12px;
   z-index: 1000;
   transform: translateY(-50%);
-  left: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
+ inset-inline-start: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
 }
 
 #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-table {

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

@@ -39,31 +39,42 @@ wrapperTag: div
           class="pf-v5-c-dropdown__menu"
           aria-labelledby="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -169,31 +180,42 @@ wrapperTag: div
           class="pf-v5-c-dropdown__menu"
           aria-labelledby="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -765,30 +787,33 @@ wrapperTag: div
     </div>
   </div>
   <div class="pf-v5-c-card__body">
-    <div class="pf-v5-c-tabs pf-m-fill" id="status-tabs">
-      <ul class="pf-v5-c-tabs__list">
-        <li class="pf-v5-c-tabs__item pf-m-current">
+    <div class="pf-v5-c-tabs pf-m-fill" role="region" id="status-tabs">
+      <ul class="pf-v5-c-tabs__list" role="tablist">
+        <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
           <button
             type="button"
             class="pf-v5-c-tabs__link"
+            role="tab"
             id="status-tabs-object-1-link"
           >
             <span class="pf-v5-c-tabs__item-text">Object 1</span>
           </button>
         </li>
-        <li class="pf-v5-c-tabs__item">
+        <li class="pf-v5-c-tabs__item" role="presentation">
           <button
             type="button"
             class="pf-v5-c-tabs__link"
+            role="tab"
             id="status-tabs-object-2-link"
           >
             <span class="pf-v5-c-tabs__item-text">Object 2</span>
           </button>
         </li>
-        <li class="pf-v5-c-tabs__item">
+        <li class="pf-v5-c-tabs__item" role="presentation">
           <button
             type="button"
             class="pf-v5-c-tabs__link"
+            role="tab"
             id="status-tabs-object-3-link"
           >
             <span class="pf-v5-c-tabs__item-text">Object 3</span>
@@ -2731,7 +2756,7 @@ wrapperTag: div
       </div>
       <div
         class="pf-v5-c-card__actions pf-m-no-offset"
-        style="padding-top: 1px;"
+        style="padding-block-start: 1px;"
       >
         <div class="pf-v5-c-select">
           <span
@@ -2916,7 +2941,7 @@ wrapperTag: div
         <div
           class="pf-v5-c-card__title"
           id="card-log-view-example-title1"
-          style="padding-top: 3px;"
+          style="padding-block-start: 3px;"
         >
           <h2 class="pf-v5-c-title pf-m-lg">Activity</h2>
         </div>
@@ -3071,7 +3096,7 @@ wrapperTag: div
         <div
           class="pf-v5-c-card__title"
           id="card-events-view-example-title1"
-          style="padding-top: 3px;"
+          style="padding-block-start: 3px;"
         >
           <h2 class="pf-v5-c-title pf-m-lg">Events</h2>
         </div>