npm - @magento/venia-ui - Versions diffs - 9.7.0 → 10.0.0-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

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

@@ -36,6 +36,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Email Required"
               autoComplete="Shipping Email"
               className="input"
               id="email"
@@ -50,6 +51,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -91,6 +93,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="First Name Required"
               autoComplete="First Name"
               className="input"
               id="firstname"
@@ -104,6 +107,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -137,6 +141,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Last Name Required"
               autoComplete="Last Name"
               className="input"
               id="lastname"
@@ -150,6 +155,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -162,6 +168,7 @@ Array [
       className="country"
     >
       <Country
+        aria-label="Country Required"
         autoComplete="Country"
         validate={[Function]}
       />
@@ -191,6 +198,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Street Address Required"
               autoComplete="Street Address"
               className="input"
               id="street0"
@@ -204,6 +212,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -258,6 +267,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -291,6 +301,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="City Required"
               autoComplete="City"
               className="input"
               id="city"
@@ -304,6 +315,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -316,6 +328,7 @@ Array [
       className="region"
     >
       <Region
+        aria-label="State Required"
         autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
@@ -348,6 +361,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="ZIP / Postal Code Required"
               autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
@@ -361,6 +375,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -394,6 +409,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Phone Number Required"
               autoComplete="Phone Number"
               className="input"
               id="telephone"
@@ -407,6 +423,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -486,6 +503,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Email Required"
               autoComplete="Shipping Email"
               className="input"
               id="email"
@@ -500,6 +518,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -541,6 +560,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="First Name Required"
               autoComplete="First Name"
               className="input"
               id="firstname"
@@ -554,6 +574,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -587,6 +608,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Last Name Required"
               autoComplete="Last Name"
               className="input"
               id="lastname"
@@ -600,6 +622,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -612,6 +635,7 @@ Array [
       className="country"
     >
       <Country
+        aria-label="Country Required"
         autoComplete="Country"
         validate={[Function]}
       />
@@ -641,6 +665,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Street Address Required"
               autoComplete="Street Address"
               className="input"
               id="street0"
@@ -654,6 +679,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -708,6 +734,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -741,6 +768,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="City Required"
               autoComplete="City"
               className="input"
               id="city"
@@ -754,6 +782,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -766,6 +795,7 @@ Array [
       className="region"
     >
       <Region
+        aria-label="State Required"
         autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
@@ -798,6 +828,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="ZIP / Postal Code Required"
               autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
@@ -811,6 +842,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -844,6 +876,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Phone Number Required"
               autoComplete="Phone Number"
               className="input"
               id="telephone"
@@ -857,6 +890,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -932,6 +966,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Email Required"
               autoComplete="Shipping Email"
               className="input"
               id="email"
@@ -946,6 +981,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -979,6 +1015,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="First Name Required"
               autoComplete="First Name"
               className="input"
               id="firstname"
@@ -992,6 +1029,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1025,6 +1063,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Last Name Required"
               autoComplete="Last Name"
               className="input"
               id="lastname"
@@ -1038,6 +1077,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1050,6 +1090,7 @@ Array [
       className="country"
     >
       <Country
+        aria-label="Country Required"
         autoComplete="Country"
         validate={[Function]}
       />
@@ -1079,6 +1120,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Street Address Required"
               autoComplete="Street Address"
               className="input"
               id="street0"
@@ -1092,6 +1134,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1146,6 +1189,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1179,6 +1223,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="City Required"
               autoComplete="City"
               className="input"
               id="city"
@@ -1192,6 +1237,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1204,6 +1250,7 @@ Array [
       className="region"
     >
       <Region
+        aria-label="State Required"
         autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
@@ -1236,6 +1283,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="ZIP / Postal Code Required"
               autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
@@ -1249,6 +1297,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1282,6 +1331,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Phone Number Required"
               autoComplete="Phone Number"
               className="input"
               id="telephone"
@@ -1295,6 +1345,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1396,6 +1447,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Email Required"
               autoComplete="Shipping Email"
               className="input"
               id="email"
@@ -1410,6 +1462,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1443,6 +1496,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="First Name Required"
               autoComplete="First Name"
               className="input"
               id="firstname"
@@ -1456,6 +1510,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1489,6 +1544,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Last Name Required"
               autoComplete="Last Name"
               className="input"
               id="lastname"
@@ -1502,6 +1558,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1514,6 +1571,7 @@ Array [
       className="country"
     >
       <Country
+        aria-label="Country Required"
         autoComplete="Country"
         validate={[Function]}
       />
@@ -1543,6 +1601,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Street Address Required"
               autoComplete="Street Address"
               className="input"
               id="street0"
@@ -1556,6 +1615,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1610,6 +1670,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1643,6 +1704,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="City Required"
               autoComplete="City"
               className="input"
               id="city"
@@ -1656,6 +1718,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1668,6 +1731,7 @@ Array [
       className="region"
     >
       <Region
+        aria-label="State Required"
         autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
@@ -1700,6 +1764,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="ZIP / Postal Code Required"
               autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
@@ -1713,6 +1778,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -1746,6 +1812,7 @@ Array [
             className="input"
           >
             <input
+              aria-label="Phone Number Required"
               autoComplete="Phone Number"
               className="input"
               id="telephone"
@@ -1759,6 +1826,7 @@ Array [
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>

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

@@ -159,6 +159,10 @@ const CustomerForm = props => {
                             id="customer_firstname"
                             data-cy="CustomerForm-firstName"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.firstNameRequired',
+                                defaultMessage: 'First Name Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -176,6 +180,10 @@ const CustomerForm = props => {
                             id="customer_lastname"
                             data-cy="CustomerForm-lastName"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.lastNameRequired',
+                                defaultMessage: 'Last Name Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -183,6 +191,10 @@ const CustomerForm = props => {
                     <Country
                         validate={isRequired}
                         data-cy="CustomerForm-country"
+                        aria-label={formatMessage({
+                            id: 'global.countryRequired',
+                            defaultMessage: 'Country Required'
+                        })}
                     />
                 </div>
                 <div className={classes.street0}>
@@ -198,6 +210,10 @@ const CustomerForm = props => {
                             validate={isRequired}
                             id="customer_street0"
                             data-cy="CustomerForm-street0"
+                            aria-label={formatMessage({
+                                id: 'global.streetAddressRequired',
+                                defaultMessage: 'Street Address Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -224,12 +240,20 @@ const CustomerForm = props => {
                             id: 'global.city',
                             defaultMessage: 'City'
                         })}
+                        aria-label={formatMessage({
+                            id: 'global.countryRequired',
+                            defaultMessage: 'Country Required'
+                        })}
                     >
                         <TextInput
                             field="city"
                             validate={isRequired}
                             id="customer_city"
                             data-cy="CustomerForm-city"
+                            aria-label={formatMessage({
+                                id: 'global.cityRequired',
+                                defaultMessage: 'City Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -240,12 +264,20 @@ const CustomerForm = props => {
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
+                        aria-label={formatMessage({
+                            id: 'global.stateRequired',
+                            defaultMessage: 'State Required'
+                        })}
                     />
                 </div>
                 <div className={classes.postcode}>
                     <Postcode
                         validate={isRequired}
                         data-cy="CustomerForm-postcode"
+                        aria-label={formatMessage({
+                            id: 'global.postalCodeRequired',
+                            defaultMessage: 'ZIP / Postal Code Required'
+                        })}
                     />
                 </div>
                 <div className={classes.telephone}>
@@ -261,6 +293,10 @@ const CustomerForm = props => {
                             validate={isRequired}
                             id="customer_telephone"
                             data-cy="CustomerForm-telephone"
+                            aria-label={formatMessage({
+                                id: 'global.phonenumberRequired',
+                                defaultMessage: 'Phone Number Required'
+                            })}
                         />
                     </Field>
                 </div>