@magento/venia-ui 10.2.0 → 10.3.0-alpha.2

package/i18n/en_US.json

@@ -27,6 +27,7 @@
     "addressBookPage.addressBookText": "Address Book",
     "addressBookPage.editDialogTitle": "Edit Address",
     "addressBookPage.makeDefaultAddress": "Make this my default address",
+    "addressBookPage.addAddressMessage": "You have added {count} address in your address book.",
     "addressBookPage.telephone": "Phone {telephone}",
     "addressCard.defaultText": "Default",
     "addToCartButton.addItemToCart": "ADD TO CART",
@@ -309,6 +310,7 @@
     "orderHistoryPage.loadMore": "Load More",
     "orderHistoryPage.pageInfo": "Showing {current} of {total}",
     "orderHistoryPage.pageTitleText": "Order History",
+    "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
     "orderProgressBar.deliveredText": "Delivered",
@@ -393,6 +395,7 @@
     "savedPaymentsPage.addButtonText": "Add a credit card",
     "savedPaymentsPage.creditCard.errorRemoving": "Something went wrong deleting this payment method. Please refresh and try again.",
     "savedPaymentsPage.noSavedPayments": "You have no saved payments.",
+    "savedPaymentsPage.Message": "You have {count} saved payments.",
     "savedPaymentsPage.title": "Saved Payments",
     "searchBar.heading": "Product Suggestions",
     "searchBar.label": " in {label}",
@@ -480,6 +483,7 @@
     "wishlistPage.headingText": "{count, plural, one {Favorites List} other {Favorites Lists}}",
     "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
     "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
+    "wishlist.itemsMessage": "You have {count} items in your wishlist",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
     "wishlist.loadMore": "Load More",
     "LegacyMiniCart.buttonExpanded":"More Options Expanded",

package/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap

@@ -31,7 +31,7 @@ exports[`it renders a loading indicator when appropriate 1`] = `
   </span>
   <span
     aria-atomic="true"
-    aria-label="Toggle My Account Menu"
+    aria-label="Hiundefined"
     aria-live="polite"
     className="text"
   >

package/lib/components/AccountChip/accountChip.js

@@ -35,10 +35,13 @@ const AccountChip = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
-    const ariaLabelMyMenu = formatMessage({
-        id: 'accountTrigger.ariaLabelMyMenu',
-        defaultMessage: 'Toggle My Account Menu'
-    });
+    const ariaLabelMyMenu =
+        currentUser != null
+            ? formatMessage({
+                  id: 'Hi' + currentUser.firstname,
+                  defaultMessage: 'Hi' + currentUser.firstname
+              })
+            : '';
 
     const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : '';
 

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

@@ -5,7 +5,7 @@ exports[`renders form error 1`] = `
   className="root"
 >
   Account Information
-  <h1
+  <div
     aria-live="polite"
     className="title"
   >
@@ -13,7 +13,7 @@ exports[`renders form error 1`] = `
       defaultMessage="Account Information"
       id="accountInformationPage.accountInformation"
     />
-  </h1>
+  </div>
   <p
     className="root"
   >

package/lib/components/AccountInformationPage/accountInformationPage.js

@@ -126,7 +126,7 @@ const AccountInformationPage = props => {
                     defaultMessage: 'Account Information'
                 })}
             </StoreTitle>
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.title}
                 data-cy="AccountInformationPage-title"
@@ -135,7 +135,7 @@ const AccountInformationPage = props => {
                     id={'accountInformationPage.accountInformation'}
                     defaultMessage={'Account Information'}
                 />
-            </h1>
+            </div>
             {errorMessage ? errorMessage : pageContent}
         </div>
     );

package/lib/components/AccountMenu/accountMenu.js

@@ -10,7 +10,11 @@ import ForgotPassword from '../ForgotPassword';
 import defaultClasses from './accountMenu.module.css';
 
 const AccountMenu = React.forwardRef((props, ref) => {
-    const { accountMenuIsOpen, setAccountMenuIsOpen } = props;
+    const {
+        handleTriggerClick,
+        accountMenuIsOpen,
+        setAccountMenuIsOpen
+    } = props;
     const talonProps = useAccountMenu({
         accountMenuIsOpen,
         setAccountMenuIsOpen
@@ -67,6 +71,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
         default: {
             dropdownContents = (
                 <SignIn
+                    handleTriggerClick={handleTriggerClick}
                     classes={{
                         modal_active: classes.loading
                     }}

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

@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing addresses 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 3 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -125,12 +129,16 @@ exports[`renders correctly when there are no existing addresses 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 0 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -200,12 +208,16 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 3 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >

