Fix a11y for repo topic management #23346

wxiaoguang · 2023-03-07T05:11:37Z

Partially replace #22631

This PR improves the a11y for the Repo Topic Edit feature.

Thanks to @fsologureng for the idea and help.

Major changes

A11y for Fomantic Dropdown

extracted to a separate PR: #23450

Repo Topic Edit

Use <button> to replace <a>, then the Manage Topics button is focus-able and clickable (by keyboard).
Focus the dropdown input after click the Manage Topics button.
Fix UI misalignment, use flex
Fix Delete Icon misalignment, always use <svg>
Add "Cancel" button, the order is the same as Issue Title Edit (although I don't like this order)
Make the delete icon elements have correct aria-related attributes (mainly for mobile)

Now the Repo Topic Edit can be operated by keyboard-only.

Tab to the Manage Topics
Press Enter or Space to show the edit form
Use Left&Right Arrow keys to navigate between topics, press Backspace or Delete to delete them.
Input to load more topics, use Up&Down Arrow keys to select a topic
Press Tab to focus Cancel or Save

And mobile screen readers (like Talkback) could recognize the delete icon as a button.

Before

UI Misalignment & No Cancel Button

Delete Icon Misalignment

After

UI Aligned and Cancel Button

Delete Icon Aligned

templates/repo/home.tmpl

…bile

web_src/js/features/repo-home.js

HesterG

Tested this case: If original topics are 'aaa' 'bbb' 'ccc' , and then click on "Manage topic", the aria-label for the delete svg on all three topics will become "Remove topic "aaa""

wxiaoguang · 2023-03-08T08:29:19Z

Oops, my bad, fixed by 02c65fe

wxiaoguang · 2023-03-13T15:05:17Z

According to @fsologureng 's suggestion, always use "combobox", never use "menu" : 1fbff84

Just one-line change (isComboBox = true, with documents and comments).

update: reverted

wxiaoguang · 2023-03-13T16:33:40Z

To address some unclear (I don't understand) code-belonging concerns: #23450

The changes in 23450 are necessary for this PR. Without 23450, the dropdown doesn't work well on mobile.

# Conflicts: # web_src/less/_repository.less

…m, 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> https://github.com/go-gitea/gitea/blob/d74a7efb60f94a4b8e6e5f65332f94f1be31b761/web_src/js/features/aria.md?plain=1#L38-L47 </details>

templates/repo/home.tmpl

web_src/js/features/repo-home.js

silverwind · 2023-03-20T16:23:13Z

Which PR do you want to land first now, this one or #23542? I'm losing track.

wxiaoguang · 2023-03-20T16:30:21Z

If I don't mention "block" or "merging order" in my PRs, then there is no order for them.

This PR will be discard because this PR caused some arguments about "attribution of ideas and code".

I will start new PRs from scratch, avoid touching unclear "idea" or "code".

fix

902be92

wxiaoguang force-pushed the fix-repo-topic-edit branch from cd4fab5 to 902be92 Compare March 7, 2023 05:11

wxiaoguang mentioned this pull request Mar 7, 2023

WIP Fixes accessibility behavior for topic management in the repository home view #22631

Closed

techknowlogick added the topic/accessibility This issue/pull request wants to improve the accessibility label Mar 7, 2023

techknowlogick added this to the 1.20.0 milestone Mar 7, 2023

techknowlogick added type/bug topic/ui Change the appearance of the Gitea UI labels Mar 7, 2023

Merge branch 'main' into fix-repo-topic-edit

a42186e

fsologureng reviewed Mar 7, 2023

View reviewed changes

templates/repo/home.tmpl Outdated Show resolved Hide resolved

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 7, 2023

wxiaoguang marked this pull request as draft March 7, 2023 14:10

add aria attributes to delete icon

c379fc5

wxiaoguang force-pushed the fix-repo-topic-edit branch from 38179a4 to c379fc5 Compare March 7, 2023 15:23

wxiaoguang added 3 commits March 7, 2023 23:55

make "delete icon button" slightly larger to be easier to click on mo…

5dd48bb

…bile

fix lint

25f993b

use exactly the same markup for labels

fa2fa02

wxiaoguang force-pushed the fix-repo-topic-edit branch from 964760f to fa2fa02 Compare March 7, 2023 16:23

add more comments

77ee1f1

wxiaoguang marked this pull request as ready for review March 7, 2023 16:38

use svg, fine tune styles

5e9aa1e

fsologureng reviewed Mar 7, 2023

View reviewed changes

web_src/js/features/repo-home.js Outdated Show resolved Hide resolved

wxiaoguang added 3 commits March 8, 2023 10:25

Merge branch 'main' into fix-repo-topic-edit

93a2d40

Merge branch 'main' into fix-repo-topic-edit

b3b89a6

title: Remove topic "%s"

a1e35b4

HesterG reviewed Mar 8, 2023

View reviewed changes

fix aria-label

02c65fe

use role=combobox for dropdown with input

2754740

wxiaoguang force-pushed the fix-repo-topic-edit branch from 5d48dcd to 2754740 Compare March 8, 2023 09:50

fix chrome crash

2166ad1

wxiaoguang force-pushed the fix-repo-topic-edit branch 2 times, most recently from 41c4972 to a868de8 Compare March 13, 2023 08:23

fix tippy bug

e912d35

wxiaoguang force-pushed the fix-repo-topic-edit branch from a868de8 to e912d35 Compare March 13, 2023 08:49

HesterG approved these changes Mar 13, 2023

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 13, 2023

always use combobox

1fbff84

wxiaoguang force-pushed the fix-repo-topic-edit branch from a2405c4 to 1fbff84 Compare March 13, 2023 15:04

wxiaoguang changed the title ~~Fix accessibility behavior for topic management in the repository home, make some dropdown work as combobox~~ Fix a11y for repo topic management, make all dropdowns as combobox Mar 13, 2023

wxiaoguang added 2 commits March 13, 2023 23:23

Merge branch 'main' into fix-repo-topic-edit

3b8f8bc

fix one more visible check

b17a767

wxiaoguang mentioned this pull request Mar 13, 2023

Fix aria.js bugs: incorrect role element problem, mobile focus problem, tippy problem #23450

Merged

wxiaoguang marked this pull request as draft March 13, 2023 16:32

wxiaoguang added 3 commits March 15, 2023 12:54

revert extracted changes

d0ac1f5

Merge branch 'main' into fix-repo-topic-edit

81d6148

# Conflicts: # web_src/less/_repository.less

fix merge

e722799

wxiaoguang changed the title ~~Fix a11y for repo topic management, make all dropdowns as combobox~~ Fix a11y for repo topic management Mar 15, 2023

wxiaoguang mentioned this pull request Mar 18, 2023

Fix dropdown icon misalignment when using fomantic icon #23558

Merged

silverwind reviewed Mar 18, 2023

View reviewed changes

templates/repo/home.tmpl Show resolved Hide resolved

silverwind reviewed Mar 19, 2023

View reviewed changes

web_src/js/features/repo-home.js Show resolved Hide resolved

wxiaoguang closed this Mar 20, 2023

lunny removed this from the 1.20.0 milestone Mar 21, 2023

wxiaoguang deleted the fix-repo-topic-edit branch March 22, 2023 04:07

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix a11y for repo topic management #23346

Fix a11y for repo topic management #23346

wxiaoguang commented Mar 7, 2023 •

edited

Loading

HesterG left a comment

wxiaoguang commented Mar 8, 2023

wxiaoguang commented Mar 13, 2023 •

edited

Loading

wxiaoguang commented Mar 13, 2023 •

edited

Loading

silverwind commented Mar 20, 2023

wxiaoguang commented Mar 20, 2023

Fix a11y for repo topic management #23346

Fix a11y for repo topic management #23346

Conversation

wxiaoguang commented Mar 7, 2023 • edited Loading

Major changes

A11y for Fomantic Dropdown

Repo Topic Edit

Before

UI Misalignment & No Cancel Button

Delete Icon Misalignment

After

UI Aligned and Cancel Button

Delete Icon Aligned

HesterG left a comment

Choose a reason for hiding this comment

wxiaoguang commented Mar 8, 2023

wxiaoguang commented Mar 13, 2023 • edited Loading

wxiaoguang commented Mar 13, 2023 • edited Loading

silverwind commented Mar 20, 2023

wxiaoguang commented Mar 20, 2023

wxiaoguang commented Mar 7, 2023 •

edited

Loading

wxiaoguang commented Mar 13, 2023 •

edited

Loading

wxiaoguang commented Mar 13, 2023 •

edited

Loading