BUG#AC_2495::Items within actions menu receive keyboard focus when no… (

#3800)

* BUG#AC_2495::Items within actions menu receive keyboard focus when not visible.

* AC-2495::added updated product.spec.js.snap and kebab.spec.js.snap

Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>

packages/venia-ui/lib/components/CartPage/ProductListing/__tests__/__snapshots__/product.spec.js.snap

@@ -260,6 +260,7 @@ exports[`renders configurable product with options 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
@@ -593,6 +594,7 @@ exports[`renders out of stock product 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
@@ -892,6 +894,7 @@ exports[`renders simple product correctly 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li

packages/venia-ui/lib/components/LegacyMiniCart/__tests__/__snapshots__/kebab.spec.js.snap

@@ -18,7 +18,9 @@ exports[`it renders children passed to it 1`] = `
       }
     />
   </button>
-  <ul>
+  <ul
+    aria-hidden="true"
+  >
     <span />
     <p />
     <div />
@@ -44,6 +46,8 @@ exports[`it renders correctly without children 1`] = `
       }
     />
   </button>
-  <ul />
+  <ul
+    aria-hidden="true"
+  />
 </div>
 `;

packages/venia-ui/lib/components/LegacyMiniCart/kebab.js

@@ -24,7 +24,9 @@ const Kebab = props => {
             >
                 <Icon src={MoreVerticalIcon} />
             </button>
-            <ul className={toggleClass}>{children}</ul>
+            <ul aria-hidden="true" className={toggleClass}>
+                {children}
+            </ul>
         </div>
     );
 };

packages/venia-ui/lib/components/LegacyMiniCart/kebab.module.css

@@ -20,11 +20,12 @@
     transition: 256ms ease-out;
     transform: scale(0);
     transform-origin: 100% 0;
+    display: none !important;
 }
 
 .dropdown_active {
     composes: dropdown;
-
+    display: block !important;
     composes: absolute from global;
     transform: scale(1);
     transition: 250ms var(--venia-global-anim-bounce);