Tooltip examples are not accessible on dropdown items (#7524)

* Tooltip examples are not accessible on dropdown items * refactor(Dropdown): improve solution * refactor(DropodownItem): update pr comment
patternfly · Jun 15, 2022 · f302f29 · f302f29
1 parent 308f2c6
commit f302f29
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 31 deletions.
diff --git a/...tionLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherSeparator.test.tsx.snap b/...tionLauncher/__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/.../components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap b/.../components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap
@@ -42,94 +42,100 @@ exports[`ApplicationLauncher custom icon 1`] = `
       role="menu"
     >
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
           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"
           class="pf-c-app-launcher__menu-item"
           data-ouia-component-id="OUIA-Generated-DropdownItem-8"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
           Action
         </button>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
           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"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
           data-ouia-component-id="OUIA-Generated-DropdownItem-10"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
           Disabled Action
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
           role="separator"
         />
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
           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"
           class="pf-c-app-launcher__menu-item"
           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,94 +266,100 @@ exports[`ApplicationLauncher expanded 1`] = `
       role="menu"
     >
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
           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"
           class="pf-c-app-launcher__menu-item"
           data-ouia-component-id="OUIA-Generated-DropdownItem-2"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
           Action
         </button>
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
           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"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
           data-ouia-component-id="OUIA-Generated-DropdownItem-4"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
+          role="menuitem"
           tabindex="-1"
           type="button"
         >
           Disabled Action
         </button>
       </li>
       <li
-        role="separator"
+        role="none"
       >
         <div
           class="pf-c-divider"
           role="separator"
         />
       </li>
       <li
-        role="menuitem"
+        role="none"
       >
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
           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"
           class="pf-c-app-launcher__menu-item"
           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
@@ -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/...src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap b/...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 ''"