@magento/venia-ui 9.4.0 → 9.5.0-alpha.1

package/i18n/en_US.json

@@ -51,6 +51,7 @@
     "cartPage.wishlist.ce.successMessage": "An item has been successfully added to your favorites list.",
     "cartPage.wishlist.ee.successMessage": "An item has been successfully added to the \"{wishlistName}\" list.",
     "cartTrigger.ariaLabel": "Toggle mini cart. You have {count} items in your cart.",
+    "category.notFound": "Looks like the category you were hoping to find doesn't exist. Sorry about that.",
     "categoryContent.filter": "Filter",
     "categoryContent.itemsSortedBy": "Items sorted by ",
     "categoryContent.resultCount": "{count} Results",
@@ -85,6 +86,7 @@
     "checkoutPage.paymentLoadingError": "There was an error loading payments.",
     "checkoutPage.paymentMethodStatus": "{selectedPaymentMethod} is not supported for editing.",
     "checkoutPage.paymentSummary": "{cardType} ending in {lastFour}",
+    "checkoutPage.cardPlaceholder": "16-Digit Number",
     "checkoutPage.placeOrder": "Place Order",
     "checkoutPage.quantity": "Qty : {quantity}",
     "checkoutPage.quickCheckout": "Quick Checkout When You Return",

package/lib/RootComponents/CMS/__tests__/cms.spec.js

