@magento/venia-ui 9.5.0-alpha.2 → 9.6.0-beta.1

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

@@ -13,7 +13,9 @@ exports[`renders the correct tree 1`] = `
     />
   </h2>
   <div>
-    <label>
+    <label
+      htmlFor="firstName"
+    >
       First Name
     </label>
     <span
@@ -27,7 +29,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="given-name"
-          id="customer.firstname"
+          id="firstName"
           name="customer.firstname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -40,7 +42,9 @@ exports[`renders the correct tree 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="lastName"
+    >
       Last Name
     </label>
     <span
@@ -54,7 +58,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="family-name"
-          id="customer.lastname"
+          id="lastName"
           name="customer.lastname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -67,7 +71,9 @@ exports[`renders the correct tree 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Email"
+    >
       Email
     </label>
     <span
@@ -81,7 +87,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="email"
-          id="customer.email"
+          id="Email"
           name="customer.email"
           onBlur={[Function]}
           onChange={[Function]}
@@ -94,7 +100,9 @@ exports[`renders the correct tree 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -108,7 +116,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="new-password"
-          id="password"
+          id="Password"
           name="password"
           onBlur={[Function]}
           onChange={[Function]}
@@ -243,7 +251,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     />
   </h2>
   <div>
-    <label>
+    <label
+      htmlFor="firstName"
+    >
       First Name
     </label>
     <span
@@ -257,7 +267,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="given-name"
-          id="customer.firstname"
+          id="firstName"
           name="customer.firstname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -270,7 +280,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="lastName"
+    >
       Last Name
     </label>
     <span
@@ -284,7 +296,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="family-name"
-          id="customer.lastname"
+          id="lastName"
           name="customer.lastname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -297,7 +309,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Email"
+    >
       Email
     </label>
     <span
@@ -311,7 +325,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="email"
-          id="customer.email"
+          id="Email"
           name="customer.email"
           onBlur={[Function]}
           onChange={[Function]}
@@ -324,7 +338,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -338,7 +354,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="new-password"
-          id="password"
+          id="Password"
           name="password"
           onBlur={[Function]}
           onChange={[Function]}

package/lib/components/CreateAccount/createAccount.js

@@ -84,12 +84,14 @@ const CreateAccount = props => {
             </h2>
             <FormError errors={Array.from(errors.values())} />
             <Field
+                id="firstName"
                 label={formatMessage({
                     id: 'createAccount.firstNameText',
                     defaultMessage: 'First Name'
                 })}
             >
                 <TextInput
+                    id="firstName"
                     field="customer.firstname"
                     autoComplete="given-name"
                     validate={isRequired}
@@ -100,12 +102,14 @@ const CreateAccount = props => {
                 />
             </Field>
             <Field
+                id="lastName"
                 label={formatMessage({
                     id: 'createAccount.lastNameText',
                     defaultMessage: 'Last Name'
                 })}
             >
                 <TextInput
+                    id="lastName"
                     field="customer.lastname"
                     autoComplete="family-name"
                     validate={isRequired}
@@ -116,12 +120,14 @@ const CreateAccount = props => {
                 />
             </Field>
             <Field
+                id="Email"
                 label={formatMessage({
                     id: 'createAccount.emailText',
                     defaultMessage: 'Email'
                 })}
             >
                 <TextInput
+                    id="Email"
                     field="customer.email"
                     autoComplete="email"
                     validate={isRequired}
@@ -132,6 +138,7 @@ const CreateAccount = props => {
                 />
             </Field>
             <Password
+                id="Password"
                 autoComplete="new-password"
                 fieldName="password"
                 isToggleButtonHidden={false}

package/lib/components/HomePage/homePage.module.css

@@ -405,7 +405,6 @@
 
 :global(.venia-home-products .slick-slider .slick-dots li > button) {
     background-clip: content-box !important;
-    background-color: hsl(205 004% 088%) !important;
     border-color: transparent;
     border-radius: 0;
     border-style: solid;

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

@@ -18,7 +18,9 @@ exports[`it renders children passed to it 1`] = `
       }
     />
   </button>
-  <ul>
+  <ul
+    aria-hidden="true"
+  >
     <span />
     <p />
     <div />
@@ -44,6 +46,8 @@ exports[`it renders correctly without children 1`] = `
       }
     />
   </button>
-  <ul />
+  <ul
+    aria-hidden="true"
+  />
 </div>
 `;

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

