@magento/venia-ui 9.7.0 → 10.0.0-beta.1

package/i18n/en_US.json

@@ -14,7 +14,8 @@
     "accountMenu.savedPaymentsLink": "Saved Payments",
     "accountMenu.signOutButtonText": "Sign Out",
     "accountMenu.storeCreditLink": "Store Credit & Gift Cards",
-    "accountTrigger.ariaLabel": "Toggle My Account Menu",
+    "accountTrigger.ariaLabelMyMenu": "Toggle My Account Menu",
+    "accountTrigger.ariaLabelSignIn": "Sign In",
     "accountTrigger.buttonFallback": "Sign In",
     "accountTrigger.signIn": "Sign In",
     "addressBook.addNewAddresstext": "Add New Address",
@@ -183,6 +184,7 @@
     "filterModal.item.clearFilter": "Remove filter \"{optionName}\".",
     "filterModal.item.hideOptions": "Hide \"{itemName}\" filter item options.",
     "filterModal.item.showOptions": "Show \"{itemName}\" filter item options.",
+    "filterModalOpenButton.ariaLabel": "Filter Button for Filter Options.",
     "filterSearch.name": "Enter a {name}",
     "footer.calloutText": "Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
     "footer.followText": "Follow Us!",
@@ -372,6 +374,8 @@
     "productQuantity.label": "product's quantity",
     "productSort.sortByButton": "Sort by",
     "productSort.sortButton": "Sort",
+    "productSort.sortButtonCollapsed": "Sort Button Collapsed",
+    "productSort.sortButtonExpanded": "Sort Button Expanded",
     "quantity.buttonDecrement": "Decrease Quantity",
     "quantity.buttonIncrement": "Increase Quantity",
     "quantity.input": "Item Quantity",
@@ -477,5 +481,22 @@
     "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
     "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
-    "wishlist.loadMore": "Load More"
+    "wishlist.loadMore": "Load More",
+    "LegacyMiniCart.buttonExpanded":"More Options Expanded",
+    "LegacyMiniCart.buttonCollapsed":"More Options Collapsed",
+    "global.deletedButton":"Item Deleted",
+    "password.hide":"Hide Password",
+    "password.View":"View Password",
+    "global.clearText":"Clear Text",
+    "global.close":"Close",
+    "global.firstNameRequired":"First Name Required",
+    "global.lastNameRequired":"Last Name Required",
+    "global.emailRequired":"Email Required",
+    "global.passwordRequired":"Password Required",
+    "global.countryRequired":"Country Required",
+    "global.streetAddressRequired":"Street Address Required",
+    "global.cityRequired":"City Required",
+    "global.stateRequired":"State Required",
+    "Form.postalCode":"ZIP / Postal Code Required",
+    "Form.phonenumber":"Phone Number Required"
 }

package/lib/RootComponents/Category/NoProductsFound/noProductsFound.js

@@ -28,7 +28,7 @@ const NoProductsFound = props => {
             );
 
             return (
-                <li key={category.id} className={classes.listItem}>
+                <li key={category.uid} className={classes.listItem}>
                     <Link to={uri}>{category.name}</Link>
                 </li>
             );

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