@@ -6,6 +6,10 @@ import { StoreTitle } from '../../../components/Head';
 import CMSPage from '../cms';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 jest.mock('../../../classify');
 
 jest.mock('../../../components/Head', () => ({

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

@@ -13,6 +13,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -110,6 +111,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -221,6 +223,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -332,6 +335,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -451,6 +455,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -501,6 +506,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -569,6 +575,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -666,6 +673,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div
@@ -716,6 +724,7 @@ Array [
       className="categoryHeader"
     >
       <h1
+        aria-live="polite"
         className="title"
       >
         <div

package/lib/RootComponents/Category/category.js

@@ -8,9 +8,16 @@ import defaultClasses from './category.module.css';
 import { Meta } from '../../components/Head';
 import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { useIntl } from 'react-intl';
+
+const MESSAGES = new Map().set(
+    'NOT_FOUND',
+    "Looks like the category you were hoping to find doesn't exist. Sorry about that."
+);
 
 const Category = props => {
     const { uid } = props;
+    const { formatMessage } = useIntl();
 
     const talonProps = useCategory({
         id: uid,
@@ -26,7 +33,8 @@ const Category = props => {
         categoryData,
         pageControl,
         sortProps,
-        pageSize
+        pageSize,
+        categoryNotFound
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -40,6 +48,16 @@ const Category = props => {
             return <ErrorView />;
         }
     }
+    if (categoryNotFound) {
+        return (
+            <ErrorView
+                message={formatMessage({
+                    id: 'category.notFound',
+                    defaultMessage: MESSAGES.get('NOT_FOUND')
+                })}
+            />
+        );
+    }
 
     return (
         <Fragment>

package/lib/RootComponents/Category/categoryContent.js

@@ -155,7 +155,7 @@ const CategoryContent = props => {
             <StoreTitle>{categoryName}</StoreTitle>
             <article className={classes.root} data-cy="CategoryContent-root">
                 <div className={classes.categoryHeader}>
-                    <h1 className={classes.title}>
+                    <h1 aria-live="polite" className={classes.title}>
                         <div
                             className={classes.categoryTitle}
                             data-cy="CategoryContent-categoryTitle"

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

@@ -6,6 +6,7 @@ exports[`renders form error 1`] = `
 >
   Account Information
   <h1
+    aria-live="polite"
     className="title"
   >
     <mock-FormattedMessage

package/lib/components/AccountInformationPage/accountInformationPage.js

@@ -127,6 +127,7 @@ const AccountInformationPage = props => {
                 })}
             </StoreTitle>
             <h1
+                aria-live="polite"
                 className={classes.title}
                 data-cy="AccountInformationPage-title"
             >

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

@@ -6,6 +6,7 @@ exports[`renders correctly when there are existing addresses 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Address Book
@@ -125,6 +126,7 @@ exports[`renders correctly when there are no existing addresses 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Address Book
@@ -199,6 +201,7 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Address Book

package/lib/components/AddressBookPage/addressBookPage.js

@@ -93,7 +93,11 @@ const AddressBookPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <h1 className={classes.heading} data-cy="AddressBookPage-heading">
+            <h1
+                aria-live="polite"
+                className={classes.heading}
+                data-cy="AddressBookPage-heading"
+            >
                 {PAGE_TITLE}
             </h1>
             <div className={classes.content} data-cy="AddressBookPage-content">

package/lib/components/AddressBookPage/addressBookPage.module.css

@@ -43,3 +43,6 @@
 
     composes: hover_border-brand-dark from global;
 }
+.addButton:focus {
+    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-100));
+}

package/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap

@@ -89,6 +89,7 @@ exports[`renders components if cart has items 1`] = `
     className="heading_container"
   >
     <h1
+      aria-live="polite"
       className="heading"
     >
       <mock-FormattedMessage
@@ -144,6 +145,7 @@ exports[`renders empty cart text (no adjustments, list or summary) if cart is em
     className="heading_container"
   >
     <h1
+      aria-live="polite"
       className="heading"
     >
       <mock-FormattedMessage

package/lib/components/CartPage/cartPage.js

@@ -93,7 +93,11 @@ const CartPage = props => {
                 })}
             </StoreTitle>
             <div className={classes.heading_container}>
-                <h1 data-cy="CartPage-heading" className={classes.heading}>
+                <h1
+                    aria-live="polite"
+                    data-cy="CartPage-heading"
+                    className={classes.heading}
+                >
                     <FormattedMessage
                         id={'cartPage.heading'}
                         defaultMessage={'Cart'}

package/lib/components/CheckoutPage/AddressBook/__tests__/__snapshots__/addressBook.spec.js.snap

@@ -32,6 +32,7 @@ Array [
     className="root_active"
   >
     <h1
+      aria-live="polite"
       className="headerText"
     >
       <mock-FormattedMessage
@@ -215,6 +216,7 @@ Array [
     className="root"
   >
     <h1
+      aria-live="polite"
       className="headerText"
     >
       <mock-FormattedMessage

package/lib/components/CheckoutPage/AddressBook/addressBook.js

@@ -133,7 +133,7 @@ const AddressBook = props => {
     return (
         <Fragment>
             <div className={rootClass}>
-                <h1 className={classes.headerText}>
+                <h1 aria-live="polite" className={classes.headerText}>
                     <FormattedMessage
                         id={'addressBook.headerText'}
                         defaultMessage={'Change Shipping Information'}

package/lib/components/CheckoutPage/GuestSignIn/__tests__/__snapshots__/guestSignIn.spec.js.snap

@@ -5,6 +5,7 @@ exports[`renders CreateAccount component 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="header"
   >
     <mock-FormattedMessage
@@ -59,6 +60,7 @@ exports[`renders ForgotPassword component 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="header"
   >
     <mock-FormattedMessage
@@ -112,6 +114,7 @@ exports[`renders SignIn component 2`] = `
   className="root_hidden"
 >
   <h1
+    aria-live="polite"
     className="header"
   >
     <mock-FormattedMessage

package/lib/components/CheckoutPage/GuestSignIn/guestSignIn.js

@@ -54,7 +54,7 @@ const GuestSignIn = props => {
 
     return (
         <div className={rootClass}>
-            <h1 className={classes.header}>
+            <h1 aria-live="polite" className={classes.header}>
                 <FormattedMessage
                     id="checkoutPage.guestSignIn.header"
                     defaultMessage="Account Sign-in"

package/lib/components/CheckoutPage/ItemsReview/itemsReview.js

@@ -34,7 +34,7 @@ const ItemsReview = props => {
 
     const items = itemsInCart.map((item, index) => (
         <Item
-            key={item.id}
+            key={item.uid}
             {...item}
             isHidden={!showAllItems && index >= 2}
             configurableThumbnailSource={configurableThumbnailSource}

package/lib/components/CheckoutPage/OrderSummary/__tests__/__snapshots__/orderSummary.spec.js.snap

@@ -5,6 +5,7 @@ exports[`renders order summary 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="title"
   >
     <mock-FormattedMessage

package/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -9,7 +9,7 @@ const OrderSummary = props => {
     const classes = useStyle(defaultClasses, props.classes);
     return (
         <div data-cy="OrderSummary-root" className={classes.root}>
-            <h1 className={classes.title}>
+            <h1 aria-live="polite" className={classes.title}>
                 <FormattedMessage
                     id={'checkoutPage.orderSummary'}
                     defaultMessage={'Order Summary'}

package/lib/components/CheckoutPage/PaymentInformation/brainTreeDropIn.js

@@ -11,7 +11,7 @@
  */
 
 import React, { useEffect, useState, useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { bool, func, shape, string } from 'prop-types';
 
 import defaultClasses from './braintreeDropin.module.css';
@@ -39,6 +39,7 @@ const BraintreeDropin = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const [isError, setIsError] = useState(false);
     const [dropinInstance, setDropinInstance] = useState();
+    const { formatMessage } = useIntl();
 
     const createDropinInstance = useCallback(async () => {
         const { default: dropIn } = await import('braintree-web-drop-in');
@@ -52,6 +53,10 @@ const BraintreeDropin = props => {
                 overrides: {
                     fields: {
                         number: {
+                            placeholder: formatMessage({
+                                id: 'checkoutPage.cardPlaceholder',
+                                defaultMessage: '16-Digit Number'
+                            }),
                             maskInput: {
                                 // Only show last four digits on blur.
                                 showLastFour: true
@@ -63,7 +68,7 @@ const BraintreeDropin = props => {
         });
 
         return dropinInstance;
-    }, [containerId]);
+    }, [containerId, formatMessage]);
 
     useEffect(() => {
         let unmounted = false;

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -770,6 +770,7 @@ exports[`CheckoutPage renders empty cart 1`] = `
       className="heading_container"
     >
       <h1
+        aria-live="polite"
         className="heading"
       >
         Guest Checkout

package/lib/components/CheckoutPage/checkoutPage.js

@@ -137,6 +137,7 @@ const CheckoutPage = props => {
             <div className={classes.empty_cart_container}>
                 <div className={classes.heading_container}>
                     <h1
+                        aria-live="polite"
                         className={classes.heading}
                         data-cy="ChekoutPage-heading"
                     >

package/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -54,6 +54,10 @@ jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
     return { useAwaitQuery };
 });
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 const props = {
     onSubmit: jest.fn()
 };

package/lib/components/Footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -205,6 +205,7 @@ exports[`footer renders copyright 1`] = `
       foo
     </p>
     <a
+      aria-label="Venia"
       className="logoContainer"
       href="/"
       onClick={[Function]}

package/lib/components/Footer/footer.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Facebook, Instagram, Twitter } from 'react-feather';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { shape, string } from 'prop-types';
 import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
@@ -18,6 +18,8 @@ const Footer = props => {
     const talonProps = useFooter();
 
     const { copyrightText } = talonProps;
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
 
     const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
         const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
@@ -106,7 +108,11 @@ const Footer = props => {
                     </li>
                 </ul>
                 <p className={classes.copyright}>{copyrightText || null}</p>
-                <Link to={resourceUrl('/')} className={classes.logoContainer}>
+                <Link
+                    to={resourceUrl('/')}
+                    aria-label={title}
+                    className={classes.logoContainer}
+                >
                     <Logo classes={{ logo: classes.logo }} />
                 </Link>
             </div>

package/lib/components/Gallery/__tests__/gallery.spec.js

@@ -3,6 +3,9 @@ import { createTestInstance } from '@magento/peregrine';
 
 import Gallery from '../gallery';
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
 jest.mock('react-router-dom', () => ({
     Link: ({ children }) => children
 }));

package/lib/components/Gallery/__tests__/item.spec.js

@@ -4,6 +4,9 @@ import { createTestInstance } from '@magento/peregrine';
 
 import Item from '../item';
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
 jest.mock('@magento/peregrine/lib/talons/Image/useImage', () => {
     return {
         useImage: () => ({

package/lib/components/Gallery/item.js

@@ -32,6 +32,7 @@ const GalleryItem = props => {
     const {
         handleLinkClick,
         item,
+        itemRef,
         wishlistButtonProps,
         isSupportedProductType
     } = useGalleryItem(props);
@@ -87,6 +88,7 @@ const GalleryItem = props => {
             className={classes.root}
             aria-live="polite"
             aria-busy="false"
+            ref={itemRef}
         >
             <Link
                 onClick={handleLinkClick}
@@ -162,6 +164,9 @@ GalleryItem.propTypes = {
                 regular_price: shape({
                     value: number.isRequired,
                     currency: string.isRequired
+                }).isRequired,
+                discount: shape({
+                    amount_off: number.isRequired
                 }).isRequired
             }).isRequired
         }).isRequired

package/lib/components/Header/__tests__/__snapshots__/cartTrigger.spec.js.snap

@@ -4,6 +4,7 @@ exports[`Cart counter displays 99+ when items quantity is more than 99 1`] = `
 Array [
   <div>
     <button
+      aria-expanded={false}
       aria-label="Toggle mini cart. You have 100 items in your cart."
       onClick={[Function]}
     >
@@ -39,6 +40,7 @@ Array [
     </button>
   </div>,
   <button
+    aria-expanded={false}
     aria-label="Toggle mini cart. You have 100 items in your cart."
     onClick={[Function]}
   >
@@ -83,6 +85,7 @@ exports[`Cart icon svg has fill and correct value when cart contains items 1`] =
 Array [
   <div>
     <button
+      aria-expanded={false}
       aria-label="Toggle mini cart. You have 10 items in your cart."
       onClick={[Function]}
     >
@@ -118,6 +121,7 @@ Array [
     </button>
   </div>,
   <button
+    aria-expanded={false}
     aria-label="Toggle mini cart. You have 10 items in your cart."
     onClick={[Function]}
   >
@@ -164,6 +168,7 @@ exports[`No counter when cart is empty 1`] = `
 Array [
   <div>
     <button
+      aria-expanded={false}
       aria-label="Toggle mini cart. You have 0 items in your cart."
       onClick={[Function]}
     >
@@ -196,6 +201,7 @@ Array [
     </button>
   </div>,
   <button
+    aria-expanded={false}
     aria-label="Toggle mini cart. You have 0 items in your cart."
     onClick={[Function]}
   >

package/lib/components/Header/__tests__/__snapshots__/currencySwitcher.spec.js.snap

@@ -5,6 +5,7 @@ exports[`does not render CurrencySwitcher when there is only one available store
   className="root"
 >
   <button
+    aria-expanded={false}
     aria-label="EUR"
     className="trigger"
     onClick={[MockFunction]}
@@ -27,9 +28,13 @@ exports[`does not render CurrencySwitcher when there is only one available store
   <div
     className="menu"
   >
-    <ul>
+    <ul
+      role="listbox"
+    >
       <li
+        aria-selected="EUR"
         className="menuItem"
+        role="option"
       >
         <button
           className="root"
@@ -57,7 +62,9 @@ exports[`does not render CurrencySwitcher when there is only one available store
         </button>
       </li>
       <li
+        aria-selected="EUR"
         className="menuItem"
+        role="option"
       >
         <button
           className="root"
@@ -114,6 +121,7 @@ exports[`renders the correct tree 1`] = `
   className="root"
 >
   <button
+    aria-expanded={false}
     aria-label="EUR"
     className="trigger"
     onClick={[MockFunction]}
@@ -136,9 +144,13 @@ exports[`renders the correct tree 1`] = `
   <div
     className="menu"
   >
-    <ul>
+    <ul
+      role="listbox"
+    >
       <li
+        aria-selected="EUR"
         className="menuItem"
+        role="option"
       >
         <button
           className="root"
@@ -166,7 +178,9 @@ exports[`renders the correct tree 1`] = `
         </button>
       </li>
       <li
+        aria-selected="EUR"
         className="menuItem"
+        role="option"
       >
         <button
           className="root"