BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt…

packages/pagebuilder/lib/ContentTypes/Products/__tests__/products.spec.js

@@ -295,7 +295,7 @@ test('render carousel with default props and verify Slick is called correctly',
         autoplaySpeed: 4000,
         infinite: false,
         arrows: false,
-        dots: true,
+        dots: false,
         carouselMode: 'default',
         centerPadding: '60px'
     };
@@ -332,7 +332,7 @@ test('render carousel with default props and verify Slick is called correctly',
             infinite: false,
             draggable: false,
             arrows: false,
-            dots: true,
+            dots: false,
             slidesToShow: 5,
             slidesToScroll: 5,
             centerMode: false,
@@ -433,7 +433,7 @@ test('render carousel with continuous mode and verify Slick is called correctly'
         autoplaySpeed: 4000,
         infinite: true,
         arrows: false,
-        dots: true,
+        dots: false,
         carouselMode: 'continuous',
         centerPadding: '90px'
     };
@@ -445,7 +445,7 @@ test('render carousel with continuous mode and verify Slick is called correctly'
             autoplaySpeed: 4000,
             draggable: false,
             arrows: false,
-            dots: true,
+            dots: false,
             infinite: true,
             slidesToShow: 5,
             slidesToScroll: 5,
@@ -549,7 +549,7 @@ test('render carousel with infinite loop and verify Slick is called correctly',
         autoplaySpeed: 4000,
         infinite: true,
         arrows: false,
-        dots: true,
+        dots: false,
         carouselMode: 'default'
     };
     createTestInstance(<Products {...productProps} />);
@@ -561,7 +561,7 @@ test('render carousel with infinite loop and verify Slick is called correctly',
             draggable: false,
             infinite: true,
             arrows: false,
-            dots: true,
+            dots: false,
             slidesToShow: 5,
             slidesToScroll: 5,
             centerMode: false,
@@ -656,7 +656,7 @@ test('render carousel with continuous mode with 5 products and verify Slick is c
         autoplaySpeed: 4000,
         infinite: true,
         arrows: true,
-        dots: true,
+        dots: false,
         carouselMode: 'continuous',
         centerPadding: '90px'
     };
@@ -669,7 +669,7 @@ test('render carousel with continuous mode with 5 products and verify Slick is c
             draggable: false,
             infinite: false,
             arrows: true,
-            dots: true,
+            dots: false,
             slidesToShow: 5,
             slidesToScroll: 5,
             centerMode: false,
@@ -739,7 +739,7 @@ test('render carousel with continuous mode with 1 product and verify Slick is ca
         autoplaySpeed: 4000,
         infinite: true,
         arrows: false,
-        dots: true,
+        dots: false,
         carouselMode: 'continuous',
         centerPadding: '90px'
     };
@@ -751,7 +751,7 @@ test('render carousel with continuous mode with 1 product and verify Slick is ca
             autoplaySpeed: 4000,
             infinite: false,
             arrows: false,
-            dots: true,
+            dots: false,
             slidesToShow: 5,
             slidesToScroll: 5,
             centerMode: false,

packages/pagebuilder/lib/ContentTypes/Products/configAggregator.js

@@ -12,7 +12,7 @@ export default (node, props) => {
             autoplaySpeed: parseInt(node.getAttribute('data-autoplay-speed')),
             infinite: node.getAttribute('data-infinite-loop') === 'true',
             arrows: node.getAttribute('data-show-arrows') === 'true',
-            dots: node.getAttribute('data-show-dots') === 'true',
+            dots: node.getAttribute('data-show-dots') === 'false',
             carouselMode: node.getAttribute('data-carousel-mode'),
             centerPadding: node.getAttribute('data-center-padding')
         };

packages/pagebuilder/lib/ContentTypes/Slider/__tests__/configAggregator.spec.js

@@ -14,8 +14,8 @@ test('config is aggregated correctly for slider', () => {
             autoplaySpeed: 500,
             fade: true,
             infinite: true,
-            showArrows: true,
-            showDots: true
+            showArrows: false,
+            showDots: false
         })
     );
 });

packages/pagebuilder/lib/ContentTypes/Slider/__tests__/slider.spec.js

@@ -26,8 +26,8 @@ test('render slider with props and verify Slick is called correctly', () => {
         autoplaySpeed: 333,
         fade: true,
         infinite: true,
-        showArrows: true,
-        showDots: true
+        showArrows: false,
+        showDots: false
     };
     createTestInstance(<Slider {...sliderProps} />);
 
@@ -37,8 +37,8 @@ test('render slider with props and verify Slick is called correctly', () => {
             autoplaySpeed: 333,
             fade: true,
             infinite: true,
-            arrows: true,
-            dots: true
+            arrows: false,
+            dots: false
         }),
         expect.anything()
     );

packages/pagebuilder/lib/ContentTypes/Slider/configAggregator.js

@@ -8,8 +8,8 @@ export default node => {
         autoplay: node.getAttribute('data-autoplay') === 'true',
         fade: node.getAttribute('data-fade') === 'true',
         infinite: node.getAttribute('data-infinite-loop') === 'true',
-        showArrows: node.getAttribute('data-show-arrows') === 'true',
-        showDots: node.getAttribute('data-show-dots') === 'true',
+        showArrows: node.getAttribute('data-show-arrows') === 'false',
+        showDots: node.getAttribute('data-show-dots') === 'false',
         ...(!isNaN(autoplaySpeed) && { autoplaySpeed }),
         ...getAdvanced(node),
         ...getMediaQueries(node)

packages/pagebuilder/lib/ContentTypes/Slider/slider.js

@@ -74,6 +74,7 @@ const Slider = props => {
         paddingLeft
     };
     const jarallaxInstances = {};
+
     const sliderSettings = {
         dots: showDots,
         arrows: showArrows,
@@ -88,7 +89,6 @@ const Slider = props => {
         autoplaySpeed,
         fade
     };
-
     // Override classes on banner to ensure min height is respected
     Children.map(children, (child, index) => {
         if (child.props && child.props.data) {

packages/pagebuilder/lib/ContentTypes/Slider/slider.module.css

@@ -125,16 +125,6 @@
     display: none;
 }
 
-.root :global .slick-prev,
-.root :global .slick-next {
-    opacity: 0;
-    transition: 0.3s;
-}
-.root:hover :global .slick-prev,
-.root:hover :global .slick-next {
-    opacity: 1;
-}
-
 .root :global .slick-prev {
     left: 1.6rem;
 }
@@ -160,6 +150,7 @@
     font-size: 0;
     height: 40px;
     line-height: 0;
+    opacity: 1;
     outline: none;
     padding: 0;
     position: absolute;
@@ -169,6 +160,12 @@
     z-index: 101;
 }
 
+.root :global .slick-prev:focus-visible,
+.root :global .slick-next:focus-visible {
+    outline: auto;
+    outline: -webkit-focus-ring-color auto 1px;
+}
+
 .root :global .slick-dots {
     display: block;
     list-style: none;

packages/venia-ui/i18n/en_US.json

@@ -482,6 +482,13 @@
     "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
     "wishlist.loadMore": "Load More",
+    "LegacyMiniCart.buttonExpanded":"More Options Expanded",
+    "LegacyMiniCart.buttonCollapsed":"More Options Collapsed",
+    "global.deletedButton":"Item Deleted",
+    "password.hide":"Hide Password",
+    "password.View":"View Password",
+    "global.clearText":"Clear Text",
+    "global.close":"Close",
     "global.firstNameRequired":"First Name Required",
     "global.lastNameRequired":"Last Name Required",
     "global.emailRequired":"Email Required",

packages/venia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap

@@ -46,6 +46,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -91,6 +92,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -136,6 +138,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -183,13 +186,15 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
               className="passwordButton"
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -206,6 +211,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
                 className="content"
               >
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"
@@ -315,6 +321,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -360,6 +367,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -405,6 +413,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           />
         </span>
@@ -452,13 +461,15 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
               className="passwordButton"
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -475,6 +486,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
                 className="content"
               >
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"
@@ -542,13 +554,15 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
             className="before"
           />
           <span
+            aria-hidden="false"
             className="after"
           >
             <button
               className="passwordButton"
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
+              onKey={true}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
@@ -565,6 +579,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
                 className="content"
               >
                 <svg
+                  aria-label="View Password"
                   fill="none"
                   height={24}
                   stroke="currentColor"