9a301665a4
* 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 * I think this is the main keyboard handling of Select Still need to fix focus and handle roles and attributes * fixed the keyboard interaction focus is janky because you need to wait until after the listed options load and for some reason that needs a tiny delay on onMount I think this technically violates a11y, but it really doesn't since the delay is literally zero. But the code still needs it to happen. * Select and SelectOption reference the same focus function * SelectOption moved inside Select + started roles and a11y * quick syntax and such changes * finish handling roles and attributes * fixed keyboard handling and only visual focus * cleanup and slight refactoring * fixed syntax * what even is this? * bug fixes + revert key selection * fixed scrolling * better control scrolling and focus * Adjusted selection Up/Down Arrows: start selection on active option Enter/Space/Click: no initial selection, down arrow to first option, up arrow to last option * Only set selected the first time Select is opened, all subsequent times use the previous selected
37 lines
946 B
Svelte
37 lines
946 B
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 Col from "../components/Col.svelte";
|
|
import Row from "../components/Row.svelte";
|
|
import Select from "../components/Select.svelte";
|
|
import type { ColumnOption } from "./lib";
|
|
|
|
let rowLabel: string;
|
|
export { rowLabel as label };
|
|
|
|
export let columnOptions: ColumnOption[];
|
|
export let value: number;
|
|
|
|
$: label = columnOptions.find((o) => o.value === value)?.label;
|
|
</script>
|
|
|
|
<Row --cols={2}>
|
|
<Col --col-size={1}>
|
|
{rowLabel}
|
|
</Col>
|
|
<Col --col-size={1}>
|
|
<Select
|
|
bind:value
|
|
{label}
|
|
list={columnOptions}
|
|
parser={(item) => ({
|
|
content: item.label,
|
|
value: item.value,
|
|
disabled: item.disabled,
|
|
})}
|
|
/>
|
|
</Col>
|
|
</Row>
|