Commit Graph

8 Commits

Author SHA1 Message Date
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
Matthias Metelka
e059aab184
Improve Select component and add it back to Change Notetype screen (#2239)
* Do not include oldIdx in Select change event

I included it due to confusion about the variable names in the Change Notetype components.

* Remove redundant on:change listener from NotetypeSelector

* Use Select component in Change Notetype MapperRow (again)

* Remove redundant --cols and --col-size definitions

Bootstrap divides rows into columns of equal width by default.

* Add highlight to active DropdownItem

* Remove bootstrap dropdown item styling

* Fix JS error on dropdown accept action

cause: When closing the dropdown, buttonRef was removed before the callback in setTimeout was run.
2022-12-07 15:31:37 +10:00
Damien Elmes
65fd1a6772 Revert to old select in change notetype screen for now
Fixes https://forums.ankiweb.net/t/anki-2-1-55-beta-5/24870/25,
introduced in #2082
2022-12-03 23:04:08 +10:00
Matthias Metelka
9c45a2f7d0
Refactor Select component | Fix CSV import issue (#2227)
* Refactor Select component and implement/update it in various screens

* Remove redundant select CSS

* Tweak DeckOptionsPage

* Fix CSV import layout

* Fix save button margin in change notetype screen

* Fix sticky header positioning

* Remove unused imports

* Make StickyHeader sticky instead of fixed
2022-12-01 19:24:26 +10:00
Matthias Metelka
23e6b2123e
Redesign deck options inputs (#2082)
* Create _input-mixins.scss

* Use button-mixins on more elements

* Replace <select> tag with custom Select component

* Fix RevertButton causing cursor: pointer when hidden

* Increase SaveButton chevron width

* Hide floating component box-shadow when inactive

* Rework SpinBox and move it into components

* Run eslint and prettier

* Remove leftover options prop

* Pass disabled array to EnumSelector again

* Update MapperRow.svelte

* Darken QHeaderView border color

Slipping this in without an extra PR.

* Adjust disabled color, border and cursor

* Remove redundant icon definition from stylesheets

* Fix deck options initial config

* Fix z-index issues in change notetype screen

It might be best to handle z-index locally in each user component instead of hard-coded component values.

* Give web SpinBox a horizontal design

* Give QRadioButton the same treatment as QCheckBox in #2079

* Fix unused CSS selector warning with base button-mixin

* Remove redundant import

* Fix deck options save button

* Delete input-mixins and remove unused down-arrow

* Run eslint on change-notetype

* Run eslint on components
2022-09-27 12:16:45 +10:00
Henrik Giesel
30bbbaf00b
Use eslint for sorting our imports (#1637)
* Make eslint sort our imports

* fix missing deps in eslint rule (dae)

Caught on Linux due to the stricter sandboxing

* Remove exports-last eslint rule (for now?)

* Adjust browserslist settings

- We use ResizeObserver which is not supported in browsers like KaiOS,
  Baidu or Android UC

* Raise minimum iOS version 13.4

- It's the first version that supports ResizeObserver

* Apply new eslint rules to sort imports
2022-02-04 18:36:34 +10:00
Henrik Giesel
ab6a68ec49
Introduce our own Container, Row, and Col components (#1495)
* Refactor out Placeholder from CardInfo.svelte

* Add breakpoint parameter for Container

- Use `Container` component inside `TitledContainer`

* Build Item into Row

- Use Row in DeckOptionsPage instead of just Item

* Reengineer Container/Row/Col CSS

* Inline Badges next to Labels when Lable spans multiple rows

* Adjust margins for mobile

* Implement Col component breakpoints

* Move card-info to use new Container and Row components

* Join StickyHeader and StickyFooter to StickyContainer

* Remove default middle vertical-alignment for Badges again

* Satisfy tests

* Restore inline gutters in change-notetype Mapper

* Add some comment to Col and Container

* Fix breaking behavior in DeckOptionsPage when multi-column

* Add back toolbar left padding to counter-act buttongroup right margins

* Make Label in SwitchRow take more of available space
2021-11-17 13:49:52 +10:00
Henrik Giesel
24af5bada3 More uniform file naming
kebap-case for .ts, .scss, .html, and directories
2021-07-01 12:24:16 +02:00