@magento/venia-ui 11.7.1 → 11.7.2-alpha3

package/lib/components/Dialog/__tests__/__snapshots__/dialog.spec.js.snap

@@ -39,6 +39,7 @@ exports[`does not render a close X button in modal mode 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onDragStart={[Function]}
               onKeyDown={[Function]}
@@ -50,6 +51,7 @@ exports[`does not render a close X button in modal mode 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="reset"
             >
               <span
@@ -63,6 +65,7 @@ exports[`does not render a close X button in modal mode 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -75,6 +78,7 @@ exports[`does not render a close X button in modal mode 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="submit"
             >
               <span
@@ -168,6 +172,7 @@ exports[`renders a Dialog with disabled buttons 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={true}
               onDragStart={[Function]}
               onKeyDown={[Function]}
@@ -192,6 +197,7 @@ exports[`renders a Dialog with disabled buttons 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={true}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -373,6 +379,7 @@ exports[`renders a basic Dialog 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onDragStart={[Function]}
               onKeyDown={[Function]}
@@ -384,6 +391,7 @@ exports[`renders a basic Dialog 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="reset"
             >
               <span
@@ -397,6 +405,7 @@ exports[`renders a basic Dialog 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -409,6 +418,7 @@ exports[`renders a basic Dialog 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="submit"
             >
               <span
@@ -502,6 +512,7 @@ exports[`renders a dialog with only the confirm button disabled 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onDragStart={[Function]}
               onKeyDown={[Function]}
@@ -513,6 +524,7 @@ exports[`renders a dialog with only the confirm button disabled 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="reset"
             >
               <span
@@ -526,6 +538,7 @@ exports[`renders a dialog with only the confirm button disabled 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={true}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -635,6 +648,7 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onDragStart={[Function]}
               onKeyDown={[Function]}
@@ -646,6 +660,7 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="reset"
             >
               <span
@@ -659,6 +674,7 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -671,6 +687,7 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="submit"
             >
               <span
@@ -772,6 +789,7 @@ exports[`supports modifying title and button texts 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onDragStart={[Function]}
               onKeyDown={[Function]}
@@ -783,6 +801,7 @@ exports[`supports modifying title and button texts 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="reset"
             >
               <span
@@ -796,6 +815,7 @@ exports[`supports modifying title and button texts 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -808,6 +828,7 @@ exports[`supports modifying title and button texts 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="submit"
             >
               <span

package/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap

@@ -54,6 +54,7 @@ exports[`renders when busy 1`] = `
   >
     <button
       className="cancelButton"
+      data-react-aria-pressable={true}
       disabled={true}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -79,6 +80,7 @@ exports[`renders when busy 1`] = `
     </button>
     <button
       className="submitButton"
+      data-react-aria-pressable={true}
       disabled={true}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -160,6 +162,7 @@ exports[`renders when not busy 1`] = `
   >
     <button
       className="cancelButton"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -172,6 +175,7 @@ exports[`renders when not busy 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -185,6 +189,7 @@ exports[`renders when not busy 1`] = `
     </button>
     <button
       className="submitButton"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -197,6 +202,7 @@ exports[`renders when not busy 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="submit"
     >
       <span

package/lib/components/Gallery/__tests__/__snapshots__/addToCartButton.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`should render add to cart if in stock 1`] = `
 <button
   aria-label="Add to cart"
+  data-react-aria-pressable={true}
   disabled={false}
   onClick={[Function]}
   onDragStart={[Function]}
@@ -15,6 +16,7 @@ exports[`should render add to cart if in stock 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  tabIndex={0}
   type="button"
 >
   <span>
@@ -57,6 +59,7 @@ exports[`should render add to cart if in stock 1`] = `
 exports[`should render out of cart if not in stock 1`] = `
 <button
   aria-label="Out of stock"
+  data-react-aria-pressable={true}
   disabled={true}
   onClick={[Function]}
   onDragStart={[Function]}
@@ -119,6 +122,7 @@ exports[`should render out of cart if not in stock 1`] = `
 exports[`should render properly 1`] = `
 <button
   aria-label="Add to cart"
+  data-react-aria-pressable={true}
   disabled={false}
   onClick={[Function]}
   onDragStart={[Function]}
@@ -131,6 +135,7 @@ exports[`should render properly 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  tabIndex={0}
   type="button"
 >
   <span>

package/lib/components/HomePage/homePage.module.css

@@ -51,11 +51,7 @@
  * Target all column groups after the slider.
  */
 :global(.venia-home-slider ~ div) {
-    display: grid !important;
     gap: 0;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    grid-template-columns: repeat(3, 1fr);
     padding: 0 1rem;
     z-index: 1;
 }

package/lib/components/LegacyMiniCart/__tests__/__snapshots__/section.spec.js.snap

@@ -4,6 +4,7 @@ exports[`it does not render an icon when not passed one 1`] = `
 <li>
   <button
     aria-label="Unit Test Text"
+    data-react-aria-pressable={true}
     onClick={[Function]}
     onDragStart={[Function]}
     onKeyDown={[Function]}
@@ -15,6 +16,7 @@ exports[`it does not render an icon when not passed one 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <Icon
@@ -36,6 +38,7 @@ exports[`it does not render an icon when passed an invalid one 1`] = `
 <li>
   <button
     aria-label="Unit Test Text"
+    data-react-aria-pressable={true}
     onClick={[Function]}
     onDragStart={[Function]}
     onKeyDown={[Function]}
@@ -47,6 +50,7 @@ exports[`it does not render an icon when passed an invalid one 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <Icon
@@ -68,6 +72,7 @@ exports[`it fills the icon when isFilled is true 1`] = `
 <li>
   <button
     aria-label="Unit Test Text"
+    data-react-aria-pressable={true}
     onClick={[Function]}
     onDragStart={[Function]}
     onKeyDown={[Function]}
@@ -79,6 +84,7 @@ exports[`it fills the icon when isFilled is true 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <Icon
@@ -110,6 +116,7 @@ exports[`it renders an icon when passed a valid one 1`] = `
 <li>
   <button
     aria-label="Unit Test Text"
+    data-react-aria-pressable={true}
     onClick={[Function]}
     onDragStart={[Function]}
     onKeyDown={[Function]}
@@ -121,6 +128,7 @@ exports[`it renders an icon when passed a valid one 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <Icon

package/lib/components/MiniCart/__tests__/__snapshots__/miniCart.spec.js.snap

@@ -79,6 +79,7 @@ exports[`it renders correctly 1`] = `
     >
       <button
         className="checkoutButton"
+        data-react-aria-pressable={true}
         disabled={false}
         onDragStart={[Function]}
         onKeyDown={[Function]}
@@ -90,6 +91,7 @@ exports[`it renders correctly 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span
@@ -131,6 +133,7 @@ exports[`it renders correctly 1`] = `
       </button>
       <button
         className="editCartButton"
+        data-react-aria-pressable={true}
         disabled={false}
         onDragStart={[Function]}
         onKeyDown={[Function]}
@@ -142,6 +145,7 @@ exports[`it renders correctly 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span

package/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap

@@ -106,6 +106,7 @@ exports[`should render formErrors 1`] = `
             aria-hidden="false"
           >
             <button
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -118,6 +119,7 @@ exports[`should render formErrors 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="button"
             >
               <span>
@@ -151,6 +153,7 @@ exports[`should render formErrors 1`] = `
       </div>
       <div>
         <button
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -163,6 +166,7 @@ exports[`should render formErrors 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span>
@@ -260,6 +264,7 @@ exports[`should render properly 1`] = `
             aria-hidden="false"
           >
             <button
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -272,6 +277,7 @@ exports[`should render properly 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="button"
             >
               <span>
@@ -305,6 +311,7 @@ exports[`should render properly 1`] = `
       </div>
       <div>
         <button
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -317,6 +324,7 @@ exports[`should render properly 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span>

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap

@@ -93,6 +93,7 @@ https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=2560&he
     </span>
   </div>
   <button
+    data-react-aria-pressable={true}
     disabled={false}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -105,6 +106,7 @@ https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=2560&he
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <span>

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/orderDetails.spec.js.snap

@@ -193,6 +193,7 @@ exports[`should render properly 1`] = `
     />
   </div>
   <button
+    data-react-aria-pressable={true}
     disabled={false}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -205,6 +206,7 @@ exports[`should render properly 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <span>
@@ -254,6 +256,7 @@ exports[`should render with reduced order information 1`] = `
   <div />
   <div />
   <button
+    data-react-aria-pressable={true}
     disabled={false}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -266,6 +269,7 @@ exports[`should render with reduced order information 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <span>

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap

@@ -104,6 +104,7 @@ exports[`renders correctly with data 1`] = `
         <button
           aria-label="submit"
           className="searchButton"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -116,6 +117,7 @@ exports[`renders correctly with data 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span
@@ -178,6 +180,7 @@ exports[`renders correctly with data 1`] = `
     </ul>
     <button
       className="root_lowPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction loadMoreOrders]}
       onDragStart={[Function]}
@@ -190,6 +193,7 @@ exports[`renders correctly with data 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -298,6 +302,7 @@ exports[`renders correctly without data 1`] = `
         <button
           aria-label="submit"
           className="searchButton"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -310,6 +315,7 @@ exports[`renders correctly without data 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span
@@ -519,6 +525,7 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
         <button
           aria-label="submit"
           className="searchButton"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -531,6 +538,7 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span
@@ -676,6 +684,7 @@ exports[`renders loading indicator 1`] = `
         <button
           aria-label="submit"
           className="searchButton"
+          data-react-aria-pressable={true}
           disabled={true}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -892,6 +901,7 @@ exports[`renders no orders message is orders is empty 1`] = `
         <button
           aria-label="submit"
           className="searchButton"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -904,6 +914,7 @@ exports[`renders no orders message is orders is empty 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span

package/lib/components/Password/__tests__/__snapshots__/password.spec.js.snap

@@ -77,6 +77,7 @@ exports[`should render show button if visible is false 1`] = `
         aria-hidden="false"
       >
         <button
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
@@ -89,6 +90,7 @@ exports[`should render show button if visible is false 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="button"
         >
           <span>
@@ -158,6 +160,7 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
         aria-hidden="false"
       >
         <button
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
@@ -170,6 +173,7 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="button"
         >
           <span>