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

package/i18n/en_US.json

@@ -403,6 +403,7 @@
     "shippingForm.getShippingOptions": "Get Shipping Options",
     "shippingForm.loading": "Loading Methods...",
     "shippingForm.zip": "ZIP",
+    "shippingForm.shippingEmail":"Shipping Email",
     "shippingInformation.cardTitle": "Shipping Information",
     "shippingInformation.editTitle": "1. Shipping Information",
     "shippingInformation.loading": "Fetching Shipping Information...",

package/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap

@@ -152,6 +152,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           Password
         </label>
@@ -420,6 +421,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           Current Password
         </label>
@@ -510,6 +512,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           New Password
         </label>

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

@@ -260,6 +260,7 @@ exports[`renders configurable product with options 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
@@ -593,6 +594,7 @@ exports[`renders out of stock product 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li
@@ -892,6 +894,7 @@ exports[`renders simple product correctly 1`] = `
         </span>
       </button>
       <ul
+        aria-hidden="true"
         className="dropdown"
       >
         <li

package/lib/components/CategoryTree/categoryBranch.js

@@ -6,7 +6,7 @@ import { useStyle } from '../../classify';
 import defaultClasses from './categoryBranch.module.css';
 
 const Branch = props => {
-    const { category, setCategoryId } = props;
+    const { category, setCategoryId, tabindex } = props;
     const { name } = category;
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -20,6 +20,7 @@ const Branch = props => {
     return (
         <li className={classes.root}>
             <button
+                tabindex={tabindex}
                 className={classes.target}
                 data-cy="CategoryTree-Branch-target"
                 type="button"
@@ -44,5 +45,6 @@ Branch.propTypes = {
         target: string,
         text: string
     }),
-    setCategoryId: func.isRequired
+    setCategoryId: func.isRequired,
+    tabindex: func.isRequired
 };

package/lib/components/CategoryTree/categoryLeaf.js

@@ -9,7 +9,7 @@ import { useStyle } from '../../classify';
 import defaultClasses from './categoryLeaf.module.css';
 
 const Leaf = props => {
-    const { category, onNavigate, categoryUrlSuffix } = props;
+    const { category, onNavigate, categoryUrlSuffix, tabindex } = props;
     const { name, url_path, children } = category;
     const classes = useStyle(defaultClasses, props.classes);
     const { handleClick } = useCategoryLeaf({ onNavigate });
@@ -35,6 +35,7 @@ const Leaf = props => {
                 data-cy="CategoryTree-Leaf-target"
                 to={destination}
                 onClick={handleClick}
+                tabIndex={tabindex}
             >
                 <span className={classes.text}>{leafLabel}</span>
             </Link>
@@ -55,5 +56,6 @@ Leaf.propTypes = {
         text: string
     }),
     onNavigate: func.isRequired,
+    tabindex: func.isRequired,
     categoryUrlSuffix: string
 };

package/lib/components/CategoryTree/categoryTree.js

@@ -8,7 +8,13 @@ import Leaf from './categoryLeaf';
 import defaultClasses from './categoryTree.module.css';
 
 const Tree = props => {
-    const { categoryId, onNavigate, setCategoryId, updateCategories } = props;
+    const {
+        categoryId,
+        onNavigate,
+        setCategoryId,
+        updateCategories,
+        tabindex
+    } = props;
 
     const talonProps = useCategoryTree({
         categoryId,
@@ -29,12 +35,14 @@ const Tree = props => {
                       category={category}
                       onNavigate={onNavigate}
                       categoryUrlSuffix={categoryUrlSuffix}
+                      tabindex={tabindex}
                   />
               ) : (
                   <Branch
                       key={id}
                       category={category}
                       setCategoryId={setCategoryId}
+                      tabindex={tabindex}
                   />
               );
           })
@@ -57,5 +65,6 @@ Tree.propTypes = {
     }),
     onNavigate: func.isRequired,
     setCategoryId: func.isRequired,
-    updateCategories: func.isRequired
+    updateCategories: func.isRequired,
+    tabindex: func.isRequired
 };

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

@@ -153,6 +153,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>
@@ -475,6 +476,7 @@ exports[`CreateAccount renders errors 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap

@@ -36,7 +36,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -91,6 +91,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -136,6 +137,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -160,6 +162,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -188,6 +191,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -241,6 +245,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -286,6 +291,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -310,6 +316,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -341,6 +348,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -386,6 +394,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -477,7 +486,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -532,6 +541,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -577,6 +587,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -601,6 +612,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -629,6 +641,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -682,6 +695,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -727,6 +741,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -751,6 +766,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -782,6 +798,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -827,6 +844,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -914,7 +932,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -961,6 +979,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -1006,6 +1025,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -1030,6 +1050,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -1058,6 +1079,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -1111,6 +1133,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -1156,6 +1179,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -1180,6 +1204,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -1211,6 +1236,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -1256,6 +1282,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"
@@ -1369,7 +1396,7 @@ Array [
             className="input"
           >
             <input
-              autoComplete="off"
+              autoComplete="Shipping Email"
               className="input"
               id="email"
               name="email"
@@ -1416,6 +1443,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="First Name"
               className="input"
               id="firstname"
               name="firstname"
@@ -1461,6 +1489,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Last Name"
               className="input"
               id="lastname"
               name="lastname"
@@ -1485,6 +1514,7 @@ Array [
       className="country"
     >
       <Country
+        autoComplete="Country"
         validate={[Function]}
       />
     </div>
@@ -1513,6 +1543,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address"
               className="input"
               id="street0"
               name="street[0]"
@@ -1566,6 +1597,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Street Address 2"
               className="input"
               id="street1"
               name="street[1]"
@@ -1611,6 +1643,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="City"
               className="input"
               id="city"
               name="city"
@@ -1635,6 +1668,7 @@ Array [
       className="region"
     >
       <Region
+        autoComplete="State"
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
@@ -1666,6 +1700,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="ZIP / Postal Code"
               className="input"
               id="root"
               name="postcode"
@@ -1711,6 +1746,7 @@ Array [
             className="input"
           >
             <input
+              autoComplete="Phone Number"
               className="input"
               id="telephone"
               name="telephone"

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

@@ -145,7 +145,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
-                            autoComplete="off"
+                            autoComplete={formatMessage({
+                                id: 'shippingForm.shippingEmail',
+                                defaultMessage: 'Shipping Email'
+                            })}
                             field="email"
                             id="email"
                             data-cy="GuestForm-email"
@@ -174,6 +177,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.firstName',
+                                defaultMessage: 'First Name'
+                            })}
                             field="firstname"
                             id="firstname"
                             data-cy="GuestForm-firstName"
@@ -190,6 +197,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.lastName',
+                                defaultMessage: 'Last Name'
+                            })}
                             field="lastname"
                             id="lastname"
                             data-cy="GuestForm-lastName"
