Merge pull request #108 from vadimkorr/feature/#101_Keyboard-control

#101 Keyboard control

Author: vadimkorr

src/components/Arrow/Arrow.svelte

@@ -12,8 +12,8 @@
   export let disabled = false
 </script>
 
-<div
-  class="sc-carousel-arrow__circle"
+<button
+  class="sc-carousel-button 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>
+</style>

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>

src/components/Dot/Dot.svelte

@@ -5,18 +5,19 @@
   export let active = false
 </script>
 
-<div
-  class="sc-carousel-dot__dot"
+<button
+  class="sc-carousel-button sc-carousel-dot__dot"
   class:sc-carousel-dot__dot_active={active}
   on:click
-></div>
+></button>
 
 <style>
   :root {
     --sc-dot-size: 6px;
     --sc-active-dot-size: 8px;
     --sc-dot-size-animation-time: 250ms;
   }
+
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;