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

package/i18n/en_US.json

@@ -360,6 +360,7 @@
     "productFullDetail.productDescription": "Product Description",
     "productFullDetail.details": "Details",
     "productFullDetail.unavailableProduct": "This product is currently unavailable for purchase.",
+    "productFullDetail.outOfStockProduct": "This item is currently out of stock",
     "productImageCarousel.previousButtonAriaLabel": "Previous Image",
     "productImageCarousel.nextButtonAriaLabel": "Next Image",
     "productList.each": " ea.",

package/lib/components/Accordion/__tests__/__snapshots__/accordion.spec.js.snap

@@ -8,6 +8,7 @@ exports[`it renders a closed Section correctly 1`] = `
     className="root"
   >
     <button
+      aria-expanded={false}
       className="title_container"
       onClick={[Function]}
       type="button"
@@ -59,6 +60,7 @@ exports[`it renders an open Section correctly 1`] = `
     className="root"
   >
     <button
+      aria-expanded={true}
       className="title_container"
       onClick={[Function]}
       type="button"

package/lib/components/Accordion/section.js

@@ -32,6 +32,7 @@ const Section = props => {
     return (
         <div className={classes.root} {...restProps}>
             <button
+                aria-expanded={isOpen}
                 className={classes.title_container}
                 data-cy="Section-titleContainer"
                 onClick={handleSectionToggleWithId}

package/lib/components/AddToCartDialog/__tests__/__snapshots__/addToCartDialog.spec.js.snap

@@ -54,6 +54,17 @@ exports[`renders dialog with content 1`] = `
             "option2",
           ]
         }
+        outOfStockVariants={
+          Array [
+            Array [
+              55,
+              56,
+            ],
+            Array [
+              31,
+            ],
+          ]
+        }
       />
       <button
         className="root_normalPriority"

package/lib/components/AddToCartDialog/__tests__/addToCartDialog.spec.js

@@ -38,6 +38,7 @@ test('renders dialog with content', () => {
         configurableOptionProps: {
             options: ['option1', 'option2']
         },
+        outOfStockVariants: [[55, 56], [31]],
         imageProps: {
             alt: 'image-label',
             src: 'https://example.com/media/image.jpg'

package/lib/components/AddToCartDialog/addToCartDialog.js

@@ -22,6 +22,7 @@ const AddToCartDialog = props => {
         configurableOptionProps,
         formErrors,
         handleOnClose,
+        outOfStockVariants,
         imageProps,
         isFetchingProductDetail,
         priceProps
@@ -60,6 +61,7 @@ const AddToCartDialog = props => {
                                 root: undefined,
                                 title: classes.optionTitle
                             }}
+                            outOfStockVariants={outOfStockVariants}
                         />
                         <Button {...buttonProps}>
                             <FormattedMessage
@@ -83,7 +85,8 @@ const AddToCartDialog = props => {
         configurableOptionProps,
         imageComponent,
         item,
-        priceComponent
+        priceComponent,
+        outOfStockVariants
     ]);
 
     const titleElement = isFetchingProductDetail ? (

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap

@@ -5,6 +5,7 @@ exports[`it renders Venia price adjustments 1`] = `
   <div>
     <div>
       <button
+        aria-expanded={false}
         onClick={[Function]}
         type="button"
       >
@@ -37,6 +38,7 @@ exports[`it renders Venia price adjustments 1`] = `
     </div>
     <div>
       <button
+        aria-expanded={false}
         onClick={[Function]}
         type="button"
       >

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

@@ -176,6 +176,17 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
                     "option4",
                   ]
                 }
+                outOfStockVariants={
+                  Array [
+                    Array [
+                      55,
+                      56,
+                    ],
+                    Array [
+                      31,
+                    ],
+                  ]
+                }
                 selectedValues={
                   Array [
                     "option1",
@@ -533,6 +544,17 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
                     "option4",
                   ]
                 }
+                outOfStockVariants={
+                  Array [
+                    Array [
+                      55,
+                      56,
+                    ],
+                    Array [
+                      31,
+                    ],
+                  ]
+                }
                 selectedValues={
                   Array [
                     "option1",

package/lib/components/CartPage/ProductListing/EditModal/__tests__/productForm.spec.js

@@ -43,6 +43,7 @@ const mockTalonProps = {
     errors: new Map(),
     handleOptionSelection: jest.fn(),
     handleSubmit: jest.fn(),
+    outOfStockVariants: [[55, 56], [31]],
     isDialogOpen: true,
     isLoading: false,
     setFormApi: jest.fn()

package/lib/components/CartPage/ProductListing/EditModal/productForm.js

@@ -31,6 +31,7 @@ const ProductForm = props => {
         errors,
         handleOptionSelection,
         handleSubmit,
+        outOfStockVariants,
         isLoading,
         isSaving,
         isDialogOpen,
@@ -103,6 +104,7 @@ const ProductForm = props => {
                     onSelectionChange={handleOptionSelection}
                     options={configItem.configurable_options}
                     selectedValues={cartItem.configurable_options}
+                    outOfStockVariants={outOfStockVariants}
                 />
                 <h3 className={classes.quantityLabel}>
                     <FormattedMessage

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

@@ -223,6 +223,7 @@ exports[`renders configurable product with options 1`] = `
       className="root"
     >
       <button
+        aria-expanded={false}
         className="kebab"
         onClick={[Function]}
       >
@@ -583,6 +584,7 @@ exports[`renders out of stock product 1`] = `
       className="root"
     >
       <button
+        aria-expanded={false}
         className="kebab"
         onClick={[Function]}
       >
@@ -896,6 +898,7 @@ exports[`renders simple product correctly 1`] = `
       className="root"
     >
       <button
+        aria-expanded={false}
         className="kebab"
         onClick={[Function]}
       >

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, tabindex } = props;
+    const { category, setCategoryId, tabIndex } = props;
     const { name } = category;
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -20,7 +20,7 @@ const Branch = props => {
     return (
         <li className={classes.root}>
             <button
-                tabindex={tabindex}
+                tabIndex={tabIndex}
                 className={classes.target}
                 data-cy="CategoryTree-Branch-target"
                 type="button"
@@ -46,5 +46,5 @@ Branch.propTypes = {
         text: string
     }),
     setCategoryId: func.isRequired,
-    tabindex: 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, tabindex } = props;
+    const { category, onNavigate, categoryUrlSuffix, tabIndex } = props;
     const { name, url_path, children } = category;
     const classes = useStyle(defaultClasses, props.classes);
     const { handleClick } = useCategoryLeaf({ onNavigate });
@@ -35,7 +35,7 @@ const Leaf = props => {
                 data-cy="CategoryTree-Leaf-target"
                 to={destination}
                 onClick={handleClick}
-                tabIndex={tabindex}
+                tabIndex={tabIndex}
             >
                 <span className={classes.text}>{leafLabel}</span>
             </Link>
@@ -56,6 +56,6 @@ Leaf.propTypes = {
         text: string
     }),
     onNavigate: func.isRequired,
-    tabindex: func.isRequired,
+    tabIndex: func.isRequired,
     categoryUrlSuffix: string
 };

