mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 20:22:14 +02:00
Add ARIA support for Fomantic UI checkboxes (#22599)
Replace #22593 This is a general approach to add ARIA support for all Fomantic UI checkboxes (including radioboxes) * Pros: * General approach, it works for all Fomantic UI checkboxes / radioboxes * No need to write IDs manually everywhere * No need to tell new contributors to write IDs again and again * Cons: * Slightly affects performance, but it's really trivial, because there was already a heavy `$('.ui.checkbox').checkbox()` for Fomantic UI before. So everything is still fine. Screenshot (from the repo setting page, which has various checkboxes): <details> ![image](https://user-images.githubusercontent.com/2114189/214480937-3a54d36f-55c3-49de-9c45-c4bb21f1f4c6.png) </details>
This commit is contained in:
parent
c8139c0f64
commit
e8ac6a9aea
2 changed files with 19 additions and 2 deletions
|
@ -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,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';
|
||||
import {svg} from '../svg.js';
|
||||
|
@ -111,7 +111,7 @@ export function initGlobalCommon() {
|
|||
});
|
||||
attachDropdownAria($uiDropdowns);
|
||||
|
||||
$('.ui.checkbox').checkbox();
|
||||
attachCheckboxAria($('.ui.checkbox'));
|
||||
|
||||
$('.tabular.menu .item').tab();
|
||||
$('.tabable.menu .item').tab();
|
||||
|
|
Loading…
Reference in a new issue