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

package/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap

@@ -13,6 +13,7 @@ exports[`Should disable delete icon while loading 1`] = `
     >
       <img
         alt="P1"
+        aria-hidden="true"
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -113,6 +114,7 @@ exports[`Should disable delete icon while loading 1`] = `
     
   </span>
   <button
+    aria-label="Item Deleted"
     className="deleteButton"
     disabled={true}
     onClick={[Function]}
@@ -170,6 +172,7 @@ exports[`Should render correctly 1`] = `
     >
       <img
         alt="P1"
+        aria-hidden="true"
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -270,6 +273,7 @@ exports[`Should render correctly 1`] = `
     
   </span>
   <button
+    aria-label="Delete"
     className="deleteButton"
     disabled={false}
     onClick={[Function]}
@@ -327,6 +331,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
     >
       <img
         alt="P1"
+        aria-hidden="true"
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -427,6 +432,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
     
   </span>
   <button
+    aria-label="Delete"
     className="deleteButton"
     disabled={false}
     onClick={[Function]}
@@ -484,6 +490,7 @@ exports[`Should render correctly with out of stock product 1`] = `
     >
       <img
         alt="P1"
+        aria-hidden="true"
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -584,6 +591,7 @@ exports[`Should render correctly with out of stock product 1`] = `
     Out-of-stock
   </span>
   <button
+    aria-label="Delete"
     className="deleteButton"
     disabled={false}
     onClick={[Function]}

package/lib/components/MiniCart/ProductList/item.js

