@magento/venia-ui 11.7.1 → 11.7.2-alpha3

package/lib/RootComponents/Category/__tests__/__snapshots__/category.spec.js.snap

@@ -62,6 +62,7 @@ exports[`Category Root Component error view renders when data is not present and
     </p>
     <div>
       <button
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -74,6 +75,7 @@ exports[`Category Root Component error view renders when data is not present and
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span>

package/lib/RootComponents/Category/__tests__/category.spec.js

@@ -10,7 +10,8 @@ jest.mock('@magento/peregrine/lib/talons/RootComponents/Category', () => ({
 jest.mock('../../../components/Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
     StoreTitle: () => 'Title',
-    Meta: () => 'Meta'
+    Meta: () => 'Meta',
+    Link: () => 'Link'
 }));
 
 jest.mock('../categoryContent', () => 'CategoryContent');

package/lib/RootComponents/Category/category.gql.js

@@ -6,6 +6,8 @@ export const GET_PAGE_SIZE = gql`
         storeConfig {
             store_code
             grid_per_page
+            category_url_suffix
+            category_canonical_tag
         }
     }
 `;

package/lib/RootComponents/Category/category.js

@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { shape, string } from 'prop-types';
 import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
 import { useStyle } from '../../classify';
 
 import CategoryContent from './categoryContent';
 import defaultClasses from './category.module.css';
-import { Meta } from '../../components/Head';
+import { Meta, Link } from '../../components/Head';
 import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { useIntl } from 'react-intl';
@@ -34,11 +34,30 @@ const Category = props => {
         pageControl,
         sortProps,
         pageSize,
-        categoryNotFound
+        categoryNotFound,
+        storeConfig
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
 
+    // Generate canonical URL for category
+    const canonicalUrl = useMemo(() => {
+        if (!categoryData || !storeConfig?.category_canonical_tag) return null;
+
+        const category = categoryData.categories?.items?.[0];
+        if (!category) return null;
+
+        // Use url_path if available, otherwise fall back to url_key
+        const urlPath = category.url_path || category.url_key;
+        if (!urlPath) return null;
+
+        const origin =
+            typeof window !== 'undefined' ? window.location.origin : '';
+        const suffix = storeConfig?.category_url_suffix || '';
+
+        return `${origin}/${urlPath}${suffix}`;
+    }, [categoryData, storeConfig]);
+
     if (!categoryData) {
         if (error && pageControl.currentPage === 1) {
             if (process.env.NODE_ENV !== 'production') {
@@ -62,6 +81,7 @@ const Category = props => {
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
+            {canonicalUrl && <Link rel="canonical" href={canonicalUrl} />}
             <CategoryContent
                 categoryId={uid}
                 classes={classes}

package/lib/RootComponents/Product/__tests__/product.spec.js

@@ -10,7 +10,8 @@ jest.mock('@magento/venia-ui/lib/components/ErrorView', () => 'ErrorView');
 jest.mock('@magento/venia-ui/lib/components/Head', () => ({
     __esModule: true,
     StoreTitle: jest.fn(() => 'StoreTitle'),
-    Meta: jest.fn(() => 'Meta')
+    Meta: jest.fn(() => 'Meta'),
+    Link: jest.fn(() => 'Link')
 }));
 jest.mock(
     '@magento/venia-ui/lib/components/ProductFullDetail',

package/lib/RootComponents/Product/product.js

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { string } from 'prop-types';
 import { useProduct } from '@magento/peregrine/lib/talons/RootComponents/Product/useProduct';
 
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { StoreTitle, Meta, Link } from '@magento/venia-ui/lib/components/Head';
 import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
 import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
 import ProductShimmer from './product.shimmer';
@@ -23,7 +23,17 @@ const Product = props => {
         mapProduct
     });
 
-    const { error, loading, product } = talonProps;
+    const { error, loading, product, storeConfig } = talonProps;
+
+    const canonicalUrl = useMemo(() => {
+        if (!product || !storeConfig?.product_canonical_tag) return null;
+
+        const origin =
+            typeof window !== 'undefined' ? window.location.origin : '';
+        const suffix = storeConfig?.product_url_suffix || '';
+
+        return `${origin}/${product.url_key}${suffix}`;
+    }, [product, storeConfig]);
 
     if (loading && !product)
         return <ProductShimmer productType={productType} />;
@@ -45,6 +55,7 @@ const Product = props => {
         <Fragment>
             <StoreTitle>{product.name}</StoreTitle>
             <Meta name="description" content={product.meta_description} />
+            {canonicalUrl && <Link rel="canonical" href={canonicalUrl} />}
             <ProductFullDetail product={product} />
         </Fragment>
     );

package/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap

@@ -191,6 +191,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
           >
             <button
               className="passwordButton"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -203,6 +204,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="button"
             >
               <span
@@ -245,6 +247,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction]}
       onDragStart={[Function]}
@@ -257,6 +260,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -463,6 +467,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
           >
             <button
               className="passwordButton"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -475,6 +480,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="button"
             >
               <span
@@ -554,6 +560,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
           >
             <button
               className="passwordButton"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -566,6 +573,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="button"
             >
               <span

package/lib/components/AccountInformationPage/__tests__/__snapshots__/editModal.spec.js.snap

@@ -78,6 +78,7 @@ exports[`it disables the submit button while loading 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={true}
               onClick={[MockFunction onCancel]}
               onDragStart={[Function]}
@@ -103,6 +104,7 @@ exports[`it disables the submit button while loading 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={true}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -212,6 +214,7 @@ exports[`it renders correctly 1`] = `
           >
             <button
               className="root_lowPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[MockFunction onCancel]}
               onDragStart={[Function]}
@@ -224,6 +227,7 @@ exports[`it renders correctly 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="reset"
             >
               <span
@@ -237,6 +241,7 @@ exports[`it renders correctly 1`] = `
             </button>
             <button
               className="root_highPriority"
+              data-react-aria-pressable={true}
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -249,6 +254,7 @@ exports[`it renders correctly 1`] = `
               onTouchEnd={[Function]}
               onTouchMove={[Function]}
               onTouchStart={[Function]}
+              tabIndex={0}
               type="submit"
             >
               <span

package/lib/components/AddToCartDialog/__tests__/__snapshots__/addToCartDialog.spec.js.snap

@@ -68,6 +68,7 @@ exports[`renders dialog with content 1`] = `
       />
       <button
         className="root_normalPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[MockFunction buttonProps.onClick]}
         onDragStart={[Function]}
@@ -80,6 +81,7 @@ exports[`renders dialog with content 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span

package/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap

@@ -65,6 +65,7 @@ exports[`renders correctly when there are existing addresses 1`] = `
     />
     <button
       className="addButton"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction handleAddAddress]}
       onDragStart={[Function]}
@@ -77,6 +78,7 @@ exports[`renders correctly when there are existing addresses 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -143,6 +145,7 @@ exports[`renders correctly when there are no existing addresses 1`] = `
   >
     <button
       className="addButton"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction handleAddAddress]}
       onDragStart={[Function]}
@@ -155,6 +158,7 @@ exports[`renders correctly when there are no existing addresses 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -266,6 +270,7 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
     />
     <button
       className="addButton"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction handleAddAddress]}
       onDragStart={[Function]}
@@ -278,6 +283,7 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span

package/lib/components/AddressBookPage/__tests__/__snapshots__/addressCard.spec.js.snap

@@ -59,6 +59,7 @@ exports[`renders a default address 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction onEdit]}
       onDragStart={[Function]}
@@ -71,6 +72,7 @@ exports[`renders a default address 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -161,6 +163,7 @@ exports[`renders a non-default address 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction onEdit]}
       onDragStart={[Function]}
@@ -173,6 +176,7 @@ exports[`renders a non-default address 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -210,6 +214,7 @@ exports[`renders a non-default address 1`] = `
     </button>
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction onDelete]}
       onDragStart={[Function]}
@@ -222,6 +227,7 @@ exports[`renders a non-default address 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -335,6 +341,7 @@ exports[`renders an address with a middle name 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction onEdit]}
       onDragStart={[Function]}
@@ -347,6 +354,7 @@ exports[`renders an address with a middle name 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -445,6 +453,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction onEdit]}
       onDragStart={[Function]}
@@ -457,6 +466,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -497,6 +507,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
     >
       <button
         className="root_normalPriorityNegative"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[MockFunction onConfirmDelete]}
         onDragStart={[Function]}
@@ -509,6 +520,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span
@@ -522,6 +534,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
       </button>
       <button
         className="root_lowPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[MockFunction onCancelDelete]}
         onDragStart={[Function]}
@@ -534,6 +547,7 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span
@@ -609,6 +623,7 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
   >
     <button
       className="root_normalPriority"
+      data-react-aria-pressable={true}
       disabled={false}
       onClick={[MockFunction onEdit]}
       onDragStart={[Function]}
@@ -621,6 +636,7 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      tabIndex={0}
       type="button"
     >
       <span
@@ -661,6 +677,7 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
     >
       <button
         className="root_normalPriorityNegative"
+        data-react-aria-pressable={true}
         disabled={true}
         onClick={[MockFunction onConfirmDelete]}
         onDragStart={[Function]}
@@ -686,6 +703,7 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
       </button>
       <button
         className="root_lowPriority"
+        data-react-aria-pressable={true}
         disabled={true}
         onClick={[MockFunction onCancelDelete]}
         onDragStart={[Function]}

package/lib/components/App/__tests__/__snapshots__/app.spec.js.snap

@@ -2,6 +2,9 @@
 
 exports[`displays open nav or drawer 1`] = `
 <div>
+  <div
+    data-testid="robots-meta"
+  />
   Title
   <Main
     isMasked={false}
@@ -18,6 +21,7 @@ exports[`displays open nav or drawer 1`] = `
 
 exports[`renders with renderErrors 1`] = `
 <HeadProvider>
+  <Unknown />
   <StoreTitle />
   <Main
     isMasked={true}
@@ -31,6 +35,7 @@ exports[`renders with renderErrors 1`] = `
 
 exports[`renders with unhandledErrors 1`] = `
 <HeadProvider>
+  <Unknown />
   <StoreTitle />
   <Main
     isMasked={false}

package/lib/components/App/__tests__/app.spec.js

@@ -3,7 +3,6 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import { useHistory } from 'react-router-dom';
 import { createTestInstance } from '@magento/peregrine';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
-
 import Main from '../../Main';
 import Mask from '../../Mask';
 import Routes from '../../Routes';
@@ -14,6 +13,9 @@ jest.mock('../../Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
     StoreTitle: () => 'Title'
 }));
+jest.mock('../../RobotsMeta/robotsMeta', () => () => (
+    <div data-testid="robots-meta" />
+));
 jest.mock('../../Main', () => 'Main');
 jest.mock('../../Navigation', () => 'Navigation');
 jest.mock('../../Routes', () => 'Routes');
@@ -176,6 +178,17 @@ afterEach(() => {
     globalThis.location = oldWindowLocation;
 });
 
+test('renders RobotsMeta component', () => {
+    const appProps = {
+        markErrorHandled: jest.fn(),
+        unhandledErrors: []
+    };
+
+    const { root } = createTestInstance(<App {...appProps} />);
+
+    expect(root.findByProps({ 'data-testid': 'robots-meta' })).toBeTruthy();
+});
+
 test('renders a full page with onlineIndicator and routes', () => {
     const [appState, appApi] = useAppContext();
     const mockedReturnValue = [

package/lib/components/App/app.js

@@ -11,6 +11,7 @@ import { HeadProvider, StoreTitle } from '../Head';
 import Main from '../Main';
 import Mask from '../Mask';
 import Navigation from '../Navigation';
+import RobotsMeta from '../RobotsMeta/robotsMeta';
 import Routes from '../Routes';
 import ToastContainer from '../ToastContainer';
 import Icon from '../Icon';
@@ -93,6 +94,7 @@ const App = props => {
     if (renderError) {
         return (
             <HeadProvider>
+                <RobotsMeta />
                 <StoreTitle />
                 <Main isMasked={true} />
                 <Mask isActive={true} />
@@ -103,6 +105,7 @@ const App = props => {
 
     return (
         <HeadProvider>
+            <RobotsMeta />
             <StoreTitle />
             <Main isMasked={hasOverlay}>
                 <Routes />

package/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCard.spec.js.snap

@@ -26,6 +26,7 @@ Array [
     </span>
   </div>,
   <button
+    data-react-aria-pressable={true}
     disabled={true}
     onClick={[MockFunction]}
     onDragStart={[Function]}
@@ -76,6 +77,7 @@ Array [
     </span>
   </div>,
   <button
+    data-react-aria-pressable={true}
     disabled={false}
     onClick={[MockFunction]}
     onDragStart={[Function]}
@@ -88,6 +90,7 @@ Array [
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    tabIndex={0}
     type="button"
   >
     <span>

package/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap

@@ -82,6 +82,7 @@ exports[`it renders correctly when it has cards 1`] = `
           />
           <button
             className="root_normalPriority"
+            data-react-aria-pressable={true}
             disabled={false}
             onClick={[MockFunction]}
             onDragStart={[Function]}
@@ -93,6 +94,7 @@ exports[`it renders correctly when it has cards 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            tabIndex={0}
             type="button"
           >
             <span
@@ -107,6 +109,7 @@ exports[`it renders correctly when it has cards 1`] = `
         </div>
         <button
           className="check_balance_button"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
@@ -118,6 +121,7 @@ exports[`it renders correctly when it has cards 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="button"
         >
           <span
@@ -165,6 +169,7 @@ exports[`it renders correctly when it has cards 1`] = `
       </div>
       <button
         className="root_normalPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -177,6 +182,7 @@ exports[`it renders correctly when it has cards 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span
@@ -219,6 +225,7 @@ exports[`it renders correctly when it has cards 1`] = `
       </div>
       <button
         className="root_normalPriority"
+        data-react-aria-pressable={true}
         disabled={false}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -231,6 +238,7 @@ exports[`it renders correctly when it has cards 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        tabIndex={0}
         type="button"
       >
         <span
@@ -329,6 +337,7 @@ exports[`it renders correctly with no cards 1`] = `
           />
           <button
             className="root_normalPriority"
+            data-react-aria-pressable={true}
             disabled={false}
             onClick={[MockFunction]}
             onDragStart={[Function]}
@@ -340,6 +349,7 @@ exports[`it renders correctly with no cards 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            tabIndex={0}
             type="button"
           >
             <span
@@ -354,6 +364,7 @@ exports[`it renders correctly with no cards 1`] = `
         </div>
         <button
           className="check_balance_button"
+          data-react-aria-pressable={true}
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
@@ -365,6 +376,7 @@ exports[`it renders correctly with no cards 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          tabIndex={0}
           type="button"
         >
           <span