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

package/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders root class if not the active Thumbnail 1`] = `
-<span
-  aria-hidden="true"
+<button
+  aria-label="Next Image"
   className="root"
   onClick={[Function]}
-  role="button"
 >
   <div
     className="root container"
   >
     <img
       alt="test-thumbnail"
+      aria-hidden="true"
       className="image placeholder"
       height={170}
       loading="eager"
@@ -50,21 +50,21 @@ exports[`renders root class if not the active Thumbnail 1`] = `
       width={135}
     />
   </div>
-</span>
+</button>
 `;
 
 exports[`renders the Thumbnail component correctly 1`] = `
-<span
-  aria-hidden="true"
+<button
+  aria-label="Current Image"
   className="rootSelected"
   onClick={[Function]}
-  role="button"
 >
   <div
     className="root container"
   >
     <img
       alt="test-thumbnail"
+      aria-hidden="true"
       className="image placeholder"
       height={170}
       loading="eager"
@@ -103,21 +103,21 @@ exports[`renders the Thumbnail component correctly 1`] = `
       width={135}
     />
   </div>
-</span>
+</button>
 `;
 
 exports[`renders transparent placeholder when no file name is provided 1`] = `
-<span
-  aria-hidden="true"
+<button
+  aria-label="Current Image"
   className="rootSelected"
   onClick={[Function]}
-  role="button"
 >
   <div
     className="root container"
   >
     <img
       alt="placeholder-thumbnail"
+      aria-hidden="true"
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
@@ -133,5 +133,5 @@ exports[`renders transparent placeholder when no file name is provided 1`] = `
       style={Object {}}
     />
   </div>
-</span>
+</button>
 `;

package/lib/components/ProductImageCarousel/__tests__/thumbnail.spec.js

@@ -36,7 +36,7 @@ test('clicking calls click handler with item index', () => {
         </WindowSizeContextProvider>
     );
 
-    component.root.findByType('span').props.onClick();
+    component.root.findByType('button').props.onClick();
 
     expect(onClickHandler).toHaveBeenCalledWith(itemIndex);
 
@@ -72,5 +72,5 @@ test('renders root class if not the active Thumbnail', () => {
     );
 
     expect(component.toJSON()).toMatchSnapshot();
-    expect(component.root.findByType('span').props.className).toEqual('root');
+    expect(component.root.findByType('button').props.className).toEqual('root');
 });

package/lib/components/ProductImageCarousel/thumbnail.js

@@ -39,7 +39,7 @@ const Thumbnail = props => {
     });
 
     const { handleClick } = talonProps;
-
+    const selectedItem = isActive ? 'Current Image' : 'Next Image';
     const windowSize = useWindowSize();
     const isDesktop = windowSize.innerWidth >= 1024;
 
@@ -66,14 +66,13 @@ const Thumbnail = props => {
     }, [file, isDesktop, label, classes.image]);
 
     return (
-        <span
+        <button
             className={isActive ? classes.rootSelected : classes.root}
             onClick={handleClick}
-            role="button"
-            aria-hidden="true"
+            aria-label={selectedItem}
         >
             {thumbnailImage}
-        </span>
+        </button>
     );
 };
 

package/lib/components/ProductImageCarousel/thumbnail.module.css

@@ -6,7 +6,6 @@
     composes: border-solid from global;
     composes: border-strong from global;
     composes: h-[0.875rem] from global;
-    composes: outline-none from global;
     composes: rounded-full from global;
     composes: w-[0.875rem] from global;
     box-shadow: 0 0 0 1px #ffffff;

