luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-05-16 15:02:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Remove customized (unmaintained) dropdown, improve aria a11y for dropdown (#19861)

Browse source 
* 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>
This commit is contained in:
wxiaoguang 2022-06-04 05:38:26 +08:00 • committed by GitHub
parent 1d04e8641d
commit 694441fec5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 195 additions and 4459 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web_src/js/features/aria.md Normal file
View file

@ -0,0 +1,46 @@
**This document is used as aria/a11y reference for future developers**
## ARIA Dropdown
There are different solutions:
* combobox + listbox + option
* menu + menuitem
At the moment, `menu + menuitem` seems to work better with Fomantic UI Dropdown, so we only use it now.
```html
<div>
<input role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="the-menu-listbox" aria-activedescendant="item-id-123456">
<ul id="the-menu-listbox" role="listbox">
<li role="option" id="item-id-123456" aria-selected="true">
<a tabindex="-1" href="....">....</a>
</li>
</ul>
</div>
```
## Fomantic UI Dropdown
```html
<!-- read-only dropdown -->
<div class="ui dropdown"> <!-- focused here, then it's not perfect to use aria-activedescendant to point to the menu item -->
<input type="hidden" ...>
<div class="text">Default</div>
<div class="menu transition hidden" tabindex="-1">
<div class="item active selected">Default</div>
<div class="item">...</div>
</div>
</div>
<!-- search input dropdown -->
<div class="ui dropdown">
<input type="hidden" ...>
<input class="search" autocomplete="off" tabindex="0"> <!-- focused here -->
<div class="text"></div>
<div class="menu transition visible" tabindex="-1">
<div class="item selected">...</div>
<div class="item">...</div>
</div>
</div>
```