@@ -52,6 +52,16 @@ const Item = props => {
     const rootClass = isDeleting ? classes.root_disabled : classes.root;
     const configured_variant = configuredVariant(configurable_options, product);
 
+    const minicartButtonDeleted = formatMessage({
+        id: 'global.deletedButton',
+        defaultMessage: 'Item Deleted'
+    });
+    const miniCartButton = formatMessage({
+        id: 'global.deleteButton',
+        defaultMessage: 'Delete'
+    });
+    const buttonStatus = isDeleting ? minicartButtonDeleted : miniCartButton;
+
     return (
         <div className={rootClass} data-cy="MiniCart-Item-root">
             <Link
@@ -113,6 +123,7 @@ const Item = props => {
                 className={classes.deleteButton}
                 disabled={isDeleting}
                 data-cy="MiniCart-Item-deleteButton"
+                aria-label={buttonStatus}
             >
                 <Icon
                     size={16}

package/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap

@@ -71,7 +71,9 @@ exports[`should render formErrors 1`] = `
             />
           </span>
           <span />
-          <span />
+          <span
+            aria-hidden="false"
+          />
         </span>
         <p />
       </div>
@@ -100,11 +102,14 @@ exports[`should render formErrors 1`] = `
             />
           </span>
           <span />
-          <span>
+          <span
+            aria-hidden="false"
+          >
             <button
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -119,6 +124,7 @@ exports[`should render formErrors 1`] = `
             >
               <span>
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"
@@ -222,7 +228,9 @@ exports[`should render properly 1`] = `
             />
           </span>
           <span />
-          <span />
+          <span
+            aria-hidden="false"
+          />
         </span>
         <p />
       </div>
@@ -251,11 +259,14 @@ exports[`should render properly 1`] = `
             />
           </span>
           <span />
-          <span>
+          <span
+            aria-hidden="false"
+          >
             <button
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -270,6 +281,7 @@ exports[`should render properly 1`] = `
             >
               <span>
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"

package/lib/components/Newsletter/__tests__/__snapshots__/newsletter.spec.js.snap

@@ -69,6 +69,7 @@ exports[`#Newsletter display renders correctly 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -155,6 +156,7 @@ exports[`#Newsletter submit displays an error message if the email already subsc
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>

package/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap

@@ -11,6 +11,7 @@ exports[`should render properly 1`] = `
     >
       <img
         alt="Product 1"
+        aria-hidden="true"
         className="undefined undefined"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap

@@ -90,6 +90,7 @@ exports[`renders correctly with data 1`] = `
             </span>
           </span>
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -97,6 +98,7 @@ exports[`renders correctly with data 1`] = `
           className="root"
         />
         <button
+          aria-label="submit"
           className="searchButton"
           disabled={false}
           onClick={[Function]}
@@ -280,6 +282,7 @@ exports[`renders correctly without data 1`] = `
             </span>
           </span>
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -287,6 +290,7 @@ exports[`renders correctly without data 1`] = `
           className="root"
         />
         <button
+          aria-label="submit"
           className="searchButton"
           disabled={false}
           onClick={[Function]}
@@ -457,11 +461,15 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
             </span>
           </span>
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
+              aria-hidden="false"
+              aria-label="Clear Text"
               className="root"
               onClick={[Function]}
+              onKeyDown={[Function]}
               type="button"
             >
               <span
@@ -500,6 +508,7 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
           className="root"
         />
         <button
+          aria-label="submit"
           className="searchButton"
           disabled={false}
           onClick={[Function]}
@@ -645,6 +654,7 @@ exports[`renders loading indicator 1`] = `
             </span>
           </span>
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -652,6 +662,7 @@ exports[`renders loading indicator 1`] = `
           className="root"
         />
         <button
+          aria-label="submit"
           className="searchButton"
           disabled={true}
           onClick={[Function]}
@@ -856,6 +867,7 @@ exports[`renders no orders message is orders is empty 1`] = `
             </span>
           </span>
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -863,6 +875,7 @@ exports[`renders no orders message is orders is empty 1`] = `
           className="root"
         />
         <button
+          aria-label="submit"
           className="searchButton"
           disabled={false}
           onClick={[Function]}

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap

@@ -127,6 +127,7 @@ exports[`it does not render order details if loading is true 1`] = `
     />
   </div>
   <button
+    aria-expanded={false}
     className="contentToggleContainer"
     onClick={[MockFunction handleContentToggle]}
     type="button"
@@ -285,6 +286,7 @@ exports[`it renders collapsed order row 1`] = `
     />
   </div>
   <button
+    aria-expanded={false}
     className="contentToggleContainer"
     onClick={[MockFunction handleContentToggle]}
     type="button"
@@ -571,6 +573,7 @@ exports[`it renders open order row 1`] = `
     />
   </div>
   <button
+    aria-expanded={true}
     className="contentToggleContainer"
     onClick={[MockFunction handleContentToggle]}
     type="button"
@@ -867,6 +870,7 @@ exports[`it renders with missing order information 1`] = `
     />
   </div>
   <button
+    aria-expanded={false}
     className="contentToggleContainer"
     onClick={[MockFunction]}
     type="button"

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/resetButton.spec.js.snap

@@ -2,7 +2,10 @@
 
 exports[`renders reset trigger 1`] = `
 <button
+  aria-hidden="false"
+  aria-label="Clear Text"
   onClick={[Function]}
+  onKeyDown={[Function]}
   type="button"
 >
   <span>

package/lib/components/OrderHistoryPage/collapsedImageGallery.js

@@ -19,13 +19,13 @@ const CollapsedImageGallery = props => {
             const baseImageElements = Object.values(items)
                 .slice(0, DISPLAY_COUNT)
                 .map((item, index) => {
-                    const { thumbnail } = item;
-                    const { label, url } = thumbnail;
+                    const { thumbnail, name } = item;
+                    const { url } = thumbnail;
 
                     return (
                         <Image
                             key={Object.keys(items)[index]}
-                            alt={label}
+                            alt={name}
                             src={url}
                             width={48}
                         />

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -180,6 +180,7 @@ const OrderHistoryPage = props => {
                             }
                             priority={'high'}
                             type="submit"
+                            aria-label="submit"
                         >
                             {submitIcon}
                         </Button>

package/lib/components/OrderHistoryPage/orderRow.js

@@ -131,6 +131,7 @@ const OrderRow = props => {
                 className={classes.contentToggleContainer}
                 onClick={handleContentToggle}
                 type="button"
+                aria-expanded={isOpen}
             >
                 {contentToggleIcon}
             </button>

package/lib/components/OrderHistoryPage/resetButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useFormApi } from 'informed';
+import { useIntl } from 'react-intl';
 import { func } from 'prop-types';
 import { X as ClearIcon } from 'react-feather';
 
@@ -19,8 +20,18 @@ const ResetButton = props => {
             onReset();
         }
     };
-
-    return <Trigger action={handleReset}>{clearIcon}</Trigger>;
+    const { formatMessage } = useIntl();
+    return (
+        <Trigger
+            action={handleReset}
+            addLabel={formatMessage({
+                id: 'global.clearText',
+                defaultMessage: 'Clear Text'
+            })}
+        >
+            {clearIcon}
+        </Trigger>
+    );
 };
 
 export default ResetButton;

package/lib/components/PageLoadingIndicator/__tests__/pageLoadingIndicator.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import usePageLoadingIndicator from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
+import { usePageLoadingIndicator } from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
 import PageLoadingIndicator from '../pageLoadingIndicator';
 
 jest.mock(

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shape, string, bool } from 'prop-types';
 import { useStyle } from '../../classify';
 import defaultClasses from './pageLoadingIndicator.module.css';
-import usePageLoadingIndicator from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
+import { usePageLoadingIndicator } from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
 
 const PageLoadingIndicator = props => {
     const classes = useStyle(defaultClasses, props.classes);

package/lib/components/Password/__tests__/__snapshots__/password.spec.js.snap

@@ -32,7 +32,9 @@ exports[`should render properly 1`] = `
         />
       </span>
       <span />
-      <span />
+      <span
+        aria-hidden="false"
+      />
     </span>
     <p />
   </div>
@@ -71,11 +73,14 @@ exports[`should render show button if visible is false 1`] = `
         />
       </span>
       <span />
-      <span>
+      <span
+        aria-hidden="false"
+      >
         <button
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
+          onKey={true}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           onMouseDown={[Function]}
@@ -90,6 +95,7 @@ exports[`should render show button if visible is false 1`] = `
         >
           <span>
             <svg
+              aria-label="Hide Password"
               fill="none"
               height={24}
               stroke="currentColor"
@@ -150,11 +156,14 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
         />
       </span>
       <span />
-      <span>
+      <span
+        aria-hidden="false"
+      >
         <button
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
+          onKey={true}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           onMouseDown={[Function]}
@@ -169,6 +178,7 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
         >
           <span>
             <svg
+              aria-label="View Password"
               fill="none"
               height={24}
               stroke="currentColor"

package/lib/components/Password/password.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { string, bool, shape, func } from 'prop-types';
 import { Eye, EyeOff } from 'react-feather';
-
+import { useIntl } from 'react-intl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import { usePassword } from '@magento/peregrine/lib/talons/Password/usePassword';
 
@@ -27,13 +27,35 @@ const Password = props => {
     const { handleBlur, togglePasswordVisibility, visible } = talonProps;
     const classes = useStyle(defaultClasses, propClasses);
 
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            togglePasswordVisibility;
+        }
+    };
+    const { formatMessage } = useIntl();
+    const hidePassword = formatMessage({
+        id: 'password.hide',
+        defaultMessage: 'Hide Password'
+    });
+    const viewPassword = formatMessage({
+        id: 'password.view',
+        defaultMessage: 'View Password'
+    });
+    const speak = visible ? hidePassword : viewPassword;
+
     const passwordButton = (
         <Button
             className={classes.passwordButton}
             onClick={togglePasswordVisibility}
+            onKeyDown={handleKeypress}
+            onKey
             type="button"
         >
-            {visible ? <Eye /> : <EyeOff />}
+            {visible ? (
+                <Eye aria-label={speak} />
+            ) : (
+                <EyeOff aria-label={speak} />
+            )}
         </Button>
     );
 

package/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap

@@ -50,6 +50,7 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
     >
       <img
         alt="image-product"
+        aria-hidden="true"
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -160,6 +161,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
     >
       <img
         alt="test-thumbnail1"
+        aria-hidden="true"
         className="image placeholder"
         loading="eager"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -238,17 +240,17 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
   <div
     className="thumbnailList"
   >
-    <span
-      aria-hidden="true"
+    <button
+      aria-label="Current Image"
       className="rootSelected"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
       >
         <img
           alt="test-thumbnail1"
+          aria-hidden="true"
           className="image placeholder"
           height={170}
           loading="eager"
@@ -287,18 +289,18 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
-    <span
-      aria-hidden="true"
+    </button>
+    <button
+      aria-label="Next Image"
       className="root"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
       >
         <img
           alt="test-thumbnail2"
+          aria-hidden="true"
           className="image placeholder"
           height={170}
           loading="eager"
@@ -337,18 +339,18 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
-    <span
-      aria-hidden="true"
+    </button>
+    <button
+      aria-label="Next Image"
       className="root"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
       >
         <img
           alt="test-thumbnail3"
+          aria-hidden="true"
           className="image placeholder"
           height={170}
           loading="eager"
@@ -387,18 +389,18 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
-    <span
-      aria-hidden="true"
+    </button>
+    <button
+      aria-label="Next Image"
       className="root"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
       >
         <img
           alt="test-thumbnail4"
+          aria-hidden="true"
           className="image placeholder"
           height={170}
           loading="eager"
@@ -437,7 +439,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
+    </button>
   </div>
 </div>
 `;