package/lib/components/AddressBookPage/addressBookPage.js

@@ -90,16 +90,26 @@ const AddressBookPage = props => {
         return fullPageLoadingIndicator;
     }
 
+    const addressBookPageMessage = formatMessage(
+        {
+            id: 'addressBookPage.addAddressMessage',
+            defaultMessage:
+                'You have added {count} address in your address book.'
+        },
+        { count: customerAddresses.length }
+    );
+
     return (
         <div className={classes.root}>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.heading}
                 data-cy="AddressBookPage-heading"
             >
                 {PAGE_TITLE}
-            </h1>
+                <div aria-live="polite" aria-label={addressBookPageMessage} />
+            </div>
             <div className={classes.content} data-cy="AddressBookPage-content">
                 {addressBookElements}
                 <LinkButton

package/lib/components/CartPage/ProductListing/EditModal/productForm.js

@@ -91,6 +91,7 @@ const ProductForm = props => {
                     }}
                     errors={Array.from(errors.values())}
                     scrollOnError={false}
+                    allowErrorMessages={true}
                 />
                 <ProductDetail
                     item={cartItem}

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap

@@ -351,8 +351,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -827,8 +827,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1364,8 +1364,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap

@@ -333,8 +333,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -800,8 +800,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1255,8 +1255,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1736,8 +1736,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js

@@ -134,6 +134,18 @@ const CustomerForm = props => {
         <Text type="hidden" field="default_shipping" initialValue={true} />
     );
 
+    const createErrorMessage = JSON.stringify(
+        errors.get('createCustomerAddressMutation')
+    );
+    const updateErrorMessage = JSON.stringify(
+        errors.get('updateCustomerAddressMutation')
+    );
+    const errorMessage = 'region_id is required for the specified country code';
+    const regionError =
+        createErrorMessage?.includes(errorMessage) ||
+        updateErrorMessage?.includes(errorMessage);
+
+    // errors
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -257,9 +269,10 @@ const CustomerForm = props => {
                         />
                     </Field>
                 </div>
+
                 <div className={classes.region}>
                     <Region
-                        validate={isRequired}
+                        regionError={regionError}
                         data-cy="CustomerForm-region"
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -269,7 +282,20 @@ const CustomerForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
+
                 <div className={classes.postcode}>
                     <Postcode
                         validate={isRequired}

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css

@@ -42,6 +42,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js

@@ -126,6 +126,13 @@ const GuestForm = props => {
         }
     }, [addToast, formatMessage, showSignInToast, handleToastAction]);
 
+    const shippingAddressError = JSON.stringify(
+        errors.get('setGuestShippingMutation')
+    );
+
+    const errorMessage = 'Region is required';
+    const regionError = shippingAddressError?.includes(errorMessage);
+
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -304,11 +311,11 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
+                        regionError={regionError}
                         autoComplete={formatMessage({
                             id: 'region.label',
                             defaultMessage: 'State'
                         })}
-                        validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
@@ -318,6 +325,18 @@ const GuestForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
                 <div className={classes.postcode}>
                     <Postcode

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css

@@ -36,6 +36,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;

package/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap

