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

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

@@ -153,6 +153,10 @@ const GuestForm = props => {
                             id="email"
                             data-cy="GuestForm-email"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.emailRequired',
+                                defaultMessage: 'Email Required'
+                            })}
                             onBlur={() =>
                                 handleValidateEmail(
                                     formApiRef.current.getValue('email')
@@ -185,6 +189,10 @@ const GuestForm = props => {
                             id="firstname"
                             data-cy="GuestForm-firstName"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.firstNameRequired',
+                                defaultMessage: 'First Name Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -205,6 +213,10 @@ const GuestForm = props => {
                             id="lastname"
                             data-cy="GuestForm-lastName"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.lastNameRequired',
+                                defaultMessage: 'Last Name Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -216,6 +228,10 @@ const GuestForm = props => {
                         })}
                         validate={isRequired}
                         data-cy="GuestForm-country"
+                        aria-label={formatMessage({
+                            id: 'global.countryRequired',
+                            defaultMessage: 'Country Required'
+                        })}
                     />
                 </div>
                 <div className={classes.street0}>
@@ -235,6 +251,10 @@ const GuestForm = props => {
                             id="street0"
                             data-cy="GuestForm-street0"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.streetAddressRequired',
+                                defaultMessage: 'Street Address Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -275,6 +295,10 @@ const GuestForm = props => {
                             id="city"
                             data-cy="GuestForm-city"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.cityRequired',
+                                defaultMessage: 'City Required'
+                            })}
                         />
                     </Field>
                 </div>
@@ -289,6 +313,10 @@ const GuestForm = props => {
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
                         data-cy="GuestForm-region"
+                        aria-label={formatMessage({
+                            id: 'global.stateRequired',
+                            defaultMessage: 'State Required'
+                        })}
                     />
                 </div>
                 <div className={classes.postcode}>
@@ -299,6 +327,10 @@ const GuestForm = props => {
                         })}
                         validate={isRequired}
                         data-cy="GuestForm-postcode"
+                        aria-label={formatMessage({
+                            id: 'global.postalCodeRequired',
+                            defaultMessage: 'ZIP / Postal Code Required'
+                        })}
                     />
                 </div>
                 <div className={classes.telephone}>