@@ -2,7 +2,22 @@
 
 exports[`it does not render an icon when not passed one 1`] = `
 <li>
-  <button>
+  <button
+    aria-label="Unit Test Text"
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    type="button"
+  >
     <Icon
       classes={
         Object {
@@ -20,7 +35,22 @@ exports[`it does not render an icon when not passed one 1`] = `
 
 exports[`it does not render an icon when passed an invalid one 1`] = `
 <li>
-  <button>
+  <button
+    aria-label="Unit Test Text"
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    type="button"
+  >
     <Icon
       classes={
         Object {
@@ -38,7 +68,22 @@ exports[`it does not render an icon when passed an invalid one 1`] = `
 
 exports[`it fills the icon when isFilled is true 1`] = `
 <li>
-  <button>
+  <button
+    aria-label="Unit Test Text"
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    type="button"
+  >
     <Icon
       classes={
         Object {
@@ -66,7 +111,22 @@ exports[`it fills the icon when isFilled is true 1`] = `
 
 exports[`it renders an icon when passed a valid one 1`] = `
 <li>
-  <button>
+  <button
+    aria-label="Unit Test Text"
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    type="button"
+  >
     <Icon
       classes={
         Object {

package/lib/components/LegacyMiniCart/kebab.js

@@ -24,7 +24,9 @@ const Kebab = props => {
             >
                 <Icon src={MoreVerticalIcon} />
             </button>
-            <ul className={toggleClass}>{children}</ul>
+            <ul aria-hidden="true" className={toggleClass}>
+                {children}
+            </ul>
         </div>
     );
 };

package/lib/components/LegacyMiniCart/kebab.module.css

@@ -20,11 +20,12 @@
     transition: 256ms ease-out;
     transform: scale(0);
     transform-origin: 100% 0;
+    display: none !important;
 }
 
 .dropdown_active {
     composes: dropdown;
-
+    display: block !important;
     composes: absolute from global;
     transform: scale(1);
     transition: 250ms var(--venia-global-anim-bounce);

package/lib/components/LegacyMiniCart/section.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { bool, func, oneOf, shape, string } from 'prop-types';
 import {
     Edit2 as Edit2Icon,
@@ -10,6 +10,7 @@ import { useStyle } from '../../classify';
 import Icon from '../Icon';
 
 import defaultClasses from './section.module.css';
+import { useButton } from 'react-aria';
 
 const icons = new Map()
     .set('Heart', HeartIcon)
@@ -30,6 +31,13 @@ const Section = props => {
     const iconClasses = { root: classes.icon };
     const iconSrc = icons.get(icon);
 
+    const buttonRef = useRef();
+
+    const { buttonProps: buttonAriaProps } = useButton(
+        { type: 'button', onPress: onClick, 'aria-label': text },
+        buttonRef
+    );
+
     if (isFilled) {
         iconClasses.root = classes.icon_filled;
     }
@@ -37,8 +45,9 @@ const Section = props => {
     return (
         <li className={classes.menuItem} {...restProps}>
             <button
+                ref={buttonRef}
                 className={classes.button}
-                onMouseDown={onClick}
+                {...buttonAriaProps}
                 data-cy="LegacyMiniCart-Section-button"
             >
                 <Icon classes={iconClasses} size={16} src={iconSrc} />

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

@@ -76,7 +76,9 @@ exports[`should render formErrors 1`] = `
         <p />
       </div>
       <div>
-        <label>
+        <label
+          htmlFor="Password"
+        >
           New Password
         </label>
         <span
