From 10cb32f8a8991d701101b3e74799c251b4b10475 Mon Sep 17 00:00:00 2001
From: "Mark J. Becker" <herzog31@users.noreply.github.com>
Date: Mon, 23 Aug 2021 11:57:25 +0200
Subject: [PATCH] CIF-2279 - Improve accessibility of carousel components

---
 .../commerce/carousel/v1/carousel/card.html      |  2 +-
 .../commerce/carousel/v1/carousel/carousel.html  |  4 ++--
 .../v1/carousel/clientlibs/css/carousel.css      | 10 +++++++++-
 .../v1/categorycarousel/card.html                |  2 +-
 .../clientlibs/css/productcarousel.css           | 10 +++++++++-
 .../v1/productcarousel/productcard.html          |  5 ++---
 .../components/commerce/carousel/carouselTest.js | 16 ++++++++--------
 7 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/card.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/card.html
index 6f84568030..f88bee7a77 100644
--- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/card.html
+++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/card.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <template data-sly-template.card="${@ item}">
-    <div role="displaycard" class="card carousel__card">
+    <div class="card carousel__card">
         <div>${item}</div>
     </div>
 </template>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/carousel.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/carousel.html
index 30ba183074..a8596d201d 100644
--- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/carousel.html
+++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/carousel.html
@@ -17,7 +17,8 @@
 <sly data-sly-test.type="${componentType ? componentType : 'carousel'}" />
 <div id="${carousel.id}" data-comp-is="${type}" class="${type}__container" data-cmp-data-layer="${carousel.data.json}">
     <h2 data-sly-element="${carousel.titleType}" data-sly-test="${properties.jcr:title}" class="${type}__title">${properties.jcr:title}</h2>
-    <button data-carousel-action='prev' class="${type}__btn ${type}__btn--prev" type="button" style="display: none;"></button>
+    <button data-carousel-action='prev' class="${type}__btn ${type}__btn--prev" type="button" title="${'Show previous' @ i18n}" aria-label="${'Show previous' @ i18n}" style="display: none;"></button>
+    <button data-carousel-action='next' class="${type}__btn ${type}__btn--next" type="button" title="${'Show next' @ i18n}" aria-label="${'Show next' @ i18n}" style="display: none;"></button>
     <div class="${type == 'carousel' ? '{0}__cardsroot' : '{0}__root' @ format=[type]}">
         <div class="${type}__parent">
             <div class="${type}__cardscontainer" data-sly-list.item="${items ? items : carousel.items}">
@@ -25,6 +26,5 @@ <h2 data-sly-element="${carousel.titleType}" data-sly-test="${properties.jcr:tit
             </div>
         </div>
     </div>
-    <button data-carousel-action='next' class="${type}__btn ${type}__btn--next" type="button" style="display: none;"></button>
 </div>
 </template>
diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css/carousel.css b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css/carousel.css
index bd4a0603e5..144f7cd42e 100644
--- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css/carousel.css
+++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css/carousel.css
@@ -22,7 +22,15 @@
     position: absolute;
     top: 50%;
     width: 20px;
-    color: dimgrey;
+    border-color: dimgrey;
+}
+
+.carousel__btn:focus-visible {
+    border-color: black;
+}
+
+.carousel__btn:disabled {
+    border-color: lightgrey;
 }
 
 .carousel__btn--next {
diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/categorycarousel/v1/categorycarousel/card.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/categorycarousel/v1/categorycarousel/card.html
index a50dbc0d7b..e022179a89 100644
--- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/categorycarousel/v1/categorycarousel/card.html
+++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/categorycarousel/v1/categorycarousel/card.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <template data-sly-template.card="${@ item}">
-    <div role="displaycard" class="card carousel__card categorycarousel__card">
+    <div class="card carousel__card categorycarousel__card">
         <a class="categorycarousel__anchor" href="${item.path}">
             <span data-sly-test.hasImage=${item.image} class="categorycarousel__imagewrapper" style="background-image: url(${item.image @context='uri'});">
                 <img class="categorycarousel__image" src='${item.image}' alt="${item.name}">
diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css/productcarousel.css b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css/productcarousel.css
index 446f8ede5a..c913e0ec37 100644
--- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css/productcarousel.css
+++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css/productcarousel.css
@@ -34,7 +34,15 @@
     position: absolute;
     top: 50%;
     width: 20px;
-    color: dimgrey;
+    border-color: dimgrey;
+}
+
+.productcarousel__btn:focus-visible {
+    border-color: black;
+}
+
+.productcarousel__btn:disabled {
+    border-color: lightgrey;
 }
 
 .productcarousel__btn--next {
diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/productcard.html b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/productcard.html
index 38c1c13542..fe1bd99831 100644
--- a/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/productcard.html
+++ b/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/productcard.html
@@ -12,14 +12,13 @@
   ~
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
   <template data-sly-template.productcard="${@ product}">
-      <div role="displaycard"
-           data-product-sku="${product.commerceIdentifier.value}"
+      <div data-product-sku="${product.commerceIdentifier.value}"
            id="${product.id}"
            data-cmp-data-layer="${product.data.json}"
            class="card product__card">
           <a href="${product.URL}">
               <div class="product__card__image">
-                  <img class="product__image" src="${product.imageURL}" alt="${product.imageAlt}" data-gallery-role="currentimage"/>
+                  <img class="product__image" src="${product.imageURL}" alt="${product.imageAlt}" />
               </div>
               <div>${product.Title}</div>
               <sly data-sly-use.template="core/cif/components/commons/v1/price.html"
diff --git a/ui.apps/test/components/commerce/carousel/carouselTest.js b/ui.apps/test/components/commerce/carousel/carouselTest.js
index 332ee1df82..a1d91a3717 100644
--- a/ui.apps/test/components/commerce/carousel/carouselTest.js
+++ b/ui.apps/test/components/commerce/carousel/carouselTest.js
@@ -32,32 +32,32 @@ describe('Carousel', () => {
                 <div class="carousel aem-GridColumn aem-GridColumn--default--12">
                     <div data-comp-is="carousel" class="carousel__container">
                         <h2 class="carousel__title">Shop by category</h2>
-                        <button data-carousel-action="prev" class="carousel__btn carousel__btn--prev" type="button" style="display: block;"disabled=""></button>
+                        <button data-carousel-action="prev" class="carousel__btn carousel__btn--prev" type="button" title="Show previous" aria-label="Show previous" style="display: block;"disabled=""></button>
+                        <button data-carousel-action="next" class="carousel__btn carousel__btn--next" type="button" title="Show next" aria-label="Show next" style="display: block;"></button>
                         <div class="carousel__cardsroot">
                             <div class="carousel__parent">
                                 <div class="carousel__cardscontainer" style="width: 1440px; transition: margin-left 300ms linear 0ms; margin-left: 0px;">
-                                    <div role="displaycard" class="card carousel__card">
+                                    <div class="card carousel__card">
                                         <div>Card 1</div>
                                     </div>
-                                    <div role="displaycard" class="card carousel__card">
+                                    <div class="card carousel__card">
                                         <div>Card 2</div>
                                     </div>
-                                    <div role="displaycard" class="card carousel__card">
+                                    <div class="card carousel__card">
                                         <div>Card 3</div>
                                     </div>
-                                    <div role="displaycard" class="card carousel__card">
+                                    <div class="card carousel__card">
                                         <div>Card 4</div>
                                     </div>
-                                    <div role="displaycard" class="card carousel__card">
+                                    <div class="card carousel__card">
                                         <div>Card 5</div>
                                     </div>
-                                    <div role="displaycard" class="card carousel__card">
+                                    <div class="card carousel__card">
                                         <div>Card 6</div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <button data-carousel-action="next" class="carousel__btn carousel__btn--next" type="button" style="display: block;"></button>
                     </div>
                 </div>
                 `