web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

37
web_src/js/features/repo-settings.js
View file

@ -6,12 +6,37 @@ const {appSubUrl, csrfToken} = window.config;
export function initRepoSettingsCollaboration() {
// Change collaborator access mode
$('.access-mode.menu .item').on('click', function () {
const $menu = $(this).parent();
$.post($menu.data('url'), {
_csrf: csrfToken,
uid: $menu.data('uid'),
mode: $(this).data('value')
$('.page-content.repository .ui.dropdown.access-mode').each((_, e) => {
const $dropdown = $(e);
const $text = $dropdown.find('> .text');
$dropdown.dropdown({
action(_text, value) {
const lastValue = $dropdown.attr('data-last-value');
$.post($dropdown.attr('data-url'), {
_csrf: csrfToken,
uid: $dropdown.attr('data-uid'),
mode: value,
}).fail(() => {
$text.text('(error)'); // prevent from misleading users when error occurs
$dropdown.attr('data-last-value', lastValue);
});
$dropdown.attr('data-last-value', value);
$dropdown.dropdown('hide');
},
onChange(_value, text, _$choice) {
$text.text(text); // update the text when using keyboard navigating
},
onHide() {
// set to the really selected value, defer to next tick to make sure `action` has finished its work because the calling order might be onHide -> action
setTimeout(() => {
const $item = $dropdown.dropdown('get item', $dropdown.attr('data-last-value'));
if ($item) {
$dropdown.dropdown('set selected', $dropdown.attr('data-last-value'));
} else {
$text.text('(N/A)'); // prevent from misleading users when the access mode is undefined
}
}, 0);
}
});
});
}