7bcb57b89e
* resolve TagAddButton a11y better comments to document tagindex reasoning * resolved a11y for TagsSelectedButton allow focus to TagsSelectedButton with Shift+Tab and Enter or Space to show popover * safely ignore a11y warning as container for interactables is not itself interactable * Update CONTRIBUTORS * quick fix syntax * quick fix syntax * quick fix syntax * quick fix syntax * resolved a11y in accordance with ARIA APG Disclure pattern * resolved a11y ideally should replace with with a11y-click-events-have-key-events is explicitly ignored as the alternative (adding ) seems more clunky * resolved SpinBox a11y cannot focus on these buttons, so no key event handling needed (keyboard editting already possible by just typing in the field) widget already properly follows ARIA APG Spinbutton pattern * cleanup * onEnterOrSpace() function implemented as discussed in #2787 and #2564 * quick syntax and such changes
70 lines
1.8 KiB
Svelte
70 lines
1.8 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import * as tr from "@tslib/ftl";
|
|
import { onEnterOrSpace } from "@tslib/keys";
|
|
import { slide } from "svelte/transition";
|
|
|
|
import Badge from "../components/Badge.svelte";
|
|
import { minusIcon, plusIcon } from "./icons";
|
|
import { MapContext } from "./lib";
|
|
|
|
export let unused: string[];
|
|
export let ctx: MapContext;
|
|
|
|
let unusedMsg: string;
|
|
$: unusedMsg =
|
|
ctx === MapContext.Field
|
|
? tr.changeNotetypeWillDiscardContent()
|
|
: tr.changeNotetypeWillDiscardCards();
|
|
|
|
const maxItems: number = 3;
|
|
let collapsed: boolean = true;
|
|
$: collapseMsg = collapsed
|
|
? tr.changeNotetypeExpand()
|
|
: tr.changeNotetypeCollapse();
|
|
$: icon = collapsed ? plusIcon : minusIcon;
|
|
</script>
|
|
|
|
<div class="alert alert-warning" in:slide out:slide>
|
|
{#if unused.length > maxItems}
|
|
<div
|
|
class="clickable"
|
|
on:click={() => (collapsed = !collapsed)}
|
|
on:keydown={onEnterOrSpace(() => (collapsed = !collapsed))}
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded={!collapsed}
|
|
>
|
|
<Badge iconSize={80}>
|
|
{@html icon}
|
|
</Badge>
|
|
{collapseMsg}
|
|
</div>
|
|
{/if}
|
|
{unusedMsg}
|
|
{#if collapsed}
|
|
<div>
|
|
{unused.slice(0, maxItems).join(", ")}
|
|
{#if unused.length > maxItems}
|
|
... (+{unused.length - maxItems})
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<ul>
|
|
{#each unused as entry}
|
|
<li>{entry}</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.clickable {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|