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

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

@@ -7,6 +7,7 @@ exports[`does not render group name when there is only one group 1`] = `
   className="root"
 >
   <button
+    aria-expanded={false}
     aria-label="Store 2"
     className="trigger"
     onClick={[MockFunction]}
@@ -21,9 +22,12 @@ exports[`does not render group name when there is only one group 1`] = `
     >
       <ul
         className="groupList"
+        role="listbox"
       >
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -42,7 +46,9 @@ exports[`does not render group name when there is only one group 1`] = `
           </button>
         </li>
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -91,6 +97,7 @@ exports[`renders the correct tree 1`] = `
   className="root"
 >
   <button
+    aria-expanded={false}
     aria-label="Store 2"
     className="trigger"
     onClick={[MockFunction]}
@@ -105,9 +112,12 @@ exports[`renders the correct tree 1`] = `
     >
       <ul
         className="groupList"
+        role="listbox"
       >
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -126,7 +136,9 @@ exports[`renders the correct tree 1`] = `
           </button>
         </li>
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -167,9 +179,12 @@ exports[`renders the correct tree 1`] = `
       </ul>
       <ul
         className="groupList"
+        role="listbox"
       >
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"
@@ -188,7 +203,9 @@ exports[`renders the correct tree 1`] = `
           </button>
         </li>
         <li
+          aria-selected="Store 2"
           className="menuItem"
+          role="option"
         >
           <button
             className="root"

package/lib/components/Header/cartTrigger.js