@@ -5,14 +5,14 @@ exports[`renders empty form without data 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -114,14 +114,14 @@ exports[`renders form error 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -223,14 +223,14 @@ exports[`renders prefilled form with data with disabled buttons 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -334,14 +334,14 @@ exports[`renders prefilled form with data with enabled buttons 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."

package/lib/components/CommunicationsPage/communicationsPage.js

@@ -45,12 +45,12 @@ const CommunicationsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 className={classes.title}>
+            <div className={classes.title}>
                 <FormattedMessage
                     id={'communicationsPage.communicationsText'}
                     defaultMessage={'Communications'}
                 />
-            </h1>
+            </div>
             <p>
                 <FormattedMessage
                     id={'communicationsPage.optInText'}

package/lib/components/FilterModal/FilterList/__tests__/filterDefault.spec.js

@@ -1,12 +1,16 @@
 import React from 'react';
 
 import { createTestInstance } from '@magento/peregrine';
-
+import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
 import Checkbox from '../../../Checkbox';
 import FilterDefault from '../filterDefault';
 
 jest.mock('../../../Checkbox', () => props => <mock-Checkbox {...props} />);
 
+jest.mock('@magento/peregrine/lib/talons/Header/useCurrencySwitcher', () => ({
+    useCurrencySwitcher: jest.fn()
+}));
+
 const mockLabel = 'Item Label';
 
 let inputProps = {};
@@ -22,6 +26,16 @@ const givenDefaultValues = () => {
     };
 };
 
+const talonProps = {
+    handleSwitchCurrency: jest.fn(),
+    availableCurrencies: ['USD', 'EUR'],
+    currentCurrencyCode: 'EUR',
+    currencyMenuRef: {},
+    currencyMenuTriggerRef: {},
+    currencyMenuIsOpen: false,
+    handleTriggerClick: jest.fn()
+};
+
 const givenWithItem = () => {
     inputProps = {
         ...inputProps,
@@ -42,6 +56,7 @@ const givenWithSelectedItem = () => {
 describe('#FilterDefault', () => {
     beforeEach(() => {
         givenDefaultValues();
+        useCurrencySwitcher.mockReturnValueOnce(talonProps);
     });
 
     it('renders without item', () => {

package/lib/components/FilterModal/FilterList/filterDefault.js

@@ -5,6 +5,7 @@ import { bool, shape, string } from 'prop-types';
 import Checkbox from '../../Checkbox';
 import { useStyle } from '../../../classify';
 import defaultClasses from './filterDefault.module.css';
+import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
 
 const FilterDefault = props => {
     const {
@@ -12,11 +13,22 @@ const FilterDefault = props => {
         isSelected,
         item,
         onMouseDown,
+        group,
         ...restProps
     } = props;
 
     const { label, value_index } = item || {};
     const classes = useStyle(defaultClasses, propsClasses);
+    const { currentCurrencyCode } = useCurrencySwitcher();
+    const currencySymbolMap = {
+        USD: '$',
+        EUR: '€'
+    };
+    const title =
+        group === 'price'
+            ? currencySymbolMap[currentCurrencyCode] +
+              label.replace('-', ' - ' + currencySymbolMap[currentCurrencyCode])
+            : label;
     const { formatMessage } = useIntl();
 
     const ariaLabel = !isSelected
@@ -44,7 +56,7 @@ const FilterDefault = props => {
             classes={classes}
             field={`${label}-${value_index}`}
             fieldValue={!!isSelected}
-            label={label}
+            label={title}
             ariaLabel={ariaLabel}
             data-cy="FilterDefault-checkbox"
             onClick={onMouseDown}

package/lib/components/FilterModal/FilterList/filterItem.js

@@ -52,6 +52,7 @@ const FilterItem = props => {
             item={tileItem}
             onMouseDown={handleClick}
             onKeyDown={handleKeyDown}
+            group={group}
             title={title}
             value={value}
         />

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

@@ -19,6 +19,7 @@ Array [
   </div>,
   <require('../AccountMenu')
     accountMenuIsOpen={false}
+    handleTriggerClick={[MockFunction handleTriggerClick]}
   />,
 ]
 `;

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

@@ -5,7 +5,7 @@ Array [
   <div>
     <button
       aria-expanded={false}
-      aria-label="Toggle mini cart. You have 100 items in your cart."
+      aria-label="Toggle mini cart. You have 0 items in your cart."
       onClick={[Function]}
     >
       <span>
@@ -34,14 +34,11 @@ Array [
           />
         </svg>
       </span>
-      <span>
-        99+
-      </span>
     </button>
   </div>,
   <button
     aria-expanded={false}
-    aria-label="Toggle mini cart. You have 100 items in your cart."
+    aria-label="Toggle mini cart. You have 0 items in your cart."
     onClick={[Function]}
   >
     <span>
@@ -70,9 +67,6 @@ Array [
         />
       </svg>
     </span>
-    <span>
-      99+
-    </span>
   </button>,
   <require('../MiniCart')
     isOpen={false}
@@ -86,7 +80,7 @@ Array [
   <div>
     <button
       aria-expanded={false}
-      aria-label="Toggle mini cart. You have 10 items in your cart."
+      aria-label="Toggle mini cart. You have 0 items in your cart."
       onClick={[Function]}
     >
       <span>
@@ -115,14 +109,11 @@ Array [
           />
         </svg>
       </span>
-      <span>
-        10
-      </span>
     </button>
   </div>,
   <button
     aria-expanded={false}
-    aria-label="Toggle mini cart. You have 10 items in your cart."
+    aria-label="Toggle mini cart. You have 0 items in your cart."
     onClick={[Function]}
   >
     <span>
@@ -151,9 +142,6 @@ Array [
         />
       </svg>
     </span>
-    <span>
-      10
-    </span>
   </button>,
   <require('../MiniCart')
     isOpen={false}

package/lib/components/Header/accountTrigger.js

@@ -63,6 +63,7 @@ const AccountTrigger = props => {
             </div>
             <Suspense fallback={null}>
                 <AccountMenu
+                    handleTriggerClick={handleTriggerClick}
                     ref={accountMenuRef}
                     accountMenuIsOpen={accountMenuIsOpen}
                     setAccountMenuIsOpen={setAccountMenuIsOpen}

package/lib/components/MegaMenu/submenu.module.css

@@ -7,7 +7,7 @@
     composes: px-3 from global;
     composes: py-5 from global;
     composes: right-0 from global;
-    composes: top-full from global;
+    top: 80px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
 }
 

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

@@ -6,12 +6,16 @@ exports[`renders correctly with data 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 3 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -209,12 +213,16 @@ exports[`renders correctly without data 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -388,12 +396,16 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -581,12 +593,16 @@ exports[`renders loading indicator 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -794,12 +810,16 @@ exports[`renders no orders message is orders is empty 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -56,6 +56,15 @@ const OrderHistoryPage = props => {
         id: 'orderHistoryPage.search',
         defaultMessage: 'Search by Order Number'
     });
+
+    const ordersCountMessage = formatMessage(
+        {
+            id: 'orderHistoryPage.ordersCount',
+            defaultMessage: 'You have {count} orders in your history.'
+        },
+        { count: orders.length }
+    );
+
     const classes = useStyle(defaultClasses, props.classes);
 
     const orderRows = useMemo(() => {
@@ -160,9 +169,11 @@ const OrderHistoryPage = props => {
         <OrderHistoryContextProvider>
             <div className={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
-                <h1 aria-live="polite" className={classes.heading}>
+                <div aria-live="polite" className={classes.heading}>
                     {PAGE_TITLE}
-                </h1>
+                    <div aria-live="polite" aria-label={ordersCountMessage} />
+                </div>
+
                 <div className={classes.filterRow}>
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
                     <Form className={classes.search} onSubmit={handleSubmit}>

package/lib/components/Region/region.js

@@ -18,6 +18,7 @@ import { GET_REGIONS_QUERY } from './region.gql';
 const Region = props => {
     const {
         classes: propClasses,
+        regionError,
         countryCodeField,
         fieldInput,
         fieldSelect,
@@ -47,13 +48,19 @@ const Region = props => {
     const regionField =
         regions.length || loading ? (
             <Select
+                regionError={regionError}
                 {...regionProps}
                 field={fieldSelect}
                 id={classes.root}
                 items={regions}
             />
         ) : (
-            <TextInput {...regionProps} field={fieldInput} id={classes.root} />
+            <TextInput
+                {...regionProps}
+                field={fieldInput}
+                id={classes.root}
+                regionError={regionError}
+            />
         );
 
     return (

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

@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing saved payments 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Saved Payments
-  </h1>
+    <div
+      aria-label="You have 1 saved payments."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -37,12 +41,16 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Saved Payments
-  </h1>
+    <div
+      aria-label="You have no saved payments."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   />

package/lib/components/SavedPaymentsPage/savedPaymentsPage.js

@@ -48,6 +48,23 @@ const SavedPaymentsPage = props => {
         defaultMessage: 'Saved Payments'
     });
 
+    const savedPaymentsMessage = useMemo(() => {
+        if (!savedPayments.length) {
+            return formatMessage({
+                id: 'savedPaymentsPage.noSavedPayments',
+                defaultMessage: 'You have no saved payments.'
+            });
+        } else {
+            return formatMessage(
+                {
+                    id: 'savedPaymentsPage.Message',
+                    defaultMessage: 'You have {count} saved payments.'
+                },
+                { count: savedPayments.length }
+            );
+        }
+    }, [savedPayments, formatMessage]);
+
     if (isLoading) {
         return fullPageLoadingIndicator;
     }
@@ -55,9 +72,10 @@ const SavedPaymentsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 aria-live="polite" className={classes.heading}>
+            <div aria-live="polite" className={classes.heading}>
                 {title}
-            </h1>
+                <div aria-live="polite" aria-label={savedPaymentsMessage} />
+            </div>
             <div className={classes.content}>{savedPaymentElements}</div>
             <div className={classes.noPayments}>{noSavedPayments}</div>
         </div>

package/lib/components/Select/select.js

@@ -18,6 +18,7 @@ const Select = props => {
     const {
         before,
         classes: propClasses,
+        regionError,
         field,
         items,
         message,
@@ -25,7 +26,8 @@ const Select = props => {
     } = props;
     const fieldState = useFieldState(field);
     const classes = useStyle(defaultClasses, propClasses);
-    const inputClass = fieldState.error ? classes.input_error : classes.input;
+    const inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
 
     const options = items.map(
         ({ disabled = null, hidden = null, label, value, key = value }) => (

package/lib/components/SignIn/signIn.js

@@ -19,6 +19,7 @@ import GoogleRecaptcha from '../GoogleReCaptcha';
 const SignIn = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const {
+        handleTriggerClick,
         setDefaultUsername,
         showCreateAccount,
         showForgotPassword,
@@ -27,6 +28,7 @@ const SignIn = props => {
 
     const { formatMessage } = useIntl();
     const talonProps = useSignIn({
+        handleTriggerClick,
         getCartDetailsQuery: GET_CART_DETAILS_QUERY,
         setDefaultUsername,
         showCreateAccount,

package/lib/components/TextInput/textInput.js

@@ -12,13 +12,15 @@ const TextInput = props => {
         after,
         before,
         classes: propClasses,
+        regionError,
         field,
         message,
         ...rest
     } = props;
     const fieldState = useFieldState(field);
     const classes = useStyle(defaultClasses, propClasses);
-    const inputClass = fieldState.error ? classes.input_error : classes.input;
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
 
     return (
         <Fragment>

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap

@@ -4,23 +4,34 @@ exports[`empty single wishlist 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 5 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
-          "count": 0,
+          "count": 1,
         }
       }
     />
-  </h1>
-  <Wishlist />
+  </div>
+  <Wishlist
+    data={
+      Object {
+        "items_count": 5,
+      }
+    }
+    isCollapsed={false}
+  />
   <CreateWishlist
-    numberOfWishlists={0}
+    numberOfWishlists={1}
   />
 </div>
 `;
@@ -29,10 +40,14 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
@@ -42,11 +57,12 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
         }
       }
     />
-  </h1>
+  </div>
   <Wishlist
     data={
       Object {
         "id": 1,
+        "items_count": 1,
         "name": "Favorites",
       }
     }
@@ -62,20 +78,24 @@ exports[`renders disabled feature error 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
-          "count": 0,
+          "count": 1,
         }
       }
     />
-  </h1>
+  </div>
   <div
     className="errorContainer"
   >
@@ -93,20 +113,24 @@ exports[`renders general fetch error 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
-          "count": 0,
+          "count": 1,
         }
       }
     />
-  </h1>
+  </div>
   <div
     className="errorContainer"
   >
@@ -206,10 +230,14 @@ exports[`renders wishlist data 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
@@ -219,11 +247,12 @@ exports[`renders wishlist data 1`] = `
         }
       }
     />
-  </h1>
+  </div>
   <Wishlist
     data={
       Object {
         "id": 1,
+        "items_count": 1,
         "name": "Favorites",
       }
     }
@@ -233,6 +262,7 @@ exports[`renders wishlist data 1`] = `
     data={
       Object {
         "id": 2,
+        "items_count": 2,
         "name": "Registry",
       }
     }

package/lib/components/WishlistPage/__tests__/wishlistPage.spec.js

@@ -29,7 +29,7 @@ test('renders general fetch error', () => {
                 { graphQLErrors: [{ message: 'Ruh roh!' }] }
             ]
         ]),
-        wishlists: []
+        wishlists: [{ id: 1, name: 'Favorites', items_count: 1 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -49,7 +49,7 @@ test('renders disabled feature error', () => {
                 }
             ]
         ]),
-        wishlists: []
+        wishlists: [{ id: 1, name: 'Favorites', items_count: 1 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -60,7 +60,10 @@ test('renders disabled feature error', () => {
 test('renders wishlist data', () => {
     useWishlistPage.mockReturnValue({
         errors: new Map(),
-        wishlists: [{ id: 1, name: 'Favorites' }, { id: 2, name: 'Registry' }]
+        wishlists: [
+            { id: 1, name: 'Favorites', items_count: 1 },
+            { id: 2, name: 'Registry', items_count: 2 }
+        ]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -71,7 +74,7 @@ test('renders wishlist data', () => {
 test('renders a single wishlist without visibility toggle', () => {
     useWishlistPage.mockReturnValue({
         errors: new Map(),
-        wishlists: [{ id: 1, name: 'Favorites' }]
+        wishlists: [{ id: 1, name: 'Favorites', items_count: 1 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -82,7 +85,7 @@ test('renders a single wishlist without visibility toggle', () => {
 test('empty single wishlist', () => {
     useWishlistPage.mockReturnValue({
         errors: new Map(),
-        wishlists: []
+        wishlists: [{ items_count: 5 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);

package/lib/components/WishlistPage/wishlistPage.js

@@ -79,13 +79,22 @@ const WishlistPage = props => {
         );
     }
 
+    const wishlistMessage = formatMessage(
+        {
+            id: 'wishlist.itemsMessage',
+            defaultMessage: 'You have {count} items in your wishlist.'
+        },
+        { count: wishlists[0].items_count }
+    );
+
     return (
         <div className={classes.root} data-cy="Wishlist-root">
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.heading}
                 data-cy="WishlistPage-heading"
             >
+                <div aria-live="polite" aria-label={wishlistMessage} />
                 <FormattedMessage
                     values={{ count: wishlists.length }}
                     id={'wishlistPage.headingText'}
@@ -93,7 +102,7 @@ const WishlistPage = props => {
                         '{count, plural, one {Favorites List} other {Favorites Lists}}'
                     }
                 />
-            </h1>
+            </div>
             {content}
         </div>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "10.2.0",
+  "version": "10.3.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -79,9 +79,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
-    "@magento/babel-preset-peregrine": "~1.2.2",
-    "@magento/peregrine": "~13.1.1",
-    "@magento/pwa-buildpack": "~11.4.2",
+    "@magento/babel-preset-peregrine": "1.2.3-alpha.2",
+    "@magento/peregrine": "13.2.1-alpha.2",
+    "@magento/pwa-buildpack": "11.4.3-alpha.2",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.33.3",
     "graphql": "~15.5.0",