@magento/venia-ui 11.7.1-beta3 → 11.7.2-alpha2

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>

package/lib/components/ProductFullDetail/__tests__/__snapshots__/productFullDetail.spec.js.snap

@@ -106,6 +106,7 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
         aria-disabled={true}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={true}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -257,6 +258,7 @@ exports[`it does not render options if the product is not a ConfigurableProduct
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -269,6 +271,7 @@ exports[`it does not render options if the product is not a ConfigurableProduct
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -444,6 +447,7 @@ exports[`it renders an error for an invalid cart 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -456,6 +460,7 @@ exports[`it renders an error for an invalid cart 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -631,6 +636,7 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -643,6 +649,7 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -819,6 +826,7 @@ Array [
           aria-disabled={false}
           aria-label=""
           className="root_highPriority"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -831,6 +839,7 @@ Array [
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="submit"
         >
           <span
@@ -1003,6 +1012,7 @@ exports[`it renders correctly 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -1015,6 +1025,7 @@ exports[`it renders correctly 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -1186,6 +1197,7 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -1198,6 +1210,7 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -1369,6 +1382,7 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -1381,6 +1395,7 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -1552,6 +1567,7 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -1564,6 +1580,7 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -1739,6 +1756,7 @@ exports[`it renders form level errors 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -1751,6 +1769,7 @@ exports[`it renders form level errors 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span
@@ -1922,6 +1941,7 @@ exports[`it renders message with everything out of stock 1`] = `
         aria-disabled={true}
         aria-label="This item is currently out of stock"
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={true}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -2264,6 +2284,7 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
         aria-disabled={true}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={true}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -2447,6 +2468,7 @@ exports[`renders a WishlistButton with props 1`] = `
         aria-disabled={false}
         aria-label=""
         className="root_highPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -2459,6 +2481,7 @@ exports[`renders a WishlistButton with props 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="submit"
       >
         <span

package/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap

@@ -10,6 +10,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
     <button
       aria-label="Previous Image"
       className="previousButton"
+      data-react-aria-pressable={true}
       onClick={[Function]}
       onDragStart={[Function]}
       onKeyDown={[Function]}
@@ -21,6 +22,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -68,6 +70,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
     <button
       aria-label="Next Image"
       className="nextButton"
+      data-react-aria-pressable={true}
       onClick={[Function]}
       onDragStart={[Function]}
       onKeyDown={[Function]}
@@ -79,6 +82,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -119,6 +123,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
     <button
       aria-label="Previous Image"
       className="previousButton"
+      data-react-aria-pressable={true}
       onClick={[Function]}
       onDragStart={[Function]}
       onKeyDown={[Function]}
@@ -130,6 +135,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -198,6 +204,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
     <button
       aria-label="Next Image"
       className="nextButton"
+      data-react-aria-pressable={true}
       onClick={[Function]}
       onDragStart={[Function]}
       onKeyDown={[Function]}
@@ -209,6 +216,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span

package/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap

@@ -6,6 +6,7 @@ exports[`renders correctly 1`] = `
 >
   <button
     aria-label="Sort Button Collapsed"
+    data-react-aria-pressable={true}
     disabled={false}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -18,6 +19,7 @@ exports[`renders correctly 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <span>

package/lib/components/RobotsMeta/robotsMeta.gql.js

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const GET_ROBOTS_CONFIG = gql`
+    query GetRobotsConfig {
+        robotsConfig {
+            defaultRobots
+            customInstructions
+        }
+    }
+`;

package/lib/components/RobotsMeta/robotsMeta.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { Helmet } from 'react-helmet-async';
+import { GET_ROBOTS_CONFIG } from './robotsMeta.gql';
+
+const RobotsMeta = () => {
+    const { data, loading, error } = useQuery(GET_ROBOTS_CONFIG);
+
+    if (loading || error) {
+        return null;
+    }
+
+    const robots = data?.robotsConfig?.defaultRobots;
+
+    if (!robots) {
+        return null;
+    }
+
+    return (
+        <Helmet>
+            <meta name="robots" content={robots} />
+        </Helmet>
+    );
+};
+
+export default RobotsMeta;

package/lib/components/SavedPaymentsPage/__tests__/__snapshots__/creditCard.spec.js.snap

@@ -27,6 +27,7 @@ exports[`renders delete confirmation 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={true}
       onClick={[MockFunction toggleDeleteConfirmation]}
       onDragStart={[Function]}
@@ -95,6 +96,7 @@ exports[`renders delete confirmation 1`] = `
   >
     <button
       className="root_normalPriorityNegative"
+      data-react-aria-pressable={true}
       disabled={true}
       onClick={[MockFunction handleDeletePayment]}
       onDragStart={[Function]}
@@ -120,6 +122,7 @@ exports[`renders delete confirmation 1`] = `
     </button>
     <button
       className="root_lowPriority"
+      data-react-aria-pressable={true}
       disabled={true}
       onClick={[MockFunction toggleDeleteConfirmation]}
       onDragStart={[Function]}
@@ -196,6 +199,7 @@ exports[`should render properly 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction toggleDeleteConfirmation]}
       onDragStart={[Function]}
@@ -208,6 +212,7 @@ exports[`should render properly 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -264,6 +269,7 @@ exports[`should render properly 1`] = `
   >
     <button
       className="root_normalPriorityNegative"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction handleDeletePayment]}
       onDragStart={[Function]}
@@ -276,6 +282,7 @@ exports[`should render properly 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -289,6 +296,7 @@ exports[`should render properly 1`] = `
     </button>
     <button
       className="root_lowPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction toggleDeleteConfirmation]}
       onDragStart={[Function]}
@@ -301,6 +309,7 @@ exports[`should render properly 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span