@@ -56,6 +56,7 @@ const CartTrigger = props => {
         <Fragment>
             <div className={triggerClassName} ref={miniCartTriggerRef}>
                 <button
+                    aria-expanded={miniCartIsOpen}
                     aria-label={buttonAriaLabel}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
@@ -66,6 +67,7 @@ const CartTrigger = props => {
                 </button>
             </div>
             <button
+                aria-expanded={miniCartIsOpen}
                 aria-label={buttonAriaLabel}
                 className={classes.link}
                 onClick={handleLinkClick}

package/lib/components/Header/currencySwitcher.js

@@ -33,7 +33,12 @@ const CurrencySwitcher = props => {
 
     const currencies = availableCurrencies.map(code => {
         return (
-            <li key={code} className={classes.menuItem}>
+            <li
+                role="option"
+                aria-selected={currentCurrencyCode}
+                key={code}
+                className={classes.menuItem}
+            >
                 <SwitcherItem
                     active={code === currentCurrencyCode}
                     onClick={handleSwitchCurrency}
@@ -58,6 +63,7 @@ const CurrencySwitcher = props => {
                 aria-label={currentCurrencyCode}
                 onClick={handleTriggerClick}
                 ref={currencyMenuTriggerRef}
+                aria-expanded={currencyMenuIsOpen}
             >
                 <span className={classes.label}>
                     <CurrencySymbol
@@ -69,7 +75,7 @@ const CurrencySwitcher = props => {
                 </span>
             </button>
             <div ref={currencyMenuRef} className={menuClassName}>
-                <ul>{currencies}</ul>
+                <ul role="listbox">{currencies}</ul>
             </div>
         </div>
     );

package/lib/components/Header/header.js

@@ -17,6 +17,7 @@ import StoreSwitcher from './storeSwitcher';
 import CurrencySwitcher from './currencySwitcher';
 import MegaMenu from '../MegaMenu';
 import PageLoadingIndicator from '../PageLoadingIndicator';
+import { useIntl } from 'react-intl';
 
 const SearchBar = React.lazy(() => import('../SearchBar'));
 
@@ -51,6 +52,9 @@ const Header = props => {
         </Suspense>
     ) : null;
 
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
     return (
         <Fragment>
             <div className={classes.switchersContainer}>
@@ -69,6 +73,7 @@ const Header = props => {
                         isOnline={isOnline}
                     />
                     <Link
+                        aria-label={title}
                         to={resourceUrl('/')}
                         className={classes.logoContainer}
                         data-cy="Header-logoContainer"

package/lib/components/Header/storeSwitcher.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shape, string } from 'prop-types';
 
 import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
 
 import { useStyle } from '../../classify';
 import defaultClasses from './storeSwitcher.module.css';
@@ -19,7 +20,7 @@ const StoreSwitcher = props => {
         storeMenuTriggerRef,
         storeMenuIsOpen,
         handleTriggerClick
-    } = useStoreSwitcher();
+    } = useStoreSwitcher({ availableRoutes });
 
     const classes = useStyle(defaultClasses, props.classes);
     const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
@@ -33,7 +34,7 @@ const StoreSwitcher = props => {
 
     storeGroups.forEach((group, key) => {
         const stores = [];
-        group.forEach(({ storeGroupName, storeName, isCurrent, code }) => {
+        group.forEach(({ storeGroupName, storeName, isCurrent, storeCode }) => {
             let label;
             if (hasOnlyOneGroup) {
                 label = `${storeName}`;
@@ -42,14 +43,16 @@ const StoreSwitcher = props => {
             }
             stores.push(
                 <li
-                    key={code}
+                    aria-selected={currentStoreName}
+                    role="option"
+                    key={storeCode}
                     className={classes.menuItem}
                     data-cy="StoreSwitcher-view"
                 >
                     <SwitcherItem
                         active={isCurrent}
                         onClick={handleSwitchStore}
-                        option={code}
+                        option={storeCode}
                     >
                         {label}
                     </SwitcherItem>
@@ -59,6 +62,7 @@ const StoreSwitcher = props => {
 
         groups.push(
             <ul
+                role="listbox"
                 className={classes.groupList}
                 key={key}
                 data-cy="StoreSwitcher-group"
@@ -84,6 +88,7 @@ const StoreSwitcher = props => {
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
                 data-cy="StoreSwitcher-trigger"
+                aria-expanded={storeMenuIsOpen}
             >
                 {triggerLabel}
             </button>

package/lib/components/Logo/logo.js

@@ -23,7 +23,6 @@ const Logo = props => {
 
     return (
         <Image
-            alt={title}
             classes={{ image: classes.logo }}
             height={height}
             src={logo}

package/lib/components/MiniCart/miniCart.js

@@ -33,6 +33,7 @@ const MiniCart = React.forwardRef((props, ref) => {
     useScrollLock(isOpen);
 
     const talonProps = useMiniCart({
+        isOpen,
         setIsOpen,
         operations
     });

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

@@ -5,7 +5,9 @@ exports[`should render error message if token is falsy 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"
@@ -27,7 +29,9 @@ exports[`should render formErrors 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"
@@ -174,7 +178,9 @@ exports[`should render properly 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"
@@ -321,7 +327,9 @@ exports[`should render success message if hasCompleted is true 1`] = `
   <mock-StoreTitle>
     Reset Password
   </mock-StoreTitle>
-  <h1>
+  <h1
+    aria-live="polite"
+  >
     <mock-FormattedMessage
       defaultMessage="Reset Password"
       id="resetPassword.header"

package/lib/components/MyAccount/ResetPassword/resetPassword.js

@@ -113,7 +113,7 @@ const ResetPassword = props => {
                     defaultMessage: 'Reset Password'
                 })}
             </StoreTitle>
-            <h1 className={classes.header}>
+            <h1 aria-live="polite" className={classes.header}>
                 <FormattedMessage
                     id="resetPassword.header"
                     defaultMessage="Reset Password"

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

@@ -7,6 +7,7 @@ exports[`renders correctly with data 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -207,6 +208,7 @@ exports[`renders correctly without data 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -383,6 +385,7 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -570,6 +573,7 @@ exports[`renders loading indicator 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History
@@ -780,6 +784,7 @@ exports[`renders no orders message is orders is empty 1`] = `
   >
     Title
     <h1
+      aria-live="polite"
       className="heading"
     >
       Order History

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -160,7 +160,9 @@ const OrderHistoryPage = props => {
         <OrderHistoryContextProvider>
             <div className={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
-                <h1 className={classes.heading}>{PAGE_TITLE}</h1>
+                <h1 aria-live="polite" className={classes.heading}>
+                    {PAGE_TITLE}
+                </h1>
                 <div className={classes.filterRow}>
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
                     <Form className={classes.search} onSubmit={handleSubmit}>

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#PageLoadingIndicator displays correctly depend on the position type when absolute is false and page is loading 1`] = `
+<div
+  className="root_relative"
+>
+  <div
+    className="indicator_undefined"
+  />
+</div>
+`;
+
+exports[`#PageLoadingIndicator displays correctly depend on the position type when absolute is true and page is not loading 1`] = `
+<div
+  className="root_absolute"
+>
+  <div
+    className="indicator_undefined"
+  />
+</div>
+`;

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

@@ -38,8 +38,8 @@ describe('#PageLoadingIndicator does not render', () => {
     });
 });
 
-describe('#PageLoadingIndicator displays', () => {
-    test('when page is loading', async () => {
+describe('#PageLoadingIndicator displays correctly depend on the position type', () => {
+    test('when absolute is false and page is loading', async () => {
         givenPageLoading();
         let tree;
 
@@ -47,7 +47,7 @@ describe('#PageLoadingIndicator displays', () => {
             tree = create(<PageLoadingIndicator />);
         });
 
-        expect(tree.toJSON()).not.toBeNull();
+        expect(tree.toJSON()).toMatchSnapshot();
     });
 
     test('when absolute is true and page is not loading', async () => {
@@ -58,6 +58,6 @@ describe('#PageLoadingIndicator displays', () => {
             tree = create(<PageLoadingIndicator absolute />);
         });
 
-        expect(tree.toJSON()).not.toBeNull();
+        expect(tree.toJSON()).toMatchSnapshot();
     });
 });

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.js

@@ -14,7 +14,9 @@ const PageLoadingIndicator = props => {
     }
 
     return (
-        <div className={absolute ? classes.root_absolute : classes.root}>
+        <div
+            className={absolute ? classes.root_absolute : classes.root_relative}
+        >
             <div className={classes[`indicator_${loadingState}`]} />
         </div>
     );
@@ -27,7 +29,9 @@ PageLoadingIndicator.defaultProps = {
 
 PageLoadingIndicator.propTypes = {
     classes: shape({
-        root: string
+        root: string,
+        root_absolute: string,
+        root_relative: string
     }),
     absolute: bool
 };

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css

@@ -1,11 +1,16 @@
 .root {
     composes: bg-gray-100 from global;
     composes: h-[2px] from global;
-    composes: relative from global;
     composes: overflow-hidden from global;
     composes: w-full from global;
 }
 
+.root_relative {
+    composes: root;
+
+    composes: relative from global;
+}
+
 .root_absolute {
     composes: root;