Use a general approch to improve a11y for all checkboxes and dropdowns.

[wxiaoguang]

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.
5. 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.

[silverwind]

For checkbox, I wonder if it wouldn't be better to move to native checkboxes instead (removing the fomantic module). It'll be the best solution and a11y is perfect for those and they don't need any extra JS work.

[wxiaoguang]

For checkbox, I wonder if it wouldn't be better to move to native checkboxes instead (removing the fomantic module). It'll be the best solution and a11y is perfect for those and they don't need any extra JS work.

Agree, but it really needs much more time, including implement the necessary CSS styles, rewrite related $().checkbox() code.

I have done my best to avoid the checkboxes becoming more complex, to make the future native-replacing not too difficult.

[silverwind]

I think I will get started on native checkbox styling as part of an effort the eliminate the checkbox "pop in" on the issue list. It's been annoying me for a while now.

[silverwind]

See #23596 for that. I think I will add styling, currently there is none.

[codecov-commenter]

Codecov Report

Merging #23542 (a84a9ef) into main (f521e88) will decrease coverage by 0.02%.
The diff coverage is 37.89%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main   #23542      +/-   ##
==========================================
- Coverage   47.14%   47.13%   -0.02%     
==========================================
  Files        1149     1154       +5     
  Lines      151446   152353     +907     
==========================================
+ Hits        71397    71808     +411     
- Misses      71611    72057     +446     
- Partials     8438     8488      +50     

Impacted Files	Coverage Δ
cmd/dump.go	0.67% <0.00%> (ø)
cmd/web.go	0.00% <0.00%> (ø)
models/actions/run.go	1.64% <0.00%> (-0.08%)	⬇️
models/actions/runner.go	1.44% <ø> (ø)
models/packages/package.go	45.45% <0.00%> (-1.13%)	⬇️
models/user/search.go	77.50% <0.00%> (-6.29%)	⬇️
modules/actions/github.go	0.00% <0.00%> (ø)
modules/actions/workflows.go	0.00% <0.00%> (ø)
modules/context/context.go	64.54% <0.00%> (-3.53%)	⬇️
modules/doctor/storage.go	31.93% <0.00%> (ø)
... and 33 more

... and 38 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.