@@ -199,6 +210,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.country}>
                     <Country
+                        autoComplete={formatMessage({
+                            id: 'country.label',
+                            defaultMessage: 'Country'
+                        })}
                         validate={isRequired}
                         data-cy="GuestForm-country"
                     />
@@ -212,6 +227,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.streetAddress',
+                                defaultMessage: 'Street Address'
+                            })}
                             field="street[0]"
                             id="street0"
                             data-cy="GuestForm-street0"
@@ -229,6 +248,10 @@ const GuestForm = props => {
                         optional={true}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.streetAddress2',
+                                defaultMessage: 'Street Address 2'
+                            })}
                             field="street[1]"
                             id="street1"
                             data-cy="GuestForm-street1"
@@ -244,6 +267,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.city',
+                                defaultMessage: 'City'
+                            })}
                             field="city"
                             id="city"
                             data-cy="GuestForm-city"
@@ -253,6 +280,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
+                        autoComplete={formatMessage({
+                            id: 'region.label',
+                            defaultMessage: 'State'
+                        })}
                         validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -262,6 +293,10 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.postcode}>
                     <Postcode
+                        autoComplete={formatMessage({
+                            id: 'postcode.label',
+                            defaultMessage: 'ZIP / Postal Code'
+                        })}
                         validate={isRequired}
                         data-cy="GuestForm-postcode"
                     />
@@ -275,6 +310,10 @@ const GuestForm = props => {
                         })}
                     >
                         <TextInput
+                            autoComplete={formatMessage({
+                                id: 'global.phoneNumber',
+                                defaultMessage: 'Phone Number'
+                            })}
                             field="telephone"
                             id="telephone"
                             data-cy="GuestForm-telephone"

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/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/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]}

package/lib/components/SignIn/signIn.js

@@ -64,12 +64,14 @@ const SignIn = props => {
                 initialValues={initialValues && initialValues}
             >
                 <Field
+                    id="email"
                     label={formatMessage({
                         id: 'signIn.emailAddressText',
                         defaultMessage: 'Email address'
                     })}
                 >
                     <TextInput
+                        id="email"
                         data-cy="SignIn-email"
                         autoComplete="email"
                         field="email"
@@ -80,6 +82,7 @@ const SignIn = props => {
                 <Password
                     data-cy="SignIn-password"
                     fieldName="password"
+                    id="Password"
                     label={formatMessage({
                         id: 'signIn.passwordText',
                         defaultMessage: 'Password'

package/lib/tokens.module.css

@@ -17,7 +17,7 @@
     /* --venia-global-color-gray-75: 250 250 250; */
     --venia-global-color-gray-100: 244 245 245;
     /* --venia-global-color-gray-200: 234 235 235; */
-    --venia-global-color-gray-300: 223 225 226;
+    --venia-global-color-gray-300: 161 151 145;
     --venia-global-color-gray-400: 181 184 186;
     --venia-global-color-gray-500: 149 154 157;
     --venia-global-color-gray-600: 118 123 127;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.5.0-alpha.1",
+  "version": "9.6.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -80,10 +80,10 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.2.1",
-    "@magento/peregrine": "12.5.0-alpha.1",
-    "@magento/pwa-buildpack": "11.4.0-alpha.1",
+    "@magento/peregrine": "12.5.1-alpha.1",
+    "@magento/pwa-buildpack": "~11.4.0",
     "apollo-cache-persist": "~0.1.1",
-    "braintree-web-drop-in": "~1.16.0",
+    "braintree-web-drop-in": "~1.33.3",
     "graphql": "~15.5.0",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",