@patternfly/patternfly 5.0.2 → 5.1.0-prerelease.10

package/docs/components/Menu/examples/Menu.md

@@ -4795,9 +4795,14 @@ cssPrefix: pf-v5-c-menu
               <ul
                 class="pf-v5-c-dropdown__menu"
                 aria-labelledby="drilldown-with-breadcrumbs-level-3-breadcrumb-breadcrumb-dropdown-button"
+                role="menu"
               >
-                <li>
-                  <button class="pf-v5-c-dropdown__menu-item" type="button">
+                <li role="none">
+                  <button
+                    class="pf-v5-c-dropdown__menu-item"
+                    role="menuitem"
+                    type="button"
+                  >
                     <span class="pf-v5-c-dropdown__menu-item-icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>Edit
@@ -5039,16 +5044,25 @@ cssPrefix: pf-v5-c-menu
               <ul
                 class="pf-v5-c-dropdown__menu"
                 aria-labelledby="drilldown-with-breadcrumbs-level-4-breadcrumb-breadcrumb-dropdown-button"
+                role="menu"
               >
-                <li>
-                  <button class="pf-v5-c-dropdown__menu-item" type="button">
+                <li role="none">
+                  <button
+                    class="pf-v5-c-dropdown__menu-item"
+                    role="menuitem"
+                    type="button"
+                  >
                     <span class="pf-v5-c-dropdown__menu-item-icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>Edit
                   </button>
                 </li>
-                <li>
-                  <button class="pf-v5-c-dropdown__menu-item" type="button">
+                <li role="none">
+                  <button
+                    class="pf-v5-c-dropdown__menu-item"
+                    role="menuitem"
+                    type="button"
+                  >
                     <span class="pf-v5-c-dropdown__menu-item-icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>Deployment
@@ -6222,20 +6236,26 @@ cssPrefix: pf-v5-c-menu
         </a>
       </li>
       <li class="pf-v5-c-menu__list-item pf-m-loading" role="none">
-        <svg
-          class="pf-v5-c-spinner pf-m-lg"
-          role="progressbar"
-          viewBox="0 0 100 100"
-          aria-label="Loading items"
-        >
-          <circle
-            class="pf-v5-c-spinner__path"
-            cx="50"
-            cy="50"
-            r="45"
-            fill="none"
-          />
-        </svg>
+        <button class="pf-v5-c-menu__item" type="button" role="menuitem">
+          <span class="pf-v5-c-menu__item-main">
+            <span class="pf-v5-c-menu__item-text">
+              <svg
+                class="pf-v5-c-spinner pf-m-lg"
+                role="progressbar"
+                viewBox="0 0 100 100"
+                aria-label="Loading items"
+              >
+                <circle
+                  class="pf-v5-c-spinner__path"
+                  cx="50"
+                  cy="50"
+                  r="45"
+                  fill="none"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
       </li>
     </ul>
   </div>
@@ -6601,6 +6621,7 @@ cssPrefix: pf-v5-c-menu
 | `aria-disabled="true"` | `.pf-v5-c-menu__item` | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. |
 | `tabindex="-1"` | `a.pf-v5-c-menu__item` | When the menu item uses a link element and has `aria-disabled="true"` passed in, removes it from keyboard focus. This is similar to passing `disabled` to a menu item that uses a button element. |
 | `aria-hidden="true"` | `.pf-v5-c-menu__item-icon`, `.pf-v5-c-menu__item-action-icon`, `.pf-v5-c-menu__item-external-icon`, `.pf-v5-c-menu__item-toggle-icon`, `.pf-v5-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
+| `aria-label="Descriptive text"` | `.pf-v5-c-menu__item-action-icon` | There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon. |
 | `aria-label="Not starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
 | `aria-label="Starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
 

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -974,7 +974,7 @@ cssPrefix: pf-v5-c-menu-toggle
 | -- | -- | -- |
 | `aria-expanded="true"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
 | `aria-expanded="false"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
-| `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
+| `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
 | `disabled` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
 
 ### Usage

package/docs/components/ModalBox/examples/ModalBox.css

@@ -4,7 +4,7 @@
 
 .ws-core-c-modal .pf-v5-c-modal-box {
   position: absolute;
-  top: 50%;
-  left: 50%;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }

package/docs/components/Nav/examples/Navigation.css

@@ -58,6 +58,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
-  top: 168px;
-  left: 256px;
+ inset-block-start: 168px;
+ inset-inline-start: 256px;
 }