package/lib/components/CategoryTree/categoryTree.js

@@ -13,7 +13,7 @@ const Tree = props => {
         onNavigate,
         setCategoryId,
         updateCategories,
-        tabindex
+        tabIndex
     } = props;
 
     const talonProps = useCategoryTree({
@@ -35,14 +35,14 @@ const Tree = props => {
                       category={category}
                       onNavigate={onNavigate}
                       categoryUrlSuffix={categoryUrlSuffix}
-                      tabindex={tabindex}
+                      tabIndex={tabIndex}
                   />
               ) : (
                   <Branch
                       key={id}
                       category={category}
                       setCategoryId={setCategoryId}
-                      tabindex={tabindex}
+                      tabIndex={tabIndex}
                   />
               );
           })
@@ -66,5 +66,5 @@ Tree.propTypes = {
     onNavigate: func.isRequired,
     setCategoryId: func.isRequired,
     updateCategories: func.isRequired,
-    tabindex: func.isRequired
+    tabIndex: func.isRequired
 };

package/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -28,6 +28,7 @@ const PaymentMethods = props => {
     const {
         availablePaymentMethods,
         currentSelectedPaymentMethod,
+        handlePaymentMethodSelection,
         initialSelectedMethod,
         isLoading
     } = talonProps;
@@ -65,6 +66,7 @@ const PaymentMethods = props => {
                             label: classes.radio_label
                         }}
                         checked={isSelected}