@@ -318,6 +350,10 @@ const GuestForm = props => {
                             id="telephone"
                             data-cy="GuestForm-telephone"
                             validate={isRequired}
+                            aria-label={formatMessage({
+                                id: 'global.phonenumberRequired',
+                                defaultMessage: 'Phone Number Required'
+                            })}
                         />
                     </Field>
                 </div>

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -231,7 +231,6 @@ exports[`CheckoutPage renders an error and disables review order button if there
       className="review_order_button"
       disabled={true}
       onDragStart={[Function]}
-      onKeyDown={[Function]}
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
@@ -894,6 +893,7 @@ Object {
   "disabled": true,
   "negative": false,
   "onClick": [MockFunction handleReviewOrder],
+  "onKeyDown": undefined,
   "priority": "high",
   "type": "button",
 }

package/lib/components/CheckoutPage/checkoutPage.js

@@ -52,6 +52,7 @@ const CheckoutPage = props => {
         error,
         guestSignInUsername,
         handlePlaceOrder,
+        handlePlaceOrderEnterKeyPress,
         hasError,
         isCartEmpty,
         isGuestCheckout,
@@ -74,6 +75,7 @@ const CheckoutPage = props => {
         shippingMethodRef,
         resetReviewOrderButtonClicked,
         handleReviewOrder,
+        handleReviewOrderEnterKeyPress,
         reviewOrderButtonClicked,
         recaptchaWidgetProps,
         toggleAddressBookContent,
@@ -243,6 +245,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.PAYMENT ? (
                 <Button
                     onClick={handleReviewOrder}
+                    onKeyDown={handleReviewOrderEnterKeyPress}
                     priority="high"
                     className={classes.review_order_button}
                     data-cy="CheckoutPage-reviewOrderButton"
@@ -270,6 +273,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <Button
                     onClick={handlePlaceOrder}
+                    onKeyDown={handlePlaceOrderEnterKeyPress}
                     priority="high"
                     className={classes.place_order_button}
                     data-cy="CheckoutPage-placeOrderButton"

package/lib/components/Country/__tests__/__snapshots__/country.spec.js.snap

@@ -41,6 +41,7 @@ exports[`renders a disabled dropdown while loading 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       >
         <span
@@ -130,6 +131,7 @@ exports[`renders dropdown with country data 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       >
         <span

package/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap

@@ -28,6 +28,7 @@ exports[`renders the correct tree 1`] = `
     >
       <span>
         <input
+          aria-label="First Name Required"
           autoComplete="given-name"
           id="firstName"
           name="customer.firstname"
@@ -37,7 +38,9 @@ exports[`renders the correct tree 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -57,6 +60,7 @@ exports[`renders the correct tree 1`] = `
     >
       <span>
         <input
+          aria-label="Last Name Required"
           autoComplete="family-name"
           id="lastName"
           name="customer.lastname"
@@ -66,7 +70,9 @@ exports[`renders the correct tree 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -86,6 +92,7 @@ exports[`renders the correct tree 1`] = `
     >
       <span>
         <input
+          aria-label="Email Required"
           autoComplete="email"
           id="Email"
           name="customer.email"
@@ -95,7 +102,9 @@ exports[`renders the correct tree 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -115,6 +124,7 @@ exports[`renders the correct tree 1`] = `
     >
       <span>
         <input
+          aria-label="Password Required"
           autoComplete="new-password"
           id="Password"
           name="password"
@@ -125,11 +135,14 @@ exports[`renders the correct tree 1`] = `
         />
       </span>
       <span />
-      <span>
+      <span
+        aria-hidden="false"
+      >
         <button
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
+          onKey={true}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           onMouseDown={[Function]}
@@ -144,6 +157,7 @@ exports[`renders the correct tree 1`] = `
         >
           <span>
             <svg
+              aria-label="View Password"
               fill="none"
               height={24}
               stroke="currentColor"
@@ -215,7 +229,6 @@ exports[`renders the correct tree 1`] = `
       disabled={false}
       onClick={[Function]}
       onDragStart={[Function]}
-      onKeyDown={[Function]}
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
@@ -266,6 +279,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     >
       <span>
         <input
+          aria-label="First Name Required"
           autoComplete="given-name"
           id="firstName"
           name="customer.firstname"
@@ -275,7 +289,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -295,6 +311,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     >
       <span>
         <input
+          aria-label="Last Name Required"
           autoComplete="family-name"
           id="lastName"
           name="customer.lastname"
@@ -304,7 +321,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -324,6 +343,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     >
       <span>
         <input
+          aria-label="Email Required"
           autoComplete="email"
           id="Email"
           name="customer.email"
@@ -333,7 +353,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -353,6 +375,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     >
       <span>
         <input
+          aria-label="Password Required"
           autoComplete="new-password"
           id="Password"
           name="password"
@@ -363,11 +386,14 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
         />
       </span>
       <span />
-      <span>
+      <span
+        aria-hidden="false"
+      >
         <button
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
+          onKey={true}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           onMouseDown={[Function]}
@@ -382,6 +408,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
         >
           <span>
             <svg
+              aria-label="View Password"
               fill="none"
               height={24}
               stroke="currentColor"
@@ -453,7 +480,6 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       disabled={false}
       onClick={[Function]}
       onDragStart={[Function]}
-      onKeyDown={[Function]}
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}

package/lib/components/CreateAccount/createAccount.js

@@ -31,6 +31,7 @@ const CreateAccount = props => {
         errors,
         handleCancel,
         handleSubmit,
+        handleEnterKeyPress,
         isDisabled,
         initialValues,
         recaptchaWidgetProps
@@ -60,6 +61,7 @@ const CreateAccount = props => {
             disabled={isDisabled}
             type="submit"
             priority="high"
+            onKeyDown={handleEnterKeyPress}
             data-cy="CreateAccount-submitButton"
         >
             <FormattedMessage
@@ -99,6 +101,10 @@ const CreateAccount = props => {
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
                     data-cy="customer-firstname"
+                    aria-label={formatMessage({
+                        id: 'global.firstNameRequired',
+                        defaultMessage: 'First Name Required'
+                    })}
                 />
             </Field>
             <Field
@@ -117,6 +123,10 @@ const CreateAccount = props => {
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
                     data-cy="customer-lastname"
+                    aria-label={formatMessage({
+                        id: 'global.lastNameRequired',
+                        defaultMessage: 'Last Name Required'
+                    })}
                 />
             </Field>
             <Field
@@ -135,6 +145,10 @@ const CreateAccount = props => {
                     mask={value => value && value.trim()}
                     maskOnBlur={true}
                     data-cy="customer-email"
+                    aria-label={formatMessage({
+                        id: 'global.emailRequired',
+                        defaultMessage: 'Email Required'
+                    })}
                 />
             </Field>
             <Password
@@ -155,6 +169,10 @@ const CreateAccount = props => {
                 mask={value => value && value.trim()}
                 maskOnBlur={true}
                 data-cy="password"
+                aria-label={formatMessage({
+                    id: 'global.passwordRequired',
+                    defaultMessage: 'Password Required'
+                })}
             />
             <div className={classes.subscribe}>
                 <Checkbox

package/lib/components/Field/fieldIcons.js

@@ -18,7 +18,9 @@ const FieldIcons = props => {
         <span className={classes.root} style={style}>
             <span className={classes.input}>{children}</span>
             <span className={classes.before}>{before}</span>
-            <span className={classes.after}>{after}</span>
+            <span className={classes.after} aria-hidden="false">
+                {after}
+            </span>
         </span>
     );
 };

package/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shape, string, array } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import Button from '../Button';
 import { useStyle } from '../../classify';
 import defaultClasses from './filterModalOpenButton.module.css';
@@ -10,7 +10,12 @@ const FilterModalOpenButton = props => {
     const { filters, classes: propsClasses } = props;
     const classes = useStyle(defaultClasses, propsClasses);
     const { handleOpen } = useFilterModal({ filters });
-
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            handleOpen;
+        }
+    };
+    const { formatMessage } = useIntl();
     return (
         <Button
             priority={'low'}
@@ -19,9 +24,14 @@ const FilterModalOpenButton = props => {
             }}
             data-cy="FilterModalOpenButton-button"
             onClick={handleOpen}
+            onKeyDown={handleKeypress}
             type="button"
             aria-live="polite"
             aria-busy="false"
+            aria-label={formatMessage({
+                id: 'filterModalOpenButton.ariaLabel',
+                defaultMessage: 'Filter Button for Filter Options'
+            })}
         >
             <FormattedMessage
                 id={'productList.filter'}

package/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap

@@ -41,6 +41,7 @@ exports[`renders when busy 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       />
     </span>
@@ -148,6 +149,7 @@ exports[`renders when not busy 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       />
     </span>

package/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -16,6 +16,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       >
         <img
           alt="Test Product 1"
+          aria-hidden="true"
           className="image placeholder_layoutOnly"
           height={375}
           loading="eager"
@@ -110,6 +111,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       >
         <img
           alt="Test Product 2"
+          aria-hidden="true"
           className="image placeholder_layoutOnly"
           height={375}
           loading="eager"

package/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap

@@ -15,6 +15,7 @@ exports[`renders a placeholder item while awaiting item 1`] = `
     >
       <img
         alt="Placeholder for gallery item image"
+        aria-hidden="true"
         className="image placeholder_layoutOnly"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -64,6 +65,7 @@ exports[`renders correctly with valid item data 1`] = `
   className="root"
 >
   <a
+    aria-label="Test Product"
     className="images"
     href="/strive-shoulder-pack.html"
     onClick={[Function]}
@@ -73,6 +75,7 @@ exports[`renders correctly with valid item data 1`] = `
     >
       <img
         alt="Test Product"
+        aria-hidden="true"
         className="image placeholder_layoutOnly"
         height={375}
         loading="eager"

package/lib/components/Gallery/item.js

@@ -85,6 +85,7 @@ const GalleryItem = props => {
     return (
         <div data-cy="GalleryItem-root" className={classes.root} ref={itemRef}>
             <Link
+                aria-label={name}
                 onClick={handleLinkClick}
                 to={productLink}
                 className={classes.images}

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

@@ -7,7 +7,7 @@ Array [
   >
     <button
       aria-expanded={false}
-      aria-label="Toggle My Account Menu"
+      aria-label="Sign In"
       className="trigger"
       onClick={[MockFunction handleTriggerClick]}
     >

package/lib/components/Header/accountTrigger.js

@@ -25,22 +25,29 @@ const AccountTrigger = props => {
         accountMenuRef,
         accountMenuTriggerRef,
         setAccountMenuIsOpen,
-        handleTriggerClick
+        handleTriggerClick,
+        isUserSignedIn
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
     const rootClassName = accountMenuIsOpen ? classes.root_open : classes.root;
     const { formatMessage } = useIntl();
 
+    const ariaLabelMyMenu = formatMessage({
+        id: 'accountTrigger.ariaLabelMyMenu',
+        defaultMessage: 'Toggle My Account Menu'
+    });
+    const ariaLabelSignIn = formatMessage({
+        id: 'accountTrigger.ariaLabelSignIn',
+        defaultMessage: 'Sign In'
+    });
+    const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : ariaLabelSignIn;
     return (
         <Fragment>
             <div className={rootClassName} ref={accountMenuTriggerRef}>
                 <button
+                    aria-label={ariaLabel}
                     aria-expanded={accountMenuIsOpen}
-                    aria-label={formatMessage({
-                        id: 'accountTrigger.ariaLabel',
-                        defaultMessage: 'Toggle My Account Menu'
-                    })}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
                     data-cy="AccountTrigger-trigger"

package/lib/components/Image/placeholderImage.js

@@ -50,6 +50,7 @@ const PlaceholderImage = props => {
     return (
         <SimpleImage
             loading="eager"
+            aria-hidden="true"
             height={height}
             width={width}
             {...rest}

package/lib/components/LegacyMiniCart/__tests__/__snapshots__/kebab.spec.js.snap

@@ -4,6 +4,7 @@ exports[`it renders children passed to it 1`] = `
 <div>
   <button
     aria-expanded={false}
+    aria-label="More Options Collapsed"
     onClick={[Function]}
   >
     <Icon
@@ -33,6 +34,7 @@ exports[`it renders correctly without children 1`] = `
 <div>
   <button
     aria-expanded={false}
+    aria-label="More Options Collapsed"
     onClick={[Function]}
   >
     <Icon

package/lib/components/LegacyMiniCart/__tests__/__snapshots__/miniCart.spec.js.snap

@@ -7,7 +7,10 @@ exports[`renders the correct tree 1`] = `
       Shopping Cart
     </h2>
     <button
+      aria-hidden="false"
+      aria-label="Close"
       onClick={[Function]}
+      onKeyDown={[Function]}
       type="button"
     >
       <span>

package/lib/components/LegacyMiniCart/kebab.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { node, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
 import { MoreVertical as MoreVerticalIcon } from 'react-feather';
 
 import { useStyle } from '../../classify';
@@ -14,6 +15,18 @@ const Kebab = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const toggleClass = isOpen ? classes.dropdown_active : classes.dropdown;
 
+    const { formatMessage } = useIntl();
+    const ariaLabelExpanded = formatMessage({
+        id: 'LegacyMiniCart.buttonExpanded',
+        defaultMessage: 'More Options Expanded'
+    });
+    const ariaLabelCollapsed = formatMessage({
+        id: 'LegacyMiniCart.buttonCollapsed',
+        defaultMessage: 'More Options Collapsed'
+    });
+
+    const result = isOpen ? ariaLabelExpanded : ariaLabelCollapsed;
+
     return (
         <div className={classes.root}>
             <button
@@ -21,6 +34,7 @@ const Kebab = props => {
                 className={classes.kebab}
                 data-cy="Kebab-button"
                 onClick={handleKebabClick}
+                aria-label={result}
                 ref={kebabRef}
             >
                 <Icon src={MoreVerticalIcon} />

package/lib/components/Link/__tests__/link.spec.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { Link as RouterLink } from 'react-router-dom';
-import useLink from '@magento/peregrine/lib/talons/Link/useLink';
+import { useLink } from '@magento/peregrine/lib/talons/Link/useLink';
 import Link from '../link';
 
 jest.mock('@magento/peregrine/lib/talons/Link/useLink', () => {
-    return jest.fn(({ innerRef }) => {
-        return {
-            ref: innerRef
-        };
-    });
+    return {
+        useLink: jest.fn(({ innerRef }) => {
+            return {
+                ref: innerRef
+            };
+        })
+    };
 });
 
 jest.mock('react-router-dom', () => {

package/lib/components/Link/link.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { bool } from 'prop-types';
-import useLink from '@magento/peregrine/lib/talons/Link/useLink';
+import { useLink } from '@magento/peregrine/lib/talons/Link/useLink';
 
 /**
  * @kind functional component