4 Commits (09dd4b42c7afe3f474d900b9d5856af2929a12ea)

Author	SHA1	Message	Date
wxiaoguang	685b0ffa19	Use 1.18's aria role for dropdown menus (#24144) ... According to erion's feedback, the 1.18 approach works with Safari (`role=menu` on the parent container), while the 1.19's approach doesn't work well with Safari+VoiceOver (although I tested it worked with Chrome a little better). I have tested this 1.18 approach could work for all Safari/Chrome+VoiceOver and Chrome+Talkback. Let's try to make it on try.gitea.io to see whether it helps Safari users.	2 years ago
Hester Gong	6eb678374b	Refactor authors dropdown (send get request from frontend to avoid long wait time) (#23890) ... Right now the authors search dropdown might take a long time to load if amount of authors is huge. Example: (In the video below, there are about 10000 authors, and it takes about 10 seconds to open the author dropdown) https://user-images.githubusercontent.com/17645053/229422229-98aa9656-3439-4f8c-9f4e-83bd8e2a2557.mov Possible improvements can be made, which will take 2 steps (Thanks to @wolfogre for advice): Step 1： Backend: Add a new api, which returns a limit of 30 posters with matched prefix. Frontend: Change the search behavior from frontend search(fomantic search) to backend search(when input is changed, send a request to get authors matching the current search prefix) Step 2： Backend: Optimize the api in step 1 using indexer to support fuzzy search. This PR is implements the first step. The main changes: 1. Added api: `GET /{type:issues|pulls}/posters` , which return a limit of 30 users with matched prefix (prefix sent as query). If `DEFAULT_SHOW_FULL_NAME` in `custom/conf/app.ini` is set to true, will also include fullnames fuzzy search. 2. Added a tooltip saying "Shows a maximum of 30 users" to the author search dropdown 3. Change the search behavior from frontend search to backend search After: https://user-images.githubusercontent.com/17645053/229430960-f88fafd8-fd5d-4f84-9df2-2677539d5d08.mov Fixes: https://github.com/go-gitea/gitea/issues/22586 --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io>	2 years ago
wxiaoguang	8d5fbeb7a2	Use data-tooltip-content for tippy tooltip (#23649) ... Follow: * #23574 * Remove all ".tooltip[data-content=...]" Major changes: * Remove "tooltip" class, use "[data-tooltip-content=...]" instead of ".tooltip[data-content=...]" * Remove legacy `data-position`, it's dead code since last Fomantic Tooltip -> Tippy Tooltip refactoring * Rename reaction attribute from `data-content` to `data-reaction-content` * Add comments for some `data-content`: `{{/* used by the form */}}` * Remove empty "ui" class * Use "text color" for SVG icons (a few)	2 years ago
wxiaoguang	d4f35bd681	Use a general approch to improve a11y for all checkboxes and dropdowns. (#23542) ... This PR follows #22599 and #23450 The major improvements: 1. The `aria-*.js` are totally transparent now, no need to call `attachDropdownAria` explicitly anymore. * It hooks the `$.fn.checkbox` and `$.fn.dropdown`, then our patch works. * It makes all dynamically generated checkbox/dropdown work with a11y without any change * eg: the `conversation.find('.dropdown').dropdown();` in `repo-diff.js` 2. Since it's totally transparent now, it could be easier to modify or remove in the future. 3. It handles all selection labels as well (by onLabelCreate), so it supports "multiple selection dropdown" now. * It partially completes one of my TODOs: `TODO: multiple selection is not supported yet.` 4. The code structure is clearer, code blocks are splitted into different functions. * The old `attachOneDropdownAria` was splitted into separate functions. * It makes it easier to add more fine tunes in the future, and co-work with contributors. 6. The code logic is similar as before, only two new parts: 1. the `ariaCheckboxFn` and `ariaDropdownFn` functions 2. the `onLabelCreate` and `updateSelectionLabel` functions In `aria-dropdown.js` I had to mix jQuery and Vanilla JS somewhat, I think the code is still understandable, otherwise the code would be much more complex to read. Thanks to fsologureng for the idea about "improving the 'delete icon' with aria attributes". If there is anything unclear or incorrect, feel free to ask and discuss, or propose new PRs for it.	2 years ago
wxiaoguang	345aa09756	Fix aria.js bugs: incorrect role element problem, mobile focus problem, tippy problem (#23450) ... This PR is extracted from #23346 to address some unclear (I don't understand) code-belonging concerns. This PR needs to be backported, otherwise the `aria.js` is too buggy in some cases. Since there would be two minor conflicts, I will do the backport manually. Before: the `aria.js` is still buggy in some cases. After: tested with AppleVoice, Android TalkBack * Fix incorrect dropdown init code * Fix incorrect role element (the menu role should be on the `$menu` element, but not on the `$focusable`) * Fix the focus-show-click-hide problem on mobile. Now the language menu works as expected * Fix incorrect dropdown template function setting * Clarify the logic in aria.js * Hide item's tippy after menu gets hidden * Fix incorrect tippy `setProps` after `destroy` * Fix UI lag problem when page gets redirected during menu hiding animation with screen reader * Improve comments * Implement the layout proposed by #19861 <details> d74a7efb60/web_src/js/features/aria.md?plain=1#L38-L47 </details>	2 years ago
wxiaoguang	b70c7f8660	Fix incorrect display for comment context menu (#23343) ... Replace #23342 Fix a regression of #23014: the `a` couldn't be used here because Fomantic UI has style conflicts: `.ui.comments .comment .actions a { display: inline-block; }` And complete one more of my TODOs: "in the future there could be a special CSS class for it"	2 years ago
wxiaoguang	0bc8bb3cc4	Make issue meta dropdown support Enter, confirm before reloading (#23014) ... As the title. Label/assignee share the same code. * Close #22607 * Close #20727 Also: * partially fix for #21742, now the comment reaction and menu work with keyboard. * partially fix for #17705, in most cases the comment won't be lost. * partially fix for #21539 * partially fix for #20347 * partially fix for #7329 ### The `Enter` support Before, if user presses Enter, the dropdown just disappears and nothing happens or the window reloads. After, Enter can be used to select/deselect labels, and press Esc to hide the dropdown to update the labels (still no way to cancel .... maybe you can do a Cmd+R or F5 to refresh the window to discard the changes .....) This is only a quick patch, the UX is still not perfect, but it's much better than before. ### The `confirm` before reloading And more fixes for the `reload` problem, the new behaviors: * If nothing changes (just show/hide the dropdown), then the page won't be reloaded. * If there are draft comments, show a confirm dialog before reloading, to avoid losing comments. That's the best effect can be done at the moment, unless completely refactor these dropdown related code. Screenshot of the confirm dialog: <details>  </details> --------- Co-authored-by: Brecht Van Lommel <brecht@blender.org> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>	2 years ago
wxiaoguang	e8ac6a9aea	Add ARIA support for Fomantic UI checkboxes (#22599) ... Replace #22593 This is a general approach to add ARIA support for all Fomantic UI checkboxes (including radioboxes) * Pros: * General approach, it works for all Fomantic UI checkboxes / radioboxes * No need to write IDs manually everywhere * No need to tell new contributors to write IDs again and again * Cons: * Slightly affects performance, but it's really trivial, because there was already a heavy `$('.ui.checkbox').checkbox()` for Fomantic UI before. So everything is still fine. Screenshot (from the repo setting page, which has various checkboxes): <details>  </details>	2 years ago
wxiaoguang	694441fec5	Remove customized (unmaintained) dropdown, improve aria a11y for dropdown (#19861) ... * Remove customized (unmaintained) dropdown, improve aria a11y for dropdown * fix repo permission * use action instead of onChange * re-order the CSS selector * fix dropdown behavior for repo permissions, make elements inside menu item non-focusable * use menu/menuitem instead of combobox/option. use tooltip(data-content) for aria-label, prevent from repeated attaching * click menu item when pressing Enter * code format * fix repo permission * repo setting: prevent from misleading users when error occurs * fine tune the repo collaboration access mode dropdown (in case the access mode is undefined in the template) Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>	2 years ago