From 573c2b0779f9ee6f87ce7e451d790081aee00ac1 Mon Sep 17 00:00:00 2001
From: Myrdin <myrdin@clic2000.fr>
Date: Mon, 28 Mar 2022 19:28:15 +0200
Subject: [PATCH 1/5] Change div to button for arrows

---
 src/components/Arrow/Arrow.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index b11105d..610b0d7 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -12,7 +12,7 @@
   export let disabled = false
 </script>
 
-<div
+<button
   class="sc-carousel-arrow__circle"
   class:sc-carousel-arrow__circle_disabled={disabled}
   on:click
@@ -22,7 +22,7 @@
     class:sc-carousel-arrow__arrow-next={direction === NEXT}
     class:sc-carousel-arrow__arrow-prev={direction === PREV}
   ></i>
-</div>
+</button>
 
 <style>
   :root {
@@ -61,4 +61,4 @@
   .sc-carousel-arrow__circle_disabled:hover {
     opacity: 0.5;
   }
-</style>
\ No newline at end of file
+</style>

From 3aea594f28f69dffba10745e8d93c54f97caadc1 Mon Sep 17 00:00:00 2001
From: Myrdin <myrdin@clic2000.fr>
Date: Mon, 28 Mar 2022 19:29:18 +0200
Subject: [PATCH 2/5] Change div to button for dot

---
 src/components/Dot/Dot.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 5b63830..09e9958 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -5,11 +5,11 @@
   export let active = false
 </script>
 
-<div
+<button
   class="sc-carousel-dot__dot"
   class:sc-carousel-dot__dot_active={active}
   on:click
-></div>
+></button>
 
 <style>
   :root {

From 290e9cb9a7a889c9579eb39f2ecf896b10f5bc6c Mon Sep 17 00:00:00 2001
From: Myrdin <myrdin@clic2000.fr>
Date: Mon, 28 Mar 2022 19:30:18 +0200
Subject: [PATCH 3/5] Reset button styles

---
 src/components/Dot/Dot.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 09e9958..d7a1893 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -17,6 +17,12 @@
     --sc-active-dot-size: 8px;
     --sc-dot-size-animation-time: 250ms;
   }
+
+  button {
+    all: unset;
+    cursor: pointer;
+  }
+
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;

From f6b6064954af29779690b85d70fc18887f1ad766 Mon Sep 17 00:00:00 2001
From: Myrdin <myrdin@clic2000.fr>
Date: Mon, 28 Mar 2022 19:31:39 +0200
Subject: [PATCH 4/5] Add outline on focus

---
 src/components/Dot/Dot.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index d7a1893..0d34c7b 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -23,6 +23,11 @@
     cursor: pointer;
   }
 
+  button:focus {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;

From c6679b52e7e7082aa0d2f77a12d1d20f738e7c8d Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 4 May 2022 22:51:50 +0300
Subject: [PATCH 5/5] #101 : Update button styles

---
 src/components/Arrow/Arrow.svelte       |  2 +-
 src/components/Carousel/Carousel.svelte |  7 +++++++
 src/components/Dot/Dot.svelte           | 12 +-----------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index 610b0d7..f4ec94b 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <button
-  class="sc-carousel-arrow__circle"
+  class="sc-carousel-button sc-carousel-arrow__circle"
   class:sc-carousel-arrow__circle_disabled={disabled}
   on:click
 >
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index fe07283..5b7fb3b 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -368,4 +368,11 @@
     position: absolute;
     bottom: 0;
   }
+  :global(.sc-carousel-button) {
+    all: unset;
+    cursor: pointer;
+  }
+  :global(.sc-carousel-button:focus) {
+    outline: 5px auto;
+  }
 </style>
diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 0d34c7b..f15a8fa 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <button
-  class="sc-carousel-dot__dot"
+  class="sc-carousel-button sc-carousel-dot__dot"
   class:sc-carousel-dot__dot_active={active}
   on:click
 ></button>
@@ -18,16 +18,6 @@
     --sc-dot-size-animation-time: 250ms;
   }
 
-  button {
-    all: unset;
-    cursor: pointer;
-  }
-
-  button:focus {
-    outline: 1px dotted #212121;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;