[READ-ONLY] Mirror of https://github.com/probablykasper/kadium. App for staying ontop of YouTube channels' uploads
kadium.kasper.space
linux
macos
notifications
tauri
windows
youtube
Fix a11y warnings
+18
-21
+1
src/lib/Modal.svelte
+1
src/lib/Modal.svelte
+7
-12
src/lib/Switch.svelte
+7
-12
src/lib/Switch.svelte
···
4
4
export let checked = false
5
5
export let offColor = 'hsl(220, 20%, 31%)'
6
6
export let onColor = 'hsl(220, 100%, 52%)'
7
+
export let id: string
7
8
$: color = checked ? onColor : offColor
8
9
9
10
function keydown(e: KeyboardEvent) {
···
14
15
</script>
15
16
16
17
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
17
-
<div class="switch" class:checked tabindex="0" on:keydown={keydown}>
18
-
<input class="hidden" type="checkbox" bind:checked />
19
-
<div
20
-
class="box"
21
-
style:background-color={color}
22
-
style:border-color={color}
23
-
on:click={() => (checked = !checked)}
24
-
tabindex="-1"
25
-
on:keydown={keydown}
26
-
>
18
+
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
19
+
<label class="switch" class:checked tabindex="0" on:keydown={keydown}>
20
+
<input class="hidden" type="checkbox" bind:checked {id} />
21
+
<div class="box" style:background-color={color} style:border-color={color}>
27
22
<div class="handle" />
28
23
</div>
29
-
</div>
24
+
</label>
30
25
31
26
<style lang="sass">
32
27
.hidden
···
42
37
border: 1px solid
43
38
transition: 200ms cubic-bezier(.4,0,.2,1)
44
39
transition-property: background-color, border-color, box-shadow
45
-
.switch:focus .box
40
+
.switch:focus-visible .box
46
41
// box-shadow: 0px 0px 2px 0px onColor
47
42
border-color: hsla(220, 100%, 50%, 1)
48
43
box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
+1
-1
src/lib/data.ts
+1
-1
src/lib/data.ts
+4
-8
src/modals/Settings.svelte
+4
-8
src/modals/Settings.svelte
···
46
46
</p>
47
47
<input class="textbox" type="text" bind:value={apiKey} placeholder="AIzaSyNq5Y9knL..." />
48
48
<div class="toggle-row">
49
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
50
-
<p on:click={() => (checkInBackground = !checkInBackground)}>
51
-
Check for new videos automatically
52
-
</p>
53
-
<Switch bind:checked={checkInBackground} />
49
+
<label for="check-in-background">
50
+
<p>Check for new videos automatically</p>
51
+
</label>
52
+
<Switch id="check-in-background" bind:checked={checkInBackground} />
54
53
</div>
55
54
<div class="buttons">
56
55
<Button secondary on:click={() => (visible = false)}>Cancel</Button>
···
157
156
align-items: center
158
157
justify-content: space-between
159
158
margin-bottom: 15px
160
-
p
161
-
user-select: none
162
-
cursor: default
163
159
.buttons
164
160
margin-top: 20px
165
161
display: flex
+3
src/routes/Videos.svelte
+3
src/routes/Videos.svelte
···
265
265
<div class="grid" bind:this={grid}>
266
266
{#each videos as video, i}
267
267
<!-- svelte-ignore a11y-click-events-have-key-events -->
268
+
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
268
269
<div
269
270
class="box"
270
271
class:selected={selectionVisible && i === selectedIndex}
···
274
275
on:click={(e) => videoClick(e, i)}
275
276
draggable="true"
276
277
on:dragstart={(e) => dragStartVideo(e, video)}
278
+
role="listitem"
277
279
>
278
280
<div class="img-box">
279
281
<div class="img-parent">
280
282
<img src="https://i.ytimg.com/vi/{video.id}/hqdefault.jpg" alt="" draggable="false" />
281
283
</div>
282
284
</div>
285
+
<!-- svelte-ignore a11y-no-static-element-interactions -->
283
286
<div
284
287
class="archive"
285
288
on:click={() => archiveToggleClick(video.id, video.archived)}