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

package/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap

@@ -54,6 +54,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
           className="input"
         >
           <input
+            aria-label="Email Required"
             autoComplete="email"
             className="input"
             id="email"
@@ -67,6 +68,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -96,6 +98,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
           className="input"
         >
           <input
+            aria-label="Password Required"
             autoComplete="current-password"
             className="input"
             id="Password"
@@ -110,6 +113,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <i />
@@ -182,6 +186,7 @@ exports[`renders correctly 1`] = `
           className="input"
         >
           <input
+            aria-label="Email Required"
             autoComplete="email"
             className="input"
             id="email"
@@ -195,6 +200,7 @@ exports[`renders correctly 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -224,6 +230,7 @@ exports[`renders correctly 1`] = `
           className="input"
         >
           <input
+            aria-label="Password Required"
             autoComplete="current-password"
             className="input"
             id="Password"
@@ -238,6 +245,7 @@ exports[`renders correctly 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <i />
@@ -310,6 +318,7 @@ exports[`renders prefilled form with initial values 1`] = `
           className="input"
         >
           <input
+            aria-label="Email Required"
             autoComplete="email"
             className="input"
             id="email"
@@ -323,6 +332,7 @@ exports[`renders prefilled form with initial values 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -352,6 +362,7 @@ exports[`renders prefilled form with initial values 1`] = `
           className="input"
         >
           <input
+            aria-label="Password Required"
             autoComplete="current-password"
             className="input"
             id="Password"
@@ -366,6 +377,7 @@ exports[`renders prefilled form with initial values 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         >
           <i />

package/lib/components/SignIn/signIn.js

@@ -36,6 +36,7 @@ const SignIn = props => {
     const {
         errors,
         handleCreateAccount,
+        handleEnterKeyPress,
         handleForgotPassword,
         handleSubmit,
         isBusy,
@@ -77,6 +78,10 @@ const SignIn = props => {
                         field="email"
                         validate={isRequired}
                         data-cy="email"
+                        aria-label={formatMessage({
+                            id: 'global.emailRequired',
+                            defaultMessage: 'Email Required'
+                        })}
                     />
                 </Field>
                 <Password
@@ -91,6 +96,10 @@ const SignIn = props => {
                     autoComplete="current-password"
                     isToggleButtonHidden={false}
                     data-cy="password"
+                    aria-label={formatMessage({
+                        id: 'global.passwordRequired',
+                        defaultMessage: 'Password Required'
+                    })}
                 />
                 <div className={classes.forgotPasswordButtonContainer}>
                     <LinkButton
@@ -123,6 +132,7 @@ const SignIn = props => {
                         type="button"
                         onClick={handleCreateAccount}
                         data-cy="CreateAccount-initiateButton"
+                        onKeyDown={handleEnterKeyPress}
                     >
                         <FormattedMessage
                             id={'signIn.createAccountText'}

package/lib/components/Trigger/__tests__/__snapshots__/trigger.spec.js.snap

@@ -2,7 +2,10 @@
 
 exports[`renders children when supplied 1`] = `
 <button
-  onClick={[MockFunction]}
+  aria-hidden="false"
+  aria-label="Close"
+  onClick={[Function]}
+  onKeyDown={[Function]}
   type="button"
 >
   Unit test child element
@@ -11,7 +14,10 @@ exports[`renders children when supplied 1`] = `
 
 exports[`renders the correct tree 1`] = `
 <button
-  onClick={[MockFunction]}
+  aria-hidden="false"
+  aria-label="Close"
+  onClick={[Function]}
+  onKeyDown={[Function]}
   type="button"
 />
 `;

package/lib/components/Trigger/trigger.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import { func, node, shape, string } from 'prop-types';
-
 import { useStyle } from '../../classify';
 import defaultClasses from './trigger.module.css';
 
@@ -16,21 +16,46 @@ import defaultClasses from './trigger.module.css';
  */
 const Trigger = props => {
     const {
+        addLabel,
         action,
         children,
-        ariaLabel,
         classes: propClasses,
         ...restProps
     } = props;
-
     const classes = useStyle(defaultClasses, propClasses);
 
+    const { formatMessage } = useIntl();
+    const arialabelClear = formatMessage({
+        id: 'global.clearText',
+        defaultMessage: 'Clear Text'
+    });
+
+    const arialabelClose = formatMessage({
+        id: 'global.close',
+        defaultMessage: 'Close'
+    });
+
+    let resultedLabel = addLabel ? arialabelClear : arialabelClose;
+
+    const handleKeypress = () => {
+        action();
+        resultedLabel = '';
+    };
+
+    const changeAction = e => {
+        if (e.keyCode === 13) {
+            action();
+        }
+    };
+
     return (
         <button
             className={classes.root}
             type="button"
-            onClick={action}
-            aria-label={ariaLabel}
+            onClick={handleKeypress}
+            onKeyDown={changeAction}
+            aria-hidden="false"
+            aria-label={resultedLabel}
             {...restProps}
         >
             {children}

package/lib/components/Wishlist/WishlistDialog/CreateWishlistForm/__tests__/__snapshots__/createWishlistForm.spec.js.snap

@@ -42,6 +42,7 @@ exports[`disables save if isSaveDisabled is true 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>
@@ -145,6 +146,7 @@ exports[`renders the correct tree 1`] = `
           className="before"
         />
         <span
+          aria-hidden="false"
           className="after"
         />
       </span>

package/lib/components/WishlistPage/__tests__/__snapshots__/createWishlist.ee.spec.js.snap

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

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistEditFavoritesListDialog.spec.js.snap

@@ -71,6 +71,7 @@ exports[`renders correctly when closed 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -155,6 +156,7 @@ exports[`renders correctly when edit is in progress 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -239,6 +241,7 @@ exports[`renders correctly when opened 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>
@@ -327,6 +330,7 @@ exports[`renders correctly with error 1`] = `
               className="before"
             />
             <span
+              aria-hidden="false"
               className="after"
             />
           </span>

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistItem.spec.js.snap

@@ -17,6 +17,7 @@ exports[`it renders a configurable wishlist item 1`] = `
   >
     <img
       alt="Shoggoth Shirt"
+      aria-hidden="true"
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -133,6 +134,7 @@ exports[`it renders a simple wishlist item 1`] = `
   >
     <img
       alt="Shoggoth Shirt"
+      aria-hidden="true"
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="

package/lib/index.module.css

@@ -18,15 +18,13 @@
     -webkit-font-smoothing: antialiased;
 }
 
-/*
- * Lock the window's scroll position while an overlay is active.
- * Has no effect in iOS Safari.
- * https://bugs.webkit.org/show_bug.cgi?id=153852
- *
- * :global(html[data-scroll-lock='true'] body) {
- *   overflow: hidden;
- * }
- */
+:global(html[data-scroll-lock='true']),
+:global(html[data-scroll-lock='true'] body) {
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}
 
 /* TODO @TW: cannot compose */
 :global(body),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.7.0",
+  "version": "10.0.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.2.2",
-    "@magento/peregrine": "~12.6.0",
+    "@magento/peregrine": "13.0.0-beta.1",
     "@magento/pwa-buildpack": "~11.4.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.33.3",