@patternfly/react-core 5.0.0-prerelease.9 → 5.1.0

package/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`FormSelect Disabled FormSelect input  1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-disabled"
   >
     <select
@@ -20,10 +20,10 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -39,15 +39,15 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -64,10 +64,10 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -83,15 +83,15 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -109,10 +109,10 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -128,15 +128,15 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -152,10 +152,10 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -171,15 +171,15 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Grouped FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -242,10 +242,10 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
         </option>
       </optgroup>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -261,15 +261,15 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Simple FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -324,10 +324,10 @@ exports[`FormSelect Simple FormSelect input 1`] = `
         Other
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -343,15 +343,15 @@ exports[`FormSelect Simple FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect invalid FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <select
@@ -368,10 +368,10 @@ exports[`FormSelect invalid FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -387,8 +387,8 @@ exports[`FormSelect invalid FormSelect input 1`] = `
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -404,15 +404,15 @@ exports[`FormSelect invalid FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated success FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-success"
   >
     <select
@@ -429,10 +429,10 @@ exports[`FormSelect validated success FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -448,8 +448,8 @@ exports[`FormSelect validated success FormSelect input 1`] = `
             d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -465,15 +465,15 @@ exports[`FormSelect validated success FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated warning FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-warning"
   >
     <select
@@ -490,10 +490,10 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -509,8 +509,8 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
             d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -526,8 +526,8 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -47,7 +47,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -77,7 +77,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -91,7 +91,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             type="password"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -180,7 +180,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -194,7 +194,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -230,7 +230,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <div
+            <span
               class="pf-v5-c-form-control"
             >
               <input
@@ -244,7 +244,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
                 type="password"
                 value=""
               />
-            </div>
+            </span>
           </div>
           <div
             class="pf-v5-c-input-group__item"
@@ -335,7 +335,7 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -349,7 +349,7 @@ exports[`LoginForm should render Login form 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -379,7 +379,7 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -393,7 +393,7 @@ exports[`LoginForm should render Login form 1`] = `
             type="password"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div

package/src/components/Masthead/examples/Masthead.md

@@ -7,7 +7,7 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo-small.svg';
+import pfIcon from './pf-logo.svg';
 
 `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
 
@@ -210,10 +210,10 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 ```ts
 import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, Brand } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo-small.svg';
+import pfIcon from './pf-logo.svg';
 
 <Masthead id="icon-router-link">
   <MastheadToggle>
@@ -223,7 +223,7 @@ import pfIcon from './pf-logo-small.svg';
   </MastheadToggle>
   <MastheadMain>
     <MastheadBrand component={props => <Link {...props} to="#" />}>
-      <img src={pfIcon} alt="Patterfly Logo" />
+      <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
     </MastheadBrand>
   </MastheadMain>
   <MastheadContent>

package/src/components/Masthead/examples/pf-logo.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

package/src/components/Menu/Menu.tsx

@@ -302,6 +302,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
               (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
               ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
                 navigableElement.querySelector('input')) || // for MenuItem checkboxes
+              ((navigableElement.firstChild as Element)?.tagName === 'DIV' &&
+                navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
               (navigableElement.firstChild as Element)
             }
             noHorizontalArrowHandling={

package/src/components/Menu/MenuItem.tsx

@@ -11,6 +11,7 @@ import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { Checkbox } from '../Checkbox';
 import { MenuContext, MenuItemContext } from './MenuContext';
 import { MenuItemAction } from './MenuItemAction';
+import { Tooltip, TooltipProps } from '../Tooltip';
 import { canUseDOM } from '../../helpers/util';
 import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
@@ -40,6 +41,10 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** Render item as disabled option */
   isDisabled?: boolean;
+  /** Render item as aria-disabled option */
+  isAriaDisabled?: boolean;
+  /** Props for adding a tooltip to a menu item */
+  tooltipProps?: TooltipProps;
   /** Render item with icon */
   icon?: React.ReactNode;
   /** Render item with one or more actions */
@@ -94,6 +99,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   onClick = () => {},
   component = 'button',
   isDisabled = false,
+  isAriaDisabled = false,
   isExternalLink = false,
   isSelected = null,
   isFocused,
@@ -106,6 +112,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   innerRef,
   id,
   'aria-label': ariaLabel,
+  tooltipProps,
   ...props
 }: MenuItemProps) => {
   const {
@@ -225,10 +232,12 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   };
 
   const onItemSelect = (event: any, onSelect: any) => {
-    // Trigger callback for Menu onSelect
-    onSelect && onSelect(event, itemId);
-    // Trigger callback for item onClick
-    onClick && onClick(event);
+    if (!isAriaDisabled) {
+      // Trigger callback for Menu onSelect
+      onSelect && onSelect(event, itemId);
+      // Trigger callback for item onClick
+      onClick && onClick(event);
+    }
   };
   const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
   let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
@@ -252,16 +261,18 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   if (Component === 'a') {
     additionalProps = {
       href: to,
-      'aria-disabled': isDisabled ? true : null,
+      'aria-disabled': isDisabled || isAriaDisabled ? true : null,
       // prevent invalid 'disabled' attribute on <a> tags
       disabled: null,
       target: isExternalLink ? '_blank' : null
     };
   } else if (Component === 'button') {
     additionalProps = {
-      type: 'button'
+      type: 'button',
+      'aria-disabled': isAriaDisabled ? true : null
     };
   }
+
   if (isOnPath) {
     additionalProps['aria-expanded'] = true;
   } else if (hasFlyout) {
@@ -300,25 +311,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   };
   const isSelectMenu = menuRole === 'listbox';
 
-  return (
-    <li
-      className={css(
-        styles.menuListItem,
-        isDisabled && styles.modifiers.disabled,
-        _isOnPath && styles.modifiers.currentPath,
-        isLoadButton && styles.modifiers.load,
-        isLoading && styles.modifiers.loading,
-        isFocused && styles.modifiers.focus,
-        isDanger && styles.modifiers.danger,
-        className
-      )}
-      onMouseOver={onMouseOver}
-      {...(flyoutMenu && { onKeyDown: handleFlyout })}
-      ref={ref}
-      role={!hasCheckbox ? 'none' : 'menuitem'}
-      {...(hasCheckbox && { 'aria-label': ariaLabel })}
-      {...props}
-    >
+  const renderItem = (
+    <>
       <GenerateId>
         {(randomId) => (
           <Component
@@ -332,9 +326,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             ref={innerRef}
             {...(!hasCheckbox && {
               onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
-                onItemSelect(event, onSelect);
-                drill && drill(event);
-                flyoutMenu && handleFlyout(event);
+                if (!isAriaDisabled) {
+                  onItemSelect(event, onSelect);
+                  drill && drill(event);
+                  flyoutMenu && handleFlyout(event);
+                } else {
+                  event.preventDefault();
+                }
               }
             })}
             {...(hasCheckbox && { htmlFor: randomId })}
@@ -355,6 +353,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                     isChecked={isSelected || false}
                     onChange={(event) => onItemSelect(event, onSelect)}
                     isDisabled={isDisabled}
+                    aria-disabled={isAriaDisabled}
                   />
                 </span>
               )}
@@ -402,6 +401,40 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           />
         )}
       </MenuItemContext.Provider>
+    </>
+  );
+
+  return (
+    <li
+      className={css(
+        styles.menuListItem,
+        isDisabled && styles.modifiers.disabled,
+        isAriaDisabled && styles.modifiers.ariaDisabled,
+        _isOnPath && styles.modifiers.currentPath,
+        isLoadButton && styles.modifiers.load,
+        isLoading && styles.modifiers.loading,
+        isFocused && styles.modifiers.focus,
+        isDanger && styles.modifiers.danger,
+        className
+      )}
+      onMouseOver={() => {
+        if (!isAriaDisabled) {
+          onMouseOver();
+        }
+      }}
+      {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
+      ref={ref}
+      role={!hasCheckbox ? 'none' : 'menuitem'}
+      {...(hasCheckbox && { 'aria-label': ariaLabel })}
+      {...props}
+    >
+      {tooltipProps ? (
+        <Tooltip {...tooltipProps}>
+          {renderItem}
+        </Tooltip>
+      ) : (
+        renderItem
+      )}
     </li>
   );
 };