melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve form accessibility

Browse Source
This commit is contained in:
mkelvers
2026-05-24 01:48:14 +02:00
parent bfb8cc0274
commit 065e3fd7d6
5 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/assets/style.css
View File

@@ -1,6 +1,4 @@
@import 'tailwindcss';
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap');
@import '@toolwind/anchors';
@source "../../templates/**/*.gohtml";

4
templates/base.gohtml
View File

@@ -3,6 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap">
{{/* page title injected from child template */}}
<title>MyAnimeList: {{template "title" .}}</title>
<link rel="manifest" href="/static/assets/manifest.json">

4
templates/components/filter_bar.gohtml
View File

@@ -30,7 +30,7 @@
<input type="hidden" name="sfw" value="{{.SFW}}" data-sfw-value>
{{range $g := .Genres}}<input type="hidden" name="genres" value="{{$g}}">{{end}}
<label class="flex cursor-pointer items-center gap-2">
<input type="checkbox" class="sr-only" {{if .SFW}}checked{{end}} onchange="this.form.querySelector('[data-sfw-value]').value = this.checked; const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
<input id="filter-sfw" type="checkbox" class="sr-only" {{if .SFW}}checked{{end}} onchange="this.form.querySelector('[data-sfw-value]').value = this.checked; const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
<div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if .SFW}}border-accent bg-accent{{else}}border-border bg-transparent{{end}}">
<svg class="{{if not .SFW}}hidden {{end}}h-3 w-3 text-on-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
</div>
@@ -57,7 +57,7 @@
{{$genreID := .MalID}}
{{$isSelected := hasGenre $genreID $selectedGenreIDs}}
<label class="flex cursor-pointer items-center gap-3 px-2 py-1.5 text-sm text-foreground-muted hover:bg-surface-hover hover:text-foreground">
<input type="checkbox" class="sr-only" name="genres" value="{{.MalID}}" {{if $isSelected}}checked{{end}} onchange="const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
<input id="genre-{{.MalID}}" type="checkbox" class="sr-only" name="genres" value="{{.MalID}}" {{if $isSelected}}checked{{end}} onchange="const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
<div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if $isSelected}}border-accent bg-accent{{else}}border-border bg-transparent{{end}}">
<svg class="{{if not $isSelected}}hidden {{end}}h-3 w-3 text-on-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
</div>

8
templates/components/video_player.gohtml
View File

@@ -78,14 +78,14 @@
<div class="flex items-center justify-between px-5 py-2.5">
<span class="text-[15px] font-medium text-foreground">Autoplay</span>
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" data-autoplay class="peer sr-only" checked />
<input id="player-autoplay" type="checkbox" data-autoplay class="peer sr-only" checked />
<div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-foreground-muted/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
</label>
</div>
<div class="flex items-center justify-between px-5 py-2.5">
<span class="text-[15px] font-medium text-foreground">Auto-skip</span>
<label class="relative inline-flex cursor-pointer items-center">
<input type="checkbox" data-autoskip class="peer sr-only" />
<input id="player-autoskip" type="checkbox" data-autoskip class="peer sr-only" />
<div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-foreground-muted/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
</label>
</div>
@@ -101,11 +101,11 @@
</button>
<div class="hidden px-5 py-2 flex flex-col gap-1">
<span class="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">Subtitles</span>
<select data-subtitle-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
<select id="player-subtitle-select" data-subtitle-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
</div>
<div class="hidden px-5 py-2 flex flex-col gap-1">
<span class="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">Quality</span>
<select data-quality-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
<select id="player-quality-select" data-quality-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
</div>
</div>
</div>

6
templates/watch.gohtml
View File

@@ -89,11 +89,11 @@
<div class="px-4 py-4 flex flex-col gap-4">
<div class="flex items-center gap-3">
<label class="text-xs text-foreground-muted w-12">Type</label>
<label for="segment-type-trigger" class="text-xs text-foreground-muted w-12">Type</label>
<input type="hidden" data-segment-type-value value="ed" />
<ui-dropdown class="relative block flex-1" data-align="left" data-width="w-full">
<div data-trigger>
<button type="button" data-segment-type-trigger class="w-full flex items-center justify-between px-3 py-2 bg-background-button border border-border text-sm text-foreground hover:bg-surface-hover transition-colors">
<button id="segment-type-trigger" type="button" data-segment-type-trigger class="w-full flex items-center justify-between px-3 py-2 bg-background-button border border-border text-sm text-foreground hover:bg-surface-hover transition-colors">
<span data-segment-type-label>Ending (ED)</span>
<svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
</button>
@@ -179,7 +179,7 @@
<div class="flex items-center justify-between">
<span class="text-sm font-normal text-foreground-muted">Episodes</span>
{{if gt $totalEpisodes 100}}
<input type="text" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 rounded border border-border text-foreground placeholder-foreground-muted focus:outline-none focus:border-accent" />
<input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 rounded border border-border text-foreground placeholder-foreground-muted focus:outline-none focus:border-accent" />
{{end}}
</div>