@@ -140,6 +140,7 @@ Array [
                   >
                     <img
                       alt="Placeholder for gallery item image"
+                      aria-hidden="true"
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -191,6 +192,7 @@ Array [
                   >
                     <img
                       alt="Placeholder for gallery item image"
+                      aria-hidden="true"
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -242,6 +244,7 @@ Array [
                   >
                     <img
                       alt="Placeholder for gallery item image"
+                      aria-hidden="true"
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -293,6 +296,7 @@ Array [
                   >
                     <img
                       alt="Placeholder for gallery item image"
+                      aria-hidden="true"
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -344,6 +348,7 @@ Array [
                   >
                     <img
                       alt="Placeholder for gallery item image"
+                      aria-hidden="true"
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -395,6 +400,7 @@ Array [
                   >
                     <img
                       alt="Placeholder for gallery item image"
+                      aria-hidden="true"
                       className="image placeholder"
                       loading="eager"
                       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="

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

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

package/lib/components/AccountChip/accountChip.js

@@ -35,6 +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 ariaLabel = isUserSignedIn ? ariaLabelMyMenu : '';
+
     let chipText;
     if (!isUserSignedIn) {
         chipText = fallbackText;
@@ -54,7 +61,13 @@ const AccountChip = props => {
     return (
         <span className={classes.root}>
             <Icon src={AccountIcon} />
-            <span data-cy="AccountChip-text" className={classes.text}>
+            <span
+                aria-label={ariaLabel}
+                aria-atomic="true"
+                aria-live="polite"
+                data-cy="AccountChip-text"
+                className={classes.text}
+            >
                 {chipText}
             </span>
         </span>

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

@@ -46,6 +46,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -91,6 +92,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -136,6 +138,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -183,6 +186,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
@@ -190,6 +194,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -206,6 +211,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
                 className="content"
               >
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"
@@ -315,6 +321,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -360,6 +367,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -405,6 +413,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -452,6 +461,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
@@ -459,6 +469,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -475,6 +486,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
                 className="content"
               >
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"
@@ -542,6 +554,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
@@ -549,6 +562,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -565,6 +579,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
                 className="content"
               >
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"

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

@@ -63,6 +63,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -116,6 +117,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -161,6 +163,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -214,6 +217,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -267,6 +271,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -312,6 +317,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -375,6 +381,7 @@ exports[`Edit Mode renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -505,6 +512,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -558,6 +566,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -603,6 +612,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -656,6 +666,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -709,6 +720,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -754,6 +766,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -817,6 +830,7 @@ exports[`Edit Mode renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -942,6 +956,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -995,6 +1010,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1040,6 +1056,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1093,6 +1110,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1146,6 +1164,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1191,6 +1210,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1254,6 +1274,7 @@ exports[`renders correctly 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1384,6 +1405,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1437,6 +1459,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1482,6 +1505,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1535,6 +1559,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1588,6 +1613,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1633,6 +1659,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -1696,6 +1723,7 @@ exports[`renders correctly with errors 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>

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

@@ -19,7 +19,9 @@ jest.mock('../../Navigation', () => 'Navigation');
 jest.mock('../../Routes', () => 'Routes');
 jest.mock('../../ToastContainer', () => 'ToastContainer');
 jest.mock('@magento/peregrine/lib/hooks/useDelayedTransition', () => {
-    return jest.fn();
+    return {
+        useDelayedTransition: jest.fn()
+    };
 });
 
 const mockAddToast = jest.fn();

package/lib/components/App/app.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 import { array, func, shape, string } from 'prop-types';
 
 import { useToasts } from '@magento/peregrine';
-import useDelayedTransition from '@magento/peregrine/lib/hooks/useDelayedTransition';
+import { useDelayedTransition } from '@magento/peregrine/lib/hooks/useDelayedTransition';
 import { useApp } from '@magento/peregrine/lib/talons/App/useApp';
 
 import globalCSS from '../../index.module.css';

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

@@ -54,6 +54,7 @@ exports[`it renders correctly when it has cards 1`] = `
                 className="before"
               />
               <span
+                aria-hidden="false"
                 className="after"
               />
             </span>
@@ -295,6 +296,7 @@ exports[`it renders correctly with no cards 1`] = `
                 className="before"
               />
               <span
+                aria-hidden="false"
                 className="after"
               />
             </span>

package/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap

@@ -66,7 +66,9 @@ exports[`disables submit button on coupon entry 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p>
       
@@ -133,7 +135,9 @@ exports[`renders CouponCode input and submit button 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p>
       
@@ -199,7 +203,9 @@ exports[`renders an error message if an error occurs on code entry 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p>
       A wild GQL error appeared!

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingForm.spec.js.snap

@@ -60,6 +60,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -122,6 +123,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -163,6 +165,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -273,6 +276,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -335,6 +339,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -376,6 +381,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -486,6 +492,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -573,6 +580,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -635,6 +643,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -745,6 +754,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -832,6 +842,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -894,6 +905,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -981,6 +993,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -1068,6 +1081,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <span
@@ -1130,6 +1144,7 @@ Array [
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap

@@ -80,7 +80,6 @@ exports[`renders PriceSummary correctly on cart page 1`] = `
       className="root_highPriority"
       disabled={false}
       onDragStart={[Function]}
-      onKeyDown={[Function]}
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
@@ -278,7 +277,6 @@ exports[`renders summary with loading state if query is loading 1`] = `
       className="root_highPriority"
       disabled={true}
       onDragStart={[Function]}
-      onKeyDown={[Function]}
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}