From 03439f3b8211756837e9744fa99c87c5867ea35e Mon Sep 17 00:00:00 2001
From: valerio bartolini <vabarjs@gmail.com>
Date: Tue, 7 Jun 2022 18:23:58 +0200
Subject: [PATCH 1/3] Tooltip examples are not accessible on dropdown items

---
 .../react-core/src/components/Dropdown/InternalDropdownItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
index d7c14bb908b..c84d601016a 100644
--- a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
+++ b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
@@ -199,7 +199,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
     }
     const renderWithTooltip = (childNode: React.ReactNode) =>
       tooltip ? (
-        <Tooltip content={tooltip} {...tooltipProps}>
+        <Tooltip content={tooltip} {...tooltipProps} aria-live="polite">
           {childNode}
         </Tooltip>
       ) : (

From 97373cd70f15abb95bfa77502b8223dd302c7d55 Mon Sep 17 00:00:00 2001
From: valerio bartolini <vabarjs@gmail.com>
Date: Fri, 10 Jun 2022 01:30:56 +0200
Subject: [PATCH 2/3] refactor(Dropdown): improve solution

---
 ...ApplicationLauncherSeparator.test.tsx.snap |  2 +-
 .../ApplicationLauncher.test.tsx.snap         | 40 ++++++++++++-------
 .../Dropdown/InternalDropdownItem.tsx         |  7 ++--
 .../DropdownSeparator.test.tsx.snap           |  2 +-
 .../__snapshots__/Dropdown.test.tsx.snap      | 24 +++++++++--
 .../InternalDropdownItem.test.tsx.snap        | 10 +++++
 .../Dropdown/examples/DropdownBasic.tsx       |  6 ++-
 .../OptionsMenuItem.test.tsx.snap             |  3 +-
 .../__snapshots__/OptionsMenu.test.tsx.snap   | 18 ++++++---
 .../OverflowMenuDropdownItem.test.tsx.snap    |  3 +-
 10 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap
index d69c576a95e..2e54ae5be2a 100644
--- a/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap
+++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ApplicationLauncherSeparator should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    role="separator"
+    role="none"
   >
     <div
       class="pf-c-divider"
diff --git a/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap b/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
index ed8e5f70afe..eaee472026a 100644
--- a/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
+++ b/packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
       role="menu"
     >
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
@@ -50,13 +50,14 @@ exports[`ApplicationLauncher custom icon 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-7"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
         >
           Link
         </a>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <button
           aria-disabled="false"
@@ -64,6 +65,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-8"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
@@ -71,7 +73,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         </button>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="true"
@@ -79,13 +81,14 @@ exports[`ApplicationLauncher custom icon 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-9"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
         >
           Disabled Link
         </a>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <button
           aria-disabled="true"
@@ -93,6 +96,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-10"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
@@ -100,7 +104,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
@@ -108,7 +112,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         />
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
@@ -116,13 +120,14 @@ exports[`ApplicationLauncher custom icon 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-11"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
         >
           Separated Link
         </a>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <button
           aria-disabled="false"
@@ -130,6 +135,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-12"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
@@ -260,7 +266,7 @@ exports[`ApplicationLauncher expanded 1`] = `
       role="menu"
     >
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
@@ -268,13 +274,14 @@ exports[`ApplicationLauncher expanded 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-1"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
         >
           Link
         </a>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <button
           aria-disabled="false"
@@ -282,6 +289,7 @@ exports[`ApplicationLauncher expanded 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-2"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
@@ -289,7 +297,7 @@ exports[`ApplicationLauncher expanded 1`] = `
         </button>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="true"
@@ -297,13 +305,14 @@ exports[`ApplicationLauncher expanded 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-3"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
         >
           Disabled Link
         </a>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <button
           aria-disabled="true"
@@ -311,6 +320,7 @@ exports[`ApplicationLauncher expanded 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-4"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
@@ -318,7 +328,7 @@ exports[`ApplicationLauncher expanded 1`] = `
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
@@ -326,7 +336,7 @@ exports[`ApplicationLauncher expanded 1`] = `
         />
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
@@ -334,13 +344,14 @@ exports[`ApplicationLauncher expanded 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-5"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
         >
           Separated Link
         </a>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <button
           aria-disabled="false"
@@ -348,6 +359,7 @@ exports[`ApplicationLauncher expanded 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownItem-6"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
diff --git a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
index c84d601016a..798c897960d 100644
--- a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
+++ b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
@@ -199,7 +199,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
     }
     const renderWithTooltip = (childNode: React.ReactNode) =>
       tooltip ? (
-        <Tooltip content={tooltip} {...tooltipProps} aria-live="polite">
+        <Tooltip content={tooltip} {...tooltipProps}>
           {childNode}
         </Tooltip>
       ) : (
@@ -211,7 +211,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
         ...(styleChildren && {
           className: css(element.props.className, classes)
         }),
-        ...(this.props.role !== 'separator' && { ref: this.componentRef })
+        ...(this.props.role !== 'separator' && { role } && { ref: this.componentRef })
       });
 
     const renderDefaultComponent = (tag: string) => {
@@ -240,6 +240,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
           ref={this.ref}
           className={classes}
           id={componentID}
+          role={role}
         >
           {componentContent}
         </Component>
@@ -268,7 +269,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
           return (
             <li
               className={listItemClassName || null}
-              role={role}
+              role="none"
               onKeyDown={this.onKeyDown}
               onClick={(event: any) => {
                 if (!isDisabled && !isAriaDisabled) {
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap
index 6d8e2712dc8..0e802d77f4e 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DropdownSeparator should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    role="separator"
+    role="none"
   >
     <div
       class="pf-c-divider ''"
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
index fa8a4aa2e06..c6e47f3e6fe 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -52,6 +52,7 @@ exports[`Dropdown alignment breakpoints 1`] = `
       >
         <a
           class="pf-c-dropdown__menu-item"
+          role="none"
         >
           Link
         </a>
@@ -61,6 +62,7 @@ exports[`Dropdown alignment breakpoints 1`] = `
       >
         <button
           class="pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Action
@@ -72,6 +74,7 @@ exports[`Dropdown alignment breakpoints 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
         >
           Disabled Link
         </a>
@@ -82,13 +85,14 @@ exports[`Dropdown alignment breakpoints 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Disabled Action
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
@@ -100,6 +104,7 @@ exports[`Dropdown alignment breakpoints 1`] = `
       >
         <a
           class="pf-c-dropdown__menu-item"
+          role="none"
         >
           Separated Link
         </a>
@@ -109,6 +114,7 @@ exports[`Dropdown alignment breakpoints 1`] = `
       >
         <button
           class="pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Separated Action
@@ -313,6 +319,7 @@ exports[`Dropdown expanded 1`] = `
       >
         <a
           class="pf-c-dropdown__menu-item"
+          role="none"
         >
           Link
         </a>
@@ -322,6 +329,7 @@ exports[`Dropdown expanded 1`] = `
       >
         <button
           class="pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Action
@@ -333,6 +341,7 @@ exports[`Dropdown expanded 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
         >
           Disabled Link
         </a>
@@ -343,13 +352,14 @@ exports[`Dropdown expanded 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Disabled Action
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
@@ -361,6 +371,7 @@ exports[`Dropdown expanded 1`] = `
       >
         <a
           class="pf-c-dropdown__menu-item"
+          role="none"
         >
           Separated Link
         </a>
@@ -370,6 +381,7 @@ exports[`Dropdown expanded 1`] = `
       >
         <button
           class="pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Separated Action
@@ -665,6 +677,7 @@ exports[`KebabToggle expanded 1`] = `
       >
         <a
           class="pf-c-dropdown__menu-item"
+          role="none"
         >
           Link
         </a>
@@ -674,6 +687,7 @@ exports[`KebabToggle expanded 1`] = `
       >
         <button
           class="pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Action
@@ -685,6 +699,7 @@ exports[`KebabToggle expanded 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
         >
           Disabled Link
         </a>
@@ -695,13 +710,14 @@ exports[`KebabToggle expanded 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Disabled Action
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
@@ -713,6 +729,7 @@ exports[`KebabToggle expanded 1`] = `
       >
         <a
           class="pf-c-dropdown__menu-item"
+          role="none"
         >
           Separated Link
         </a>
@@ -722,6 +739,7 @@ exports[`KebabToggle expanded 1`] = `
       >
         <button
           class="pf-c-dropdown__menu-item"
+          role="none"
           type="button"
         >
           Separated Action
diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
index 72629380fa2..f1f0d93f926 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
+++ b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`InternalDropdownItem dropdown items a 1`] = `
   >
     <a
       class=""
+      role="none"
     >
       Something
     </a>
@@ -22,6 +23,7 @@ exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `
     <a
       aria-disabled="true"
       class="pf-m-aria-disabled"
+      role="none"
     >
       Something
     </a>
@@ -37,6 +39,7 @@ exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `
     <button
       aria-disabled="true"
       class="pf-m-aria-disabled"
+      role="none"
       type="button"
     >
       Something
@@ -52,6 +55,7 @@ exports[`InternalDropdownItem dropdown items button 1`] = `
   >
     <button
       class=""
+      role="none"
       type="button"
     >
       Something
@@ -67,6 +71,7 @@ exports[`InternalDropdownItem dropdown items description a 1`] = `
   >
     <a
       class="pf-m-description"
+      role="none"
     >
       <div
         class="pf-c-dropdown__menu-item-main"
@@ -90,6 +95,7 @@ exports[`InternalDropdownItem dropdown items description button 1`] = `
   >
     <button
       class="pf-m-description"
+      role="none"
       type="button"
     >
       <div
@@ -115,6 +121,7 @@ exports[`InternalDropdownItem dropdown items disabled a 1`] = `
     <a
       aria-disabled="true"
       class=""
+      role="none"
     >
       Something
     </a>
@@ -130,6 +137,7 @@ exports[`InternalDropdownItem dropdown items disabled button 1`] = `
     <button
       aria-disabled="true"
       class=""
+      role="none"
       type="button"
     >
       Something
@@ -145,6 +153,7 @@ exports[`InternalDropdownItem dropdown items hover a 1`] = `
   >
     <a
       class=""
+      role="none"
     >
       Something
     </a>
@@ -159,6 +168,7 @@ exports[`InternalDropdownItem dropdown items hover button 1`] = `
   >
     <button
       class=""
+      role="none"
       type="button"
     >
       Something
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
index dc62efd8ac3..4fc38fe5e5f 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
@@ -19,8 +19,10 @@ export const DropdownBasic: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItem key="link" tooltip="Tooltip for enabled link">
+      Link
+    </DropdownItem>,
+    <DropdownItem key="action" component="button" tooltip="Tooltip for enabled button">
       Action
     </DropdownItem>,
     <DropdownItem key="disabled link" isDisabled href="www.google.com">
diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap
index dd29c1a5560..bf898058e79 100644
--- a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap
+++ b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
     id="''"
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="true"
@@ -12,6 +12,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >
diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap b/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap
index 7b254ecd409..b6b9a0deada 100644
--- a/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap
+++ b/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`optionsMenu expanded 1`] = `
         >
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -69,6 +69,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-1"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -77,7 +78,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -85,6 +86,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-2"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -93,7 +95,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="true"
@@ -101,6 +103,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-3"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -109,7 +112,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -117,6 +120,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-4"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -145,7 +149,7 @@ exports[`optionsMenu expanded 1`] = `
         >
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -153,6 +157,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-5"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -161,7 +166,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -169,6 +174,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-6"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
diff --git a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
index 5e5a0e3e90f..095afd9ab46 100644
--- a/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
+++ b/packages/react-core/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="false"
@@ -11,6 +11,7 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >

From e69de217f8269e154603c1d7e369c0c85d45a7f9 Mon Sep 17 00:00:00 2001
From: Valerio <vabarjs@gmail.com>
Date: Tue, 14 Jun 2022 13:43:13 +0200
Subject: [PATCH 3/3] refactor(DropodownItem): update pr comment

---
 .../react-core/src/components/Dropdown/InternalDropdownItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
index 798c897960d..ebefe97912e 100644
--- a/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
+++ b/packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx
@@ -211,7 +211,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
         ...(styleChildren && {
           className: css(element.props.className, classes)
         }),
-        ...(this.props.role !== 'separator' && { role } && { ref: this.componentRef })
+        ...(this.props.role !== 'separator' && { role, ref: this.componentRef })
       });
 
     const renderDefaultComponent = (tag: string) => {