BUG#AC-2485 No visual indication of focus on buttons. (pattern: Butto… (

#3962) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus) * BUG#AC-2485 No visual indication of focus on buttons. (pattern: Buttons lack indication of focus)
magento · Nov 17, 2022 · aeebbea · aeebbea
1 parent cd3a6da
commit aeebbea
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 39 deletions.
diff --git a/packages/venia-ui/lib/components/Checkout/section.module.css b/packages/venia-ui/lib/components/Checkout/section.module.css
@@ -5,7 +5,6 @@
     composes: w-full from global;
 
     composes: focus_bg-gradient-radial from global;
-    composes: focus_outline-none from global;
 }
 
 .content {

diff --git a/...enia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap b/...enia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap
@@ -240,11 +240,10 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
   <div
     className="thumbnailList"
   >
-    <span
-      aria-hidden="true"
+    <button
+      aria-label="Current Image"
       className="rootSelected"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
@@ -290,12 +289,11 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
-    <span
-      aria-hidden="true"
+    </button>
+    <button
+      aria-label="Next Image"
       className="root"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
@@ -341,12 +339,11 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
-    <span
-      aria-hidden="true"
+    </button>
+    <button
+      aria-label="Next Image"
       className="root"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
@@ -392,12 +389,11 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
-    <span
-      aria-hidden="true"
+    </button>
+    <button
+      aria-label="Next Image"
       className="root"
       onClick={[Function]}
-      role="button"
     >
       <div
         className="root container"
@@ -443,7 +439,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           width={135}
         />
       </div>
-    </span>
+    </button>
   </div>
 </div>
 `;
diff --git a/...nia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap b/...nia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap
@@ -1,11 +1,10 @@
 // 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"
@@ -51,15 +50,14 @@ 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"
@@ -105,15 +103,14 @@ 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"
@@ -136,5 +133,5 @@ exports[`renders transparent placeholder when no file name is provided 1`] = `
       style={Object {}}
     />
   </div>
-</span>
+</button>
 `;
diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/__tests__/thumbnail.spec.js b/packages/venia-ui/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');
 });
diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.js b/packages/venia-ui/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>
     );
 };
 

diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css b/packages/venia-ui/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;

diff --git a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css b/packages/venia-ui/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 {