package/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
+  aria-label="Color's  option red"
   className="root_focused"
   onClick={[Function]}
   style={
@@ -37,6 +38,7 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 
 exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
 <button
+  aria-label="Color's  option red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -73,6 +75,7 @@ exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`
 
 exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
 <button
+  aria-label="Color's  option red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -88,6 +91,7 @@ exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] =
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
+  aria-label="Color's Selected option red"
   className="root_selected"
   onClick={[Function]}
   style={
@@ -123,6 +127,7 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 
 exports[`renders a Swatch correctly 1`] = `
 <button
+  aria-label="Color's  option red"
   className="root"
   onClick={[Function]}
   style={
@@ -158,6 +163,7 @@ exports[`renders a Swatch correctly 1`] = `
 
 exports[`renders an icon if isSelected is true 1`] = `
 <button
+  aria-label="Color's Selected option red"
   className="root_selected"
   onClick={[Function]}
   style={

package/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap

@@ -5,6 +5,7 @@ exports[`renders SwatchList component correctly 1`] = `
   className="root"
 >
   <button
+    aria-label="undefined's  option foo"
     className="root"
     onClick={[Function]}
     style={

package/lib/components/ProductOptions/__tests__/swatch.spec.js

@@ -14,7 +14,8 @@ const defaultProps = {
         swatch_data: {
             value: '#123123'
         }
-    }
+    },
+    attributeLabel: 'Color'
 };
 
 test('renders a Swatch correctly', () => {

package/lib/components/ProductOptions/option.js

@@ -70,6 +70,7 @@ const Option = props => {
                 onSelectionChange={handleSelectionChange}
                 isEverythingOutOfStock={isEverythingOutOfStock}
                 outOfStockVariants={outOfStockVariants}
+                attributeLabel={label}
             />
             <dl className={classes.selection}>
                 <dt

package/lib/components/ProductOptions/swatch.js

@@ -40,7 +40,8 @@ const Swatch = props => {
         onClick,
         style,
         isEverythingOutOfStock,
-        isOptionOutOfStock
+        isOptionOutOfStock,
+        attributeLabel
     } = props;
 
     const talonProps = useSwatch({
@@ -83,7 +84,8 @@ const Swatch = props => {
             '--venia-swatch-bg': swatchValue
         });
     }
-
+    const selectedText = isSelected ? 'Selected' : '';
+    const ariaLabel = `${attributeLabel}'s ${selectedText} option ${label}`;
     const className =
         classes[
             getClassName(
@@ -104,6 +106,7 @@ const Swatch = props => {
             type="button"
             data-cy="Swatch-root"
             disabled={isEverythingOutOfStock || isOptionOutOfStock}
+            aria-label={ariaLabel}
         >
             {!isOptionOutOfStock && (
                 <Icon classes={{ root: checkStyle }} src={CheckIcon} />

package/lib/components/ProductOptions/swatchList.js

@@ -12,7 +12,8 @@ const SwatchList = props => {
         items,
         onSelectionChange,
         isEverythingOutOfStock,
-        outOfStockVariants
+        outOfStockVariants,
+        attributeLabel
     } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -35,6 +36,7 @@ const SwatchList = props => {
                         onClick={onSelectionChange}
                         isEverythingOutOfStock={isEverythingOutOfStock}
                         isOptionOutOfStock={isOptionOutOfStock}
+                        attributeLabel={attributeLabel}
                     />
                 );
             }),
@@ -44,7 +46,8 @@ const SwatchList = props => {
             items,
             onSelectionChange,
             isEverythingOutOfStock,
-            outOfStockVariants
+            outOfStockVariants,
+            attributeLabel
         ]
     );
 

package/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap

@@ -5,6 +5,7 @@ exports[`renders correctly 1`] = `
   aria-busy="false"
 >
   <button
+    aria-label="Sort Button Collapsed"
     disabled={false}
     onClick={[Function]}
     onDragStart={[Function]}

package/lib/components/ProductSort/productSort.js

@@ -157,6 +157,21 @@ const ProductSort = props => {
         setExpanded(!expanded);
     };
 
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            setExpanded(expanded);
+        }
+    };
+    const result = expanded
+        ? formatMessage({
+              id: 'productSort.sortButtonExpanded',
+              defaultMessage: 'Sort Button Expanded'
+          })
+        : formatMessage({
+              id: 'productSort.sortButtonCollapsed',
+              defaultMessage: 'Sort Button Collapsed'
+          });
+
     return (
         <div
             ref={elementRef}
@@ -171,6 +186,8 @@ const ProductSort = props => {
                 }}
                 onClick={handleSortClick}
                 data-cy="ProductSort-sortButton"
+                onKeyDown={handleKeypress}
+                aria-label={result}
             >
                 <span className={classes.mobileText}>
                     <FormattedMessage

package/lib/components/QuantityStepper/quantityStepper.module.css

@@ -41,8 +41,6 @@
     stroke: rgb(var(--stroke));
 
     composes: disabled_cursor-not-allowed from global;
-
-    composes: focus_outline-none from global;
 }
 
 .button:hover {

package/lib/components/Region/__tests__/__snapshots__/region.spec.js.snap

@@ -50,6 +50,7 @@ exports[`renders disabled dropdown while loading 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       >
         <span
@@ -139,6 +140,7 @@ exports[`renders dropdown with regions 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       >
         <span
@@ -211,6 +213,7 @@ exports[`renders input with no regions 1`] = `
         className="before"
       />
       <span
+        aria-hidden="false"
         className="after"
       />
     </span>

package/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap

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

package/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap

@@ -7,6 +7,7 @@ Array [
   >
     <img
       alt="Product Name"
+      aria-hidden="true"
       className="image placeholder"
       loading="eager"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="

package/lib/components/SearchBar/searchBar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { bool, shape, string } from 'prop-types';
 import { Form } from 'informed';
+import { useIntl } from 'react-intl';
 import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
 
 import { useStyle } from '../../classify';
@@ -24,7 +25,7 @@ const SearchBar = React.forwardRef((props, ref) => {
 
     const classes = useStyle(defaultClasses, props.classes);
     const rootClassName = isOpen ? classes.root_open : classes.root;
-
+    const { formatMessage } = useIntl();
     return (
         <div className={rootClassName} data-cy="SearchBar-root" ref={ref}>
             <div ref={containerRef} className={classes.container}>
@@ -43,6 +44,10 @@ const SearchBar = React.forwardRef((props, ref) => {
                     </div>
                     <div className={classes.search}>
                         <SearchField
+                            addLabel={formatMessage({
+                                id: 'global.clearText',
+                                defaultMessage: 'Clear Text'
+                            })}
                             isSearchOpen={isOpen}
                             onChange={handleChange}
                             onFocus={handleFocus}

package/lib/components/SearchBar/searchField.js

@@ -11,11 +11,13 @@ const clearIcon = <Icon src={ClearIcon} size={24} />;
 const searchIcon = <Icon src={SearchIcon} size={24} />;
 
 const SearchField = props => {
-    const { isSearchOpen, onChange, onFocus } = props;
+    const { isSearchOpen, onChange, onFocus, addLabel } = props;
     const { inputRef, resetForm, value } = useSearchField({ isSearchOpen });
 
     const resetButton = value ? (
-        <Trigger action={resetForm}>{clearIcon}</Trigger>
+        <Trigger action={resetForm} addLabel={addLabel}>
+            {clearIcon}
+        </Trigger>
     ) : null;
 
     return (

package/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap

@@ -59,10 +59,10 @@ exports[`Search Page Component error view does not render when data is present 1
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -105,10 +105,10 @@ exports[`Search Page Component error view renders when data is not present and n
     </div>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -177,10 +177,10 @@ exports[`Search Page Component filter button/modal does not render if there are
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -272,10 +272,10 @@ exports[`Search Page Component filter button/modal renders when there are filter
     />
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -343,10 +343,10 @@ exports[`Search Page Component loading indicator does not render when data is pr
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -415,10 +415,10 @@ exports[`Search Page Component loading indicator renders when data is not presen
     />
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -471,10 +471,10 @@ exports[`Search Page Component search results does not render if data returned h
     </div>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -575,10 +575,10 @@ exports[`Search Page Component search results heading renders a generic message
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term false
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term false"
     name="title"
   />
   <Meta
@@ -686,10 +686,10 @@ exports[`Search Page Component search results heading renders a specific message
     </section>
   </div>
   <Title>
-    Search Term - Venia Search
+    undefined's Search Result for term Search Term
   </Title>
   <Meta
-    content="Search Term - Venia Search"
+    content="undefined's Search Result for term Search Term"
     name="title"
   />
   <Meta
@@ -757,10 +757,10 @@ exports[`Search Page Component search results renders if data has items 1`] = `
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -814,10 +814,10 @@ exports[`Search Page Component sort button/container does not render if total co
     </div>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -918,10 +918,10 @@ exports[`Search Page Component sort button/container renders when total count >
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -975,10 +975,10 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
     </div>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta
@@ -1079,10 +1079,10 @@ exports[`Search Page Component total count renders results from data 1`] = `
     </section>
   </div>
   <Title>
-    Venia Search
+    undefined's Search Result for term undefined
   </Title>
   <Meta
-    content="Venia Search"
+    content="undefined's Search Result for term undefined"
     name="title"
   />
   <Meta

package/lib/components/SearchPage/searchPage.js

@@ -1,7 +1,6 @@
 import React, { Fragment, Suspense, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { shape, string } from 'prop-types';
-
 import { useSearchPage } from '@magento/peregrine/lib/talons/SearchPage/useSearchPage';
 
 import { useStyle } from '../../classify';
@@ -34,11 +33,14 @@ const SearchPage = props => {
         pageControl,
         searchCategory,
         searchTerm,
-        sortProps
+        sortProps,
+        currentStoreName
     } = talonProps;
 
     const { formatMessage } = useIntl();
+
     const [currentSort] = sortProps;
+    const metaTitle = `${currentStoreName}'s Search Result for term ${searchTerm}`;
     const content = useMemo(() => {
         if (!data && loading) {
             return (
@@ -216,8 +218,8 @@ const SearchPage = props => {
                 {content}
                 <Suspense fallback={null}>{maybeFilterModal}</Suspense>
             </div>
-            <Title>{metaLabel}</Title>
-            <Meta name="title" content={metaLabel} />
+            <Title>{metaTitle}</Title>
+            <Meta name="title" content={metaTitle} />
             <Meta name="description" content={metaLabel} />
         </article>
     );