anki/ts/components
Ben Olson 9a301665a4
Improve keyboard handling and accessibility for Select.svelte and refactor (#2811)
* 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
2023-11-21 14:23:18 +10:00
..
Absolute.svelte Translate Editor entirely to Svelte (#1403) 2021-10-18 22:01:15 +10:00
BackendProgressIndicator.svelte Tooltips for CSV import and import page refactoring (#2655) 2023-09-14 09:06:15 +10:00
Badge.svelte Keep badge out of natural tab order 2023-10-14 10:20:14 +10:00
ButtonGroup.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
ButtonGroupItem.svelte Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
ButtonToolbar.svelte UI size tweaks (#2184) 2022-11-23 16:50:15 +10:00
CheckBox.svelte Experiment with disabling prettier whitespace sensitivity 2023-06-01 11:11:26 +10:00
Col.svelte Redesign deck options screen, swap tooltips for help modals (#2139) 2022-10-25 16:18:50 +10:00
Collapsible.svelte Fix CodeMirror not properly sized when opening editor (#2426) 2023-03-08 19:46:50 +10:00
ConfigInput.svelte Merging Notetypes on Import (#2612) 2023-09-09 09:00:55 +10:00
Container.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
context-keys.ts Improve keyboard handling and accessibility for Select.svelte and refactor (#2811) 2023-11-21 14:23:18 +10:00
DropdownDivider.svelte WIP: Use our components in deckoptions sticky bar 2021-05-18 16:32:29 +02:00
DropdownItem.svelte Improve keyboard handling and accessibility for Select.svelte and refactor (#2811) 2023-11-21 14:23:18 +10:00
DynamicallySlottable.svelte Move away from Bazel (#2202) 2022-11-27 15:24:20 +10:00
EnumSelector.svelte Improve keyboard handling and accessibility for Select.svelte and refactor (#2811) 2023-11-21 14:23:18 +10:00
EnumSelectorRow.svelte Tooltips for CSV import and import page refactoring (#2655) 2023-09-14 09:06:15 +10:00
ErrorPage.svelte Merging Notetypes on Import (#2612) 2023-09-09 09:00:55 +10:00
FloatingArrow.svelte Remove dark theme exclusive inset shadow from FloatingArrow (#2257) 2022-12-11 11:18:59 +10:00
helpers.ts Re-enable formatting for .ts files 2022-11-28 09:33:04 +10:00
HelpModal.svelte Hide SM2-specific items in help pages when FSRS enabled 2023-10-13 11:00:51 +10:00
HelpSection.svelte Merging Notetypes on Import (#2612) 2023-09-09 09:00:55 +10:00
IconButton.svelte UI size tweaks (#2184) 2022-11-23 16:50:15 +10:00
IconConstrain.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
icons.ts Merging Notetypes on Import (#2612) 2023-09-09 09:00:55 +10:00
Item.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
Label.svelte Enforce curly bracket usage for one-statement ifs 2023-10-23 09:19:49 +10:00
LabelButton.svelte Use a ninja variable for Protoc binary (#2345) 2023-01-23 20:44:47 +10:00
Popover.svelte Improve keyboard handling and accessibility for Select.svelte and refactor (#2811) 2023-11-21 14:23:18 +10:00
resizable.ts Make tags editor resizable using Henrik's components (#2046) 2022-09-28 14:02:32 +10:00
RevertButton.svelte Merging Notetypes on Import (#2612) 2023-09-09 09:00:55 +10:00
Row.svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
ScrollArea.svelte Update to Svelte 4, and update most other JS deps (#2565) 2023-07-01 16:21:53 +10:00
Select.svelte Improve keyboard handling and accessibility for Select.svelte and refactor (#2811) 2023-11-21 14:23:18 +10:00
SelectOption.svelte Improve keyboard handling and accessibility for Select.svelte and refactor (#2811) 2023-11-21 14:23:18 +10:00
SettingTitle.svelte Merging Notetypes on Import (#2612) 2023-09-09 09:00:55 +10:00
Shortcut.svelte Move away from Bazel (#2202) 2022-11-27 15:24:20 +10:00
Spacer.svelte Space out Sticky Bottom with Spacer component 2021-09-09 15:37:58 +02:00
SpinBox.svelte Resolve a11y for tag options buttons (#2787) 2023-11-14 11:40:04 +10:00
StickyContainer.svelte Redesign deck options inputs (#2082) 2022-09-27 12:16:45 +10:00
StickyHeader.svelte Fix overflowing filenames displacing import button (#2806) 2023-11-05 12:43:43 +10:00
Switch.svelte Update to Svelte 4, and update most other JS deps (#2565) 2023-07-01 16:21:53 +10:00
SwitchRow.svelte Tooltips for CSV import and import page refactoring (#2655) 2023-09-14 09:06:15 +10:00
TagsRow.svelte Tooltips for CSV import and import page refactoring (#2655) 2023-09-14 09:06:15 +10:00
TitledContainer.svelte Revamp Preferences, implement Minimalist Mode and Qt widget gallery to test GUI changes (#2289) 2023-01-18 21:24:16 +10:00
tsconfig.json update to latest rules_nodejs & switch to ts_project 2021-10-01 12:52:53 +10:00
types.ts Hide SM2-specific items in help pages when FSRS enabled 2023-10-13 11:00:51 +10:00
VirtualTable.svelte Fix jittery virtual table scrolling on mobile (#2810) 2023-11-13 10:19:33 +10:00
WithContext.svelte Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
WithFloating.svelte Update to Svelte 4, and update most other JS deps (#2565) 2023-07-01 16:21:53 +10:00
WithOverlay.svelte Update to Svelte 4, and update most other JS deps (#2565) 2023-07-01 16:21:53 +10:00
WithState.svelte Use WithFloating for MathjaxOverlay (#2011) 2022-09-05 17:20:00 +10:00
WithTooltip.svelte Improve presentation of importing results (#2568) 2023-08-02 20:29:44 +10:00