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

package/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -33,6 +33,7 @@ const PriceSummary = props => {
 
     const {
         handleProceedToCheckout,
+        handleEnterKeyPress,
         hasError,
         hasItems,
         isCheckout,
@@ -90,6 +91,7 @@ const PriceSummary = props => {
                 disabled={isPriceUpdating}
                 priority={'high'}
                 onClick={handleProceedToCheckout}
+                onKeyDown={handleEnterKeyPress}
                 data-cy="PriceSummary-checkoutButton"
             >
                 <FormattedMessage

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

@@ -87,6 +87,7 @@ exports[`renders form errors 1`] = `
                 >
                   <img
                     alt="Juno Sweater"
+                    aria-hidden="true"
                     className="image placeholder"
                     loading="eager"
                     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -269,6 +270,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
                     className="before"
                   />
                   <span
+                    aria-hidden="false"
                     className="after"
                   />
                 </span>
@@ -455,6 +457,7 @@ exports[`renders form with data 1`] = `
                 >
                   <img
                     alt="Juno Sweater"
+                    aria-hidden="true"
                     className="image placeholder"
                     loading="eager"
                     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -637,6 +640,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
                     className="before"
                   />
                   <span
+                    aria-hidden="false"
                     className="after"
                   />
                 </span>

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

@@ -172,6 +172,7 @@ exports[`renders configurable product with options 1`] = `
                 className="before"
               />
               <span
+                aria-hidden="false"
                 className="after"
               />
             </span>
@@ -224,6 +225,7 @@ exports[`renders configurable product with options 1`] = `
     >
       <button
         aria-expanded={false}
+        aria-label="More Options Collapsed"
         className="kebab"
         onClick={[Function]}
       >
@@ -533,6 +535,7 @@ exports[`renders out of stock product 1`] = `
                 className="before"
               />
               <span
+                aria-hidden="false"
                 className="after"
               />
             </span>
@@ -585,6 +588,7 @@ exports[`renders out of stock product 1`] = `
     >
       <button
         aria-expanded={false}
+        aria-label="More Options Collapsed"
         className="kebab"
         onClick={[Function]}
       >
@@ -847,6 +851,7 @@ exports[`renders simple product correctly 1`] = `
                 className="before"
               />
               <span
+                aria-hidden="false"
                 className="after"
               />
             </span>
@@ -899,6 +904,7 @@ exports[`renders simple product correctly 1`] = `
     >
       <button
         aria-expanded={false}
+        aria-label="More Options Collapsed"
         className="kebab"
         onClick={[Function]}
       >

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

@@ -75,6 +75,7 @@ exports[`renders quantity correctly 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       />
     </span>

package/lib/components/CategoryTree/categoryBranch.js

@@ -46,5 +46,5 @@ Branch.propTypes = {
         text: string
     }),
     setCategoryId: func.isRequired,
-    tabIndex: func.isRequired
+    tabIndex: string
 };

package/lib/components/CategoryTree/categoryLeaf.js

@@ -56,6 +56,6 @@ Leaf.propTypes = {
         text: string
     }),
     onNavigate: func.isRequired,
-    tabIndex: func.isRequired,
+    tabIndex: string,
     categoryUrlSuffix: string
 };

package/lib/components/CategoryTree/categoryTree.js

@@ -66,5 +66,5 @@ Tree.propTypes = {
     onNavigate: func.isRequired,
     setCategoryId: func.isRequired,
     updateCategories: func.isRequired,
-    tabIndex: func.isRequired
+    tabIndex: string
 };

package/lib/components/Checkout/__tests__/__snapshots__/addressForm.spec.js.snap

@@ -57,6 +57,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -102,6 +103,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -147,6 +149,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -192,6 +195,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -237,6 +241,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -282,6 +287,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -327,6 +333,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -372,6 +379,7 @@ exports[`renders an AddressForm component 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -491,6 +499,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -536,6 +545,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -581,6 +591,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -626,6 +637,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -671,6 +683,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -716,6 +729,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -761,6 +775,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -806,6 +821,7 @@ exports[`renders validation block with message if address is incorrect 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>

package/lib/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap

@@ -236,6 +236,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -280,6 +281,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -324,6 +326,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -368,6 +371,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -412,6 +416,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -456,6 +461,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -500,6 +506,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>

package/lib/components/Checkout/section.module.css

@@ -5,7 +5,6 @@
     composes: w-full from global;
 
     composes: focus_bg-gradient-radial from global;
-    composes: focus_outline-none from global;
 }
 
 .content {

package/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/itemsReview.spec.js.snap

@@ -18,6 +18,7 @@ exports[`Snapshot test 1`] = `
       >
         <img
           alt="Jillian Top"
+          aria-hidden="true"
           className="undefined undefined"
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -93,6 +94,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
       >
         <img
           alt="Juno Sweater"
+          aria-hidden="true"
           className="undefined undefined"
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -168,6 +170,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
       >
         <img
           alt="Angelina Tank Dress"
+          aria-hidden="true"
           className="undefined undefined"
           loading="eager"
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="

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

@@ -46,6 +46,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="input"
         >
           <input
+            aria-label="First Name Required"
             autoComplete="given-name"
             className="input"
             id="customer.firstname"
@@ -59,6 +60,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -87,6 +89,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="input"
         >
           <input
+            aria-label="Last Name Required"
             autoComplete="family-name"
             className="input"
             id="customer.lastname"
@@ -100,6 +103,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -128,6 +132,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="input"
         >
           <input
+            aria-label="Email Required"
             autoComplete="email"
             className="input"
             id="customer.email"
@@ -141,6 +146,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -170,6 +176,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="input"
         >
           <input
+            aria-label="Password Required"
             autoComplete="new-password"
             className="input"
             id="password"
@@ -184,6 +191,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <button
@@ -191,6 +199,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
             disabled={false}
             onClick={[Function]}
             onDragStart={[Function]}
+            onKey={true}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
             onMouseDown={[Function]}
@@ -207,6 +216,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
               className="content"
             >
               <svg
+                aria-label="View Password"
                 fill="none"
                 height={24}
                 stroke="currentColor"
@@ -369,6 +379,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="input"
         >
           <input
+            aria-label="First Name Required"
             autoComplete="given-name"
             className="input"
             id="customer.firstname"
@@ -382,6 +393,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -410,6 +422,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="input"
         >
           <input
+            aria-label="Last Name Required"
             autoComplete="family-name"
             className="input"
             id="customer.lastname"
@@ -423,6 +436,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -451,6 +465,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="input"
         >
           <input
+            aria-label="Email Required"
             autoComplete="email"
             className="input"
             id="customer.email"
@@ -464,6 +479,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -493,6 +509,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="input"
         >
           <input
+            aria-label="Password Required"
             autoComplete="new-password"
             className="input"
             id="password"
@@ -507,6 +524,7 @@ exports[`CreateAccount renders errors 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <button
@@ -514,6 +532,7 @@ exports[`CreateAccount renders errors 1`] = `
             disabled={false}
             onClick={[Function]}
             onDragStart={[Function]}
+            onKey={true}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
             onMouseDown={[Function]}
@@ -530,6 +549,7 @@ exports[`CreateAccount renders errors 1`] = `
               className="content"
             >
               <svg
+                aria-label="View Password"
                 fill="none"
                 height={24}
                 stroke="currentColor"

package/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -99,6 +99,10 @@ const CreateAccount = props => {
                     <TextInput
                         field="customer.firstname"
                         autoComplete="given-name"
+                        aria-label={formatMessage({
+                            id: 'global.firstNameRequired',
+                            defaultMessage: 'First Name Required'
+                        })}
                         data-cy="OrderConfirmationPage-CreateAccount-firstName"
                         validate={isRequired}
                         validateOnBlur
@@ -113,6 +117,10 @@ const CreateAccount = props => {
                     <TextInput
                         field="customer.lastname"
                         autoComplete="family-name"
+                        aria-label={formatMessage({
+                            id: 'global.lastNameRequired',
+                            defaultMessage: 'Last Name Required'
+                        })}
                         data-cy="OrderConfirmationPage-CreateAccount-lastName"
                         validate={isRequired}
                         validateOnBlur
@@ -127,6 +135,10 @@ const CreateAccount = props => {
                     <TextInput
                         field="customer.email"
                         autoComplete="email"
+                        aria-label={formatMessage({
+                            id: 'global.emailRequired',
+                            defaultMessage: 'Email Required'
+                        })}
                         data-cy="OrderConfirmationPage-CreateAccount-email"
                         validate={isRequired}
                         validateOnBlur
@@ -147,6 +159,10 @@ const CreateAccount = props => {
                         validatePassword
                     ])}
                     validateOnBlur
+                    aria-label={formatMessage({
+                        id: 'global.passwordRequired',
+                        defaultMessage: 'Password Required'
+                    })}
                 />
                 <div className={classes.subscribe}>
                     <Checkbox