+                        onChange={handlePaymentMethodSelection}
                     />
                     {renderedComponent}
                 </div>

package/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css

@@ -1,7 +1,7 @@
 .root {
     composes: grid from global;
     composes: p-md from global;
-    composes: pb-xs from global;
+    composes: pb-s from global;
 }
 
 .radio_group {
@@ -14,8 +14,6 @@
     composes: border-subtle from global;
     composes: pb-xs from global;
     composes: pt-xs from global;
-
-    composes: last_pt-0 from global;
 }
 
 /* TODO @TW: cannot compose */

package/lib/components/FilterSidebar/filterSidebar.js

@@ -101,7 +101,6 @@ const FilterSidebar = props => {
             className={classes.root}
             ref={filterRef}
             data-cy="FilterSidebar-root"
-            aria-live="polite"
             aria-busy="false"
         >
             <div className={classes.body}>

package/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -3,15 +3,12 @@
 exports[`renders if \`items\` is an array of objects 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <div
     className="items"
   >
     <div
-      aria-busy="false"
-      aria-live="polite"
       className="root"
     >
       <div
@@ -106,8 +103,6 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       </div>
     </div>
     <div
-      aria-busy="false"
-      aria-live="polite"
       className="root"
     >
       <div
@@ -208,7 +203,6 @@ exports[`renders if \`items\` is an array of objects 1`] = `
 exports[`renders if \`items\` is an empty array 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <div

package/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap

@@ -61,8 +61,6 @@ exports[`renders a placeholder item while awaiting item 1`] = `
 
 exports[`renders correctly with valid item data 1`] = `
 <div
-  aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <a

package/lib/components/Gallery/gallery.js

@@ -37,12 +37,7 @@ const Gallery = props => {
     );
 
     return (
-        <div
-            data-cy="Gallery-root"
-            className={classes.root}
-            aria-live="polite"
-            aria-busy="false"
-        >
+        <div data-cy="Gallery-root" className={classes.root} aria-busy="false">
             <div className={classes.items}>{galleryItems}</div>
         </div>
     );

package/lib/components/Gallery/item.js

@@ -14,7 +14,7 @@ import GalleryItemShimmer from './item.shimmer';
 import defaultClasses from './item.module.css';
 import WishlistGalleryButton from '../Wishlist/AddToListButton';
 
-import AddToCartbutton from '../Gallery/addToCartButton';
+import AddToCartButton from './addToCartButton';
 // eslint-disable-next-line no-unused-vars
 import Rating from '../Rating';
 
@@ -58,7 +58,7 @@ const GalleryItem = props => {
     ) : null;
 
     const addButton = isSupportedProductType ? (
-        <AddToCartbutton item={item} urlSuffix={productUrlSuffix} />
+        <AddToCartButton item={item} urlSuffix={productUrlSuffix} />
     ) : (
         <div className={classes.unavailableContainer}>
             <Info />
@@ -83,13 +83,7 @@ const GalleryItem = props => {
     // ) : null;
 
     return (
-        <div
-            data-cy="GalleryItem-root"
-            className={classes.root}
-            aria-live="polite"
-            aria-busy="false"
-            ref={itemRef}
-        >
+        <div data-cy="GalleryItem-root" className={classes.root} ref={itemRef}>
             <Link
                 onClick={handleLinkClick}
                 to={productLink}

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

@@ -6,6 +6,7 @@ Array [
     className="root"
   >
     <button
+      aria-expanded={false}
       aria-label="Toggle My Account Menu"
       className="trigger"
       onClick={[MockFunction handleTriggerClick]}

package/lib/components/Header/accountTrigger.js

@@ -36,6 +36,7 @@ const AccountTrigger = props => {
         <Fragment>
             <div className={rootClassName} ref={accountMenuTriggerRef}>
                 <button
+                    aria-expanded={accountMenuIsOpen}
                     aria-label={formatMessage({
                         id: 'accountTrigger.ariaLabel',
                         defaultMessage: 'Toggle My Account Menu'

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

@@ -3,6 +3,7 @@
 exports[`it renders children passed to it 1`] = `
 <div>
   <button
+    aria-expanded={false}
     onClick={[Function]}
   >
     <Icon
@@ -31,6 +32,7 @@ exports[`it renders children passed to it 1`] = `
 exports[`it renders correctly without children 1`] = `
 <div>
   <button
+    aria-expanded={false}
     onClick={[Function]}
   >
     <Icon

package/lib/components/LegacyMiniCart/kebab.js

@@ -17,6 +17,7 @@ const Kebab = props => {
     return (
         <div className={classes.root}>
             <button
+                aria-expanded={isOpen}
                 className={classes.kebab}
                 data-cy="Kebab-button"
                 onClick={handleKebabClick}
@@ -24,7 +25,7 @@ const Kebab = props => {
             >
                 <Icon src={MoreVerticalIcon} />
             </button>
-            <ul aria-hidden="true" className={toggleClass}>
+            <ul aria-hidden={isOpen ? 'false' : 'true'} className={toggleClass}>
                 {children}
             </ul>
         </div>

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

@@ -34,5 +34,4 @@
 .kebab {
     composes: bg-white from global;
     composes: border-0 from global;
-    composes: outline-none from global;
 }

package/lib/components/Logo/logo.js

@@ -26,6 +26,7 @@ const Logo = props => {
             classes={{ image: classes.logo }}
             height={height}
             src={logo}
+            alt={title}
             title={title}
             width={width}
         />

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap

@@ -14,6 +14,7 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
 >
   <div
     className="megaMenuItem"
+    onFocus={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     onTouchStart={[Function]}
@@ -79,6 +80,7 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
   </div>
   <div
     className="megaMenuItem"
+    onFocus={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     onTouchStart={[Function]}
@@ -94,6 +96,7 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
   </div>
   <div
     className="megaMenuItem"
+    onFocus={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     onTouchStart={[Function]}

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`Mega menu item renders correctly it does not render submenu when item does not have children 1`] = `
 <div
   className="megaMenuItem"
+  onFocus={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
   onTouchStart={[Function]}
@@ -37,6 +38,7 @@ exports[`Mega menu item renders correctly it does not render submenu when item d
 exports[`Mega menu item renders correctly it renders correctly 1`] = `
 <div
   className="megaMenuItem"
+  onFocus={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
   onTouchStart={[Function]}

package/lib/components/MegaMenu/megaMenuItem.js

@@ -99,6 +99,10 @@ const MegaMenuItem = props => {
                 handleSubMenuFocus();
                 handleMenuItemFocus();
             }}
+            onFocus={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
             onTouchStart={() => {
                 handleSubMenuFocus();
                 handleMenuItemFocus();

package/lib/components/Navigation/navigation.js

@@ -36,7 +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';
+    const tabIndex = isOpen ? '0' : '-1';
 
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (
@@ -72,7 +72,7 @@ const Navigation = props => {
                             onNavigate={handleClose}
                             setCategoryId={setCategoryId}
                             updateCategories={catalogActions.updateCategories}
-                            tabindex={tabindex}
+                            tabIndex={tabIndex}
                         />
                     </div>
                     <div className={classes.footer}>

package/lib/components/Pagination/navButton.module.css

@@ -2,6 +2,11 @@
     composes: root from './tile.module.css';
 }
 
+.root:focus {
+    box-shadow: 0 0 4px 2px rgb(var(--color-brand-dark) / var(--tw-bg-opacity));
+    border-radius: 0.5rem;
+}
+
 .icon {
     composes: root from '../Icon/icon.module.css';
 }

package/lib/components/Pagination/tile.module.css

@@ -5,7 +5,6 @@
     composes: flex from global;
     composes: items-center from global;
     composes: justify-center from global;
-    composes: outline-none from global;
     composes: relative from global;
     composes: rounded-sm from global;
     min-height: 2rem;