domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Merge remote-tracking branch 'forgejo/v1.18/forgejo-a11y' into v1.18/forgejo

Browse source
This commit is contained in:
Loïc Dachary 2023-02-20 19:57:07 +01:00
commit cd299fc44d
No known key found for this signature in database
GPG key ID: 992D23B392F9E4F2
166 changed files with 208 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web_src/js/features/aria.js
View file

@ -98,3 +98,20 @@ function attachOneDropdownAria($dropdown) {
export function attachDropdownAria($dropdowns) {
$dropdowns.each((_, e) => attachOneDropdownAria($(e)));
}
export function attachCheckboxAria($checkboxes) {
$checkboxes.checkbox();
// Fomantic UI checkbox needs to be something like: <div class="ui checkbox"><label /><input /></div>
// It doesn't work well with <label><input />...</label>
// To make it work with aria, the "id"/"for" attributes are necessary, so add them automatically if missing.
// In the future, refactor to use native checkbox directly, then this patch could be removed.
for (const el of $checkboxes) {
const label = el.querySelector('label');
const input = el.querySelector('input');
if (!label || !input || input.getAttribute('id')) continue;
const id = generateAriaId();
input.setAttribute('id', id);
label.setAttribute('for', id);
}
}

4
web_src/js/features/common-global.js
View file

@ -4,7 +4,7 @@ import {mqBinarySearch} from '../utils.js';
import createDropzone from './dropzone.js';
import {initCompColorPicker} from './comp/ColorPicker.js';
import {showGlobalErrorMessage} from '../bootstrap.js';
import {attachDropdownAria} from './aria.js';
import {attachCheckboxAria, attachDropdownAria} from './aria.js';
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
import {initTooltip} from '../modules/tippy.js';
@ -110,7 +110,7 @@ export function initGlobalCommon() {
});
attachDropdownAria($uiDropdowns);
$('.ui.checkbox').checkbox();
attachCheckboxAria($('.ui.checkbox'));
$('.tabular.menu .item').tab();
$('.tabable.menu .item').tab();