@@ -225,7 +227,9 @@ exports[`should render properly 1`] = `
         <p />
       </div>
       <div>
-        <label>
+        <label
+          htmlFor="Password"
+        >
           New Password
         </label>
         <span

package/lib/components/Navigation/__tests__/navigation.spec.js

@@ -21,6 +21,17 @@ jest.mock('../../Header/currencySwitcher', () => () => 'CurrencySwitcher');
 
 jest.mock('@magento/peregrine/lib/talons/Navigation/useNavigation');
 
+jest.mock('react-aria', () => ({
+    FocusScope: jest.fn(({ children }) => {
+        return children;
+    })
+}));
+
+jest.mock('../../Portal', () => ({
+    Portal: jest.fn(({ children }) => {
+        return children;
+    })
+}));
 /*
  * Tests.
  */

package/lib/components/Navigation/navigation.js

@@ -10,7 +10,8 @@ import StoreSwitcher from '../Header/storeSwitcher';
 import LoadingIndicator from '../LoadingIndicator';
 import NavHeader from './navHeader';
 import defaultClasses from './navigation.module.css';
-
+import { FocusScope } from 'react-aria';
+import { Portal } from '../Portal';
 const AuthModal = React.lazy(() => import('../AuthModal'));
 
 const Navigation = props => {
@@ -35,6 +36,7 @@ const Navigation = props => {
     const rootClassName = isOpen ? classes.root_open : classes.root;
     const modalClassName = hasModal ? classes.modal_open : classes.modal;
     const bodyClassName = hasModal ? classes.body_masked : classes.body;
+    const tabindex = isOpen ? '0' : '-1';
 
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (
@@ -52,35 +54,42 @@ const Navigation = props => {
     ) : null;
 
     return (
-        <aside className={rootClassName}>
-            <header className={classes.header}>
-                <NavHeader
-                    isTopLevel={isTopLevel}
-                    onBack={handleBack}
-                    view={view}
-                />
-            </header>
-            <div className={bodyClassName}>
-                <CategoryTree
-                    categoryId={categoryId}
-                    onNavigate={handleClose}
-                    setCategoryId={setCategoryId}
-                    updateCategories={catalogActions.updateCategories}
-                />
-            </div>
-            <div className={classes.footer}>
-                <div className={classes.switchers}>
-                    <StoreSwitcher />
-                    <CurrencySwitcher />
-                </div>
-                <AuthBar
-                    disabled={hasModal}
-                    showMyAccount={showMyAccount}
-                    showSignIn={showSignIn}
-                />
-            </div>
-            <div className={modalClassName}>{authModal}</div>
-        </aside>
+        <Portal>
+            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+            <FocusScope contain={isOpen} restoreFocus autoFocus>
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+                <aside className={rootClassName}>
+                    <header className={classes.header}>
+                        <NavHeader
+                            isTopLevel={isTopLevel}
+                            onBack={handleBack}
+                            view={view}
+                        />
+                    </header>
+                    <div className={bodyClassName}>
+                        <CategoryTree
+                            categoryId={categoryId}
+                            onNavigate={handleClose}
+                            setCategoryId={setCategoryId}
+                            updateCategories={catalogActions.updateCategories}
+                            tabindex={tabindex}
+                        />
+                    </div>
+                    <div className={classes.footer}>
+                        <div className={classes.switchers}>
+                            <StoreSwitcher />
+                            <CurrencySwitcher />
+                        </div>
+                        <AuthBar
+                            disabled={hasModal}
+                            showMyAccount={showMyAccount}
+                            showSignIn={showSignIn}
+                        />
+                    </div>
+                    <div className={modalClassName}>{authModal}</div>
+                </aside>
+            </FocusScope>
+        </Portal>
     );
 };
 

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

@@ -7,7 +7,9 @@ exports[`should render properly 1`] = `
   onSubmit={[Function]}
 >
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -44,7 +46,9 @@ exports[`should render show button if visible is false 1`] = `
   onSubmit={[Function]}
 >
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -121,7 +125,9 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
   onSubmit={[Function]}
 >
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span

package/lib/components/Password/password.js

@@ -40,7 +40,7 @@ const Password = props => {
     const fieldType = visible ? 'text' : 'password';
 
     return (
-        <Field label={label} classes={{ root: classes.root }}>
+        <Field id="Password" label={label} classes={{ root: classes.root }}>
             <TextInput
                 after={!isToggleButtonHidden && passwordButton}
                 autoComplete={autoComplete}

package/lib/components/SearchBar/autocomplete.js

@@ -137,9 +137,13 @@ const Autocomplete = props => {
 
     return (
         <div data-cy="Autocomplete-root" className={rootClassName}>
-            <div data-cy="Autocomplete-message" className={classes.message}>
+            <label
+                id="search_query"
+                data-cy="Autocomplete-message"
+                className={classes.message}
+            >
                 {message}
-            </div>
+            </label>
             <div className={classes.suggestions}>
                 <Suggestions
                     displayResult={displayResult}

package/lib/components/SearchBar/searchField.js

@@ -20,6 +20,7 @@ const SearchField = props => {
 
     return (
         <TextInput
+            id="search_query"
             after={resetButton}
             before={searchIcon}
             field="search_query"

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

@@ -37,6 +37,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
     >
       <label
         className="label"
+        htmlFor="email"
       >
         Email address
       </label>
@@ -78,6 +79,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>
@@ -96,7 +98,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
           <input
             autoComplete="current-password"
             className="input"
-            id="password"
+            id="Password"
             name="password"
             onBlur={[Function]}
             onChange={[Function]}
@@ -163,6 +165,7 @@ exports[`renders correctly 1`] = `
     >
       <label
         className="label"
+        htmlFor="email"
       >
         Email address
       </label>
@@ -204,6 +207,7 @@ exports[`renders correctly 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>
@@ -222,7 +226,7 @@ exports[`renders correctly 1`] = `
           <input
             autoComplete="current-password"
             className="input"
-            id="password"
+            id="Password"
             name="password"
             onBlur={[Function]}
             onChange={[Function]}
@@ -289,6 +293,7 @@ exports[`renders prefilled form with initial values 1`] = `
     >
       <label
         className="label"
+        htmlFor="email"
       >
         Email address
       </label>
@@ -330,6 +335,7 @@ exports[`renders prefilled form with initial values 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>
@@ -348,7 +354,7 @@ exports[`renders prefilled form with initial values 1`] = `
           <input
             autoComplete="current-password"
             className="input"
-            id="password"
+            id="Password"
             name="password"
             onBlur={[Function]}
             onChange={[Function]}