@magento/venia-ui 9.5.0-alpha.2 → 9.6.0-beta.1

package/i18n/en_US.json

@@ -403,6 +403,7 @@
     "shippingForm.getShippingOptions": "Get Shipping Options",
     "shippingForm.loading": "Loading Methods...",
     "shippingForm.zip": "ZIP",
+    "shippingForm.shippingEmail":"Shipping Email",
     "shippingInformation.cardTitle": "Shipping Information",
     "shippingInformation.editTitle": "1. Shipping Information",
     "shippingInformation.loading": "Fetching Shipping Information...",

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

@@ -152,6 +152,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           Password
         </label>
@@ -420,6 +421,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           Current Password
         </label>
@@ -510,6 +512,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           New Password
         </label>

package/lib/components/CartPage/ProductListing/__tests__/__snapshots__/product.spec.js.snap

@@ -260,14 +260,28 @@ exports[`renders configurable product with options 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
           className="menuItem"
         >
           <button
+            aria-label="Edit item"
             className="button"
-            onMouseDown={[MockFunction]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            type="button"
           >
             <span
               className="root"
@@ -300,8 +314,21 @@ exports[`renders configurable product with options 1`] = `
           className="menuItem"
         >
           <button
+            aria-label="Remove from cart"
             className="button"
-            onMouseDown={[MockFunction]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            type="button"
           >
             <span
               className="root"
@@ -593,14 +620,28 @@ exports[`renders out of stock product 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
           className="menuItem"
         >
           <button
+            aria-label="Remove from cart"
             className="button"
-            onMouseDown={[MockFunction]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            type="button"
           >
             <span
               className="root"
@@ -892,14 +933,28 @@ exports[`renders simple product correctly 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
           className="menuItem"
         >
           <button
+            aria-label="Remove from cart"
             className="button"
-            onMouseDown={[MockFunction]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            type="button"
           >
             <span
               className="root"

package/lib/components/CategoryTree/categoryBranch.js

@@ -6,7 +6,7 @@ import { useStyle } from '../../classify';
 import defaultClasses from './categoryBranch.module.css';
 
 const Branch = props => {
-    const { category, setCategoryId } = props;
+    const { category, setCategoryId, tabindex } = props;
     const { name } = category;
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -20,6 +20,7 @@ const Branch = props => {
     return (
         <li className={classes.root}>
             <button
+                tabindex={tabindex}
                 className={classes.target}
                 data-cy="CategoryTree-Branch-target"
                 type="button"
@@ -44,5 +45,6 @@ Branch.propTypes = {
         target: string,
         text: string
     }),
-    setCategoryId: func.isRequired
+    setCategoryId: func.isRequired,
+    tabindex: func.isRequired
 };

package/lib/components/CategoryTree/categoryLeaf.js

@@ -9,7 +9,7 @@ import { useStyle } from '../../classify';
 import defaultClasses from './categoryLeaf.module.css';
 
 const Leaf = props => {
-    const { category, onNavigate, categoryUrlSuffix } = props;
+    const { category, onNavigate, categoryUrlSuffix, tabindex } = props;
     const { name, url_path, children } = category;
     const classes = useStyle(defaultClasses, props.classes);
     const { handleClick } = useCategoryLeaf({ onNavigate });
@@ -35,6 +35,7 @@ const Leaf = props => {
                 data-cy="CategoryTree-Leaf-target"
                 to={destination}
                 onClick={handleClick}
+                tabIndex={tabindex}
             >
                 <span className={classes.text}>{leafLabel}</span>
             </Link>
@@ -55,5 +56,6 @@ Leaf.propTypes = {
         text: string
     }),
     onNavigate: func.isRequired,
+    tabindex: func.isRequired,
     categoryUrlSuffix: string
 };

package/lib/components/CategoryTree/categoryTree.js

@@ -8,7 +8,13 @@ import Leaf from './categoryLeaf';
 import defaultClasses from './categoryTree.module.css';
 
 const Tree = props => {
-    const { categoryId, onNavigate, setCategoryId, updateCategories } = props;
+    const {
+        categoryId,
+        onNavigate,
+        setCategoryId,
+        updateCategories,
+        tabindex
+    } = props;
 
     const talonProps = useCategoryTree({
         categoryId,
@@ -29,12 +35,14 @@ const Tree = props => {
                       category={category}
                       onNavigate={onNavigate}
                       categoryUrlSuffix={categoryUrlSuffix}
+                      tabindex={tabindex}
                   />
               ) : (
                   <Branch
                       key={id}
                       category={category}
                       setCategoryId={setCategoryId}
+                      tabindex={tabindex}
                   />
               );
           })
@@ -57,5 +65,6 @@ Tree.propTypes = {
     }),
     onNavigate: func.isRequired,
     setCategoryId: func.isRequired,
-    updateCategories: func.isRequired
+    updateCategories: func.isRequired,
+    tabindex: func.isRequired
 };

package/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap

@@ -153,6 +153,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>
@@ -475,6 +476,7 @@ exports[`CreateAccount renders errors 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>

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

@@ -36,7 +36,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -91,6 +91,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -136,6 +137,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -160,6 +162,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -188,6 +191,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -241,6 +245,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -286,6 +291,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -310,6 +316,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -341,6 +348,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -386,6 +394,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -477,7 +486,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -532,6 +541,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -577,6 +587,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -601,6 +612,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -629,6 +641,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -682,6 +695,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -727,6 +741,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -751,6 +766,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -782,6 +798,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -827,6 +844,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -914,7 +932,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -961,6 +979,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -1006,6 +1025,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -1030,6 +1050,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -1058,6 +1079,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -1111,6 +1133,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -1156,6 +1179,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -1180,6 +1204,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -1211,6 +1236,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -1256,6 +1282,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -1369,7 +1396,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -1416,6 +1443,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -1461,6 +1489,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -1485,6 +1514,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -1513,6 +1543,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -1566,6 +1597,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -1611,6 +1643,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -1635,6 +1668,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -1666,6 +1700,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -1711,6 +1746,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"

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

@@ -145,7 +145,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="off"
+                            autoComplete={formatMessage({
+                                id: 'shippingForm.shippingEmail',
+                                defaultMessage: 'Shipping Email'
+                            })}
                             field="email"
                             id="email"
                             data-cy="GuestForm-email"
@@ -174,6 +177,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.firstName',
+                                defaultMessage: 'First Name'
+                            })}
                             field="firstname"
                             id="firstname"
                             data-cy="GuestForm-firstName"
@@ -190,6 +197,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.lastName',
+                                defaultMessage: 'Last Name'
+                            })}
                             field="lastname"
                             id="lastname"
                             data-cy="GuestForm-lastName"
@@ -199,6 +210,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.country}>
                     <Country
+                        autoComplete={formatMessage({
+                            id: 'country.label',
+                            defaultMessage: 'Country'
+                        })}
                         validate={isRequired}
                         data-cy="GuestForm-country"
                     />
@@ -212,6 +227,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.streetAddress',
+                                defaultMessage: 'Street Address'
+                            })}
                             field="street[0]"
                             id="street0"
                             data-cy="GuestForm-street0"
@@ -229,6 +248,10 @@ const GuestForm = props => {
                         optional={true}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.streetAddress2',
+                                defaultMessage: 'Street Address 2'
+                            })}
                             field="street[1]"
                             id="street1"
                             data-cy="GuestForm-street1"
@@ -244,6 +267,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.city',
+                                defaultMessage: 'City'
+                            })}
                             field="city"
                             id="city"
                             data-cy="GuestForm-city"
@@ -253,6 +280,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
+                        autoComplete={formatMessage({
+                            id: 'region.label',
+                            defaultMessage: 'State'
+                        })}
                         validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -262,6 +293,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.postcode}>
                     <Postcode
+                        autoComplete={formatMessage({
+                            id: 'postcode.label',
+                            defaultMessage: 'ZIP / Postal Code'
+                        })}
                         validate={isRequired}
                         data-cy="GuestForm-postcode"
                     />
@@ -275,6 +310,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.phoneNumber',
+                                defaultMessage: 'Phone Number'
+                            })}
                             field="telephone"
                             id="telephone"
                             data-cy="GuestForm-telephone"