public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #103 from myrdn/main

Browse Source 
Accessibility : Add keyboard control using html buttons
This commit is contained in:
Vadim
2022-05-04 22:31:01 +03:00
committed by GitHub
parent 4aa7a4eebc f6b6064954
commit bfa295eb81
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Arrow/Arrow.svelte
View File

@@ -12,7 +12,7 @@
export let disabled = false export let disabled = false
</script> </script>
<div <button
class="sc-carousel-arrow__circle" class="sc-carousel-arrow__circle"
class:sc-carousel-arrow__circle_disabled={disabled} class:sc-carousel-arrow__circle_disabled={disabled}
on:click on:click
@@ -22,7 +22,7 @@
class:sc-carousel-arrow__arrow-next={direction === NEXT} class:sc-carousel-arrow__arrow-next={direction === NEXT}
class:sc-carousel-arrow__arrow-prev={direction === PREV} class:sc-carousel-arrow__arrow-prev={direction === PREV}
></i> ></i>
</div> </button>
<style> <style>
:root { :root {
@@ -61,4 +61,4 @@
.sc-carousel-arrow__circle_disabled:hover { .sc-carousel-arrow__circle_disabled:hover {
opacity: 0.5; opacity: 0.5;
} }
</style> </style>

15
src/components/Dot/Dot.svelte
View File

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