From dfcc3f9f7ac7f04b19497c3cb78b1af9de92a13b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 14 Feb 2020 10:13:20 +0100
Subject: [PATCH] Carousel: Create a bigger hover/click area for controls

---
 src/organisms/Carousel.svelte        | 32 ++++++++++++-------------
 src/style/atoms/_button-control.scss | 16 ++++++-------
 src/style/organisms/_carousel.scss   | 36 ++++++++++++++++++----------
 3 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 7b0a15c..1899a23 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -20,12 +20,15 @@
         // Hover function
         hover = event => {
             const to = event.currentTarget.dataset.to
+            const button = event.currentTarget.querySelector('button')
             const photoActive = document.querySelector('.gallery .active')
             const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
             if (event.type === 'mouseenter') {
                 photoToHover.classList.add('hover')
+                button.focus()
             } else {
                 photoToHover.classList.remove('hover')
+                button.blur()
             }
         }
 
@@ -62,22 +65,19 @@
             </div>
 
             <div class="carousel__controls">
-                <button class="button-control button-control--white dir-left" data-to="prev" aria-label="Previous"
-                    on:click={photoPrev}
-                    on:mouseenter={hover}
-                    on:mouseleave={hover}
-                >
-                    <IconArrow direction="left" color="#ff6c89" className="icon" />
-                    <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
-                </button>
-                <button class="button-control button-control--white dir-right" data-to="next" aria-label="Next"
-                    on:mouseenter={hover}
-                    on:mouseleave={hover}
-                    on:click={photoNext}
-                >
-                    <IconArrow direction="right" color="#ff6c89" className="icon" />
-                    <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
-                </button>
+                <div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={photoPrev}>
+                    <button class="button-control button-control--white dir-left" aria-label="Previous">
+                        <IconArrow direction="left" color="#ff6c89" className="icon" />
+                        <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
+                    </button>
+                </div>
+
+                <div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={photoNext}>
+                    <button class="button-control button-control--white dir-right" aria-label="Next">
+                        <IconArrow direction="right" color="#ff6c89" className="icon" />
+                        <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
+                    </button>
+                </div>
             </div>
 
             {#if viewer}
diff --git a/src/style/atoms/_button-control.scss b/src/style/atoms/_button-control.scss
index c80f7cc..edfdaec 100644
--- a/src/style/atoms/_button-control.scss
+++ b/src/style/atoms/_button-control.scss
@@ -46,21 +46,21 @@
     &--white {
         background-color: #fff;
 
-        &:hover {
+        &:hover, &:focus {
             background-color: $color-secondary;
         }
     }
     &--pink {
         background-color: rgba($color-secondary, 0.4);
 
-        &:hover {
+        &:hover, &:focus {
             background-color: rgba($color-secondary, 0.75);
         }
     }
     &--gray {
         background-color: $color-gray;
 
-        &:hover {
+        &:hover, &:focus {
             background-color: $color-text;
         }
     }
@@ -75,7 +75,7 @@
             transform: translate3d(100%, -50%, 0);
         }
 
-        &:hover {
+        &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
                 transform: translate3d(-100%, 0, 0);
@@ -92,7 +92,7 @@
             transform: translate3d(-150%, -50%, 0);
         }
 
-        &:hover {
+        &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
                 transform: translate3d(100%, 0, 0);
@@ -110,7 +110,7 @@
             transform: translate3d(0, -150%, 0);
         }
 
-        &:hover {
+        &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
                 transform: translate3d(0, 100%, 0);
@@ -128,7 +128,7 @@
             transform: translate3d(0, 150%, 0);
         }
 
-        &:hover {
+        &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
                 transform: translate3d(0, -100%, 0);
@@ -178,7 +178,7 @@
         }
 
         // Hover
-        &:hover {
+        &:hover, &:focus {
             background-color: rgba($color-lightpurple, 0.65);
 
             * {
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index 453e3dd..6315a07 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -29,7 +29,7 @@
         &__images {
             position: relative;
             height: 0;
-            padding-bottom: calc(100% / 1.5);
+            padding-bottom: calc(100% / 1.5); // Ratio 3.2
 
             // Photo
             &--photo {
@@ -118,25 +118,35 @@
         display: none;
 
         @include breakpoint (sm) {
+            position: absolute;
+            z-index: 11;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
             display: flex;
             justify-content: space-between;
-            pointer-events: none;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 100%;
-            z-index: 11;
+        }
 
-            .dir-left {
-                transform: translateX(-50%);
+        // Hover and clicking area
+        &--area {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 12%;
+            height: 100%;
+            cursor: pointer;
+
+            &.prev {
+                margin-left: -6%;
             }
-            .dir-right {
-                transform: translateX(50%);
+            &.next {
+                margin-right: -6%;
             }
         }
 
-        a {
-            box-shadow: 0 2px 21px rgba(#000, 0.15);
+        button {
+            box-shadow: 0 2px 20px rgba(#000, 0.15);
         }
     }