dnrops
/
anki
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix remaining accessibility warnings (#3241) 

* Remove unused build var

* Fix accessibility warnings in CollapseLabel

* Fix accessibility warnings in PlainTextBadge

* Add ARIA role to Autocompleteitem

* Fix accessibility warnings in HandleBackground

* Fix accessibility warnings in HandleControl

* Fix accessibility warnings in EditorField

* Fix accessibility warnings in RichTextBadge

* Fix accessibility warnings in StickyBadge

* Remove ignored a11y warnings
This commit is contained in:
Abdo 2024-07-10 15:55:08 +03:00 committed by GitHub
parent 486cc8a2ab
commit d108bff862
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
build/ninja_gen/src/node.rs
View File

@ -223,18 +223,6 @@ impl BuildAction for SvelteCheck {
build.add_inputs("yarn", inputs![":yarn:bin"]);
build.add_inputs("", &self.inputs);
build.add_inputs("", inputs!["yarn.lock"]);
build.add_variable(
"compiler_warnings",
[
"a11y-click-events-have-key-events",
"a11y-no-noninteractive-tabindex",
"a11y-no-static-element-interactions",
]
.iter()
.map(|warning| format!("{}$:ignore", warning))
.collect::<Vec<_>>()
.join(","),
);
let hash = simple_hash(&self.tsconfig);
build.add_output_stamp(format!("tests/svelte-check.{hash}"));
}

4
package.json
View File

@ -9,8 +9,8 @@
"dev": "cd ts && vite dev",
"build": "cd ts && vite build",
"preview": "cd ts && vite preview",
"svelte-check:once": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning --compiler-warnings a11y-click-events-have-key-events:ignore,a11y-no-noninteractive-tabindex:ignore,a11y-no-static-element-interactions:ignore",
"svelte-check": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch --compiler-warnings a11y-click-events-have-key-events:ignore,a11y-no-noninteractive-tabindex:ignore,a11y-no-static-element-interactions:ignore",
"svelte-check:once": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
"svelte-check": "cd ts && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"vitest:once": "cd ts && vitest run",
"vitest": "cd ts && vitest"
},

11
ts/editor/CollapseLabel.svelte
View File

@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { createEventDispatcher } from "svelte";
import CollapseBadge from "./CollapseBadge.svelte";
import { onEnterOrSpace } from "@tslib/keys";
export let collapsed: boolean;
export let tooltip: string;
@ -17,7 +18,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</script>
<span class="collapse-label" title={tooltip} on:click|stopPropagation={toggle}>
<span
class="collapse-label"
title={tooltip}
on:click|stopPropagation={toggle}
on:keydown={onEnterOrSpace(() => toggle())}
tabindex="-1"
role="button"
aria-expanded={!collapsed}
>
<CollapseBadge {collapsed} />
<slot />
</span>

8
ts/editor/EditorField.svelte
View File

@ -89,7 +89,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onDestroy(() => api?.destroy());
</script>
<div class="field-container" class:hide={field.hidden} on:mouseenter on:mouseleave>
<div
class="field-container"
class:hide={field.hidden}
on:mouseenter
on:mouseleave
role="presentation"
>
<slot name="field-label" />
<Collapsible collapse={collapsed} let:collapsed={hidden}>

2
ts/editor/HandleBackground.svelte
View File

@ -11,6 +11,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
title={tooltip}
on:mousedown|preventDefault
on:dblclick
tabindex="-1"
role="button"
/>
<style lang="scss">

10
ts/editor/HandleControl.svelte
View File

@ -30,6 +30,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:nightMode={$pageTheme.isDark}
class="bordered"
on:mousedown|preventDefault
tabindex="-1"
role="button"
/>
<div
class:nightMode={$pageTheme.isDark}
@ -38,6 +40,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mousedown|preventDefault
on:pointerdown={onPointerdown(true, true)}
on:pointermove
tabindex="-1"
role="button"
/>
<div
class:nightMode={$pageTheme.isDark}
@ -46,6 +50,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mousedown|preventDefault
on:pointerdown={onPointerdown(true, false)}
on:pointermove
tabindex="-1"
role="button"
/>
<div
class:nightMode={$pageTheme.isDark}
@ -54,6 +60,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mousedown|preventDefault
on:pointerdown={onPointerdown(false, true)}
on:pointermove
tabindex="-1"
role="button"
/>
<div
class:nightMode={$pageTheme.isDark}
@ -62,6 +70,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mousedown|preventDefault
on:pointerdown={onPointerdown(false, false)}
on:pointermove
tabindex="-1"
role="button"
/>
</div>

4
ts/editor/PlainTextBadge.svelte
View File

@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts">
import * as tr from "@generated/ftl";
import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
import { onEnterOrSpace } from "@tslib/keys";
import { createEventDispatcher, onDestroy } from "svelte";
import Badge from "$lib/components/Badge.svelte";
@ -40,6 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:visible={show || !animated}
class:highlighted={!off}
on:click|stopPropagation={toggle}
on:keydown={onEnterOrSpace(() => toggle())}
tabindex="-1"
role="button"
>
<Badge
tooltip="{tr.editingToggleHtmlEditor()} ({getPlatformString(keyCombination)})"

4
ts/editor/RichTextBadge.svelte
View File

@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts">
import * as tr from "@generated/ftl";
import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
import { onEnterOrSpace } from "@tslib/keys";
import { createEventDispatcher, onDestroy } from "svelte";
import Badge from "$lib/components/Badge.svelte";
@ -40,6 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:visible={show || !animated}
class:highlighted={!off}
on:click|stopPropagation={toggle}
on:keydown={onEnterOrSpace(() => toggle())}
tabindex="-1"
role="button"
>
<Badge
tooltip="{tr.editingToggleVisualEditor()} ({getPlatformString(keyCombination)})"

4
ts/editor/StickyBadge.svelte
View File

@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "@generated/ftl";
import { bridgeCommand } from "@tslib/bridgecommand";
import { getPlatformString, registerShortcut } from "@tslib/shortcuts";
import { onEnterOrSpace } from "@tslib/keys";
import { onMount } from "svelte";
import Badge from "$lib/components/Badge.svelte";
@ -43,6 +44,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:highlighted={active}
class:visible={show || !animated}
on:click|stopPropagation={toggle}
on:keydown={onEnterOrSpace(() => toggle())}
tabindex="-1"
role="button"
>
<Badge
tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"

1
ts/lib/tag-editor/AutocompleteItem.svelte
View File

@ -30,6 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mouseup
on:mouseenter
on:mouseleave
role="button"
>
<slot />
</div>