import $ from 'jquery'; import {generateAriaId} from './base.js'; const ariaPatchKey = '_giteaAriaPatchCheckbox'; const fomanticCheckboxFn = $.fn.checkbox; // use our own `$.fn.checkbox` to patch Fomantic's checkbox module export function initAriaCheckboxPatch() { if ($.fn.checkbox === ariaCheckboxFn) throw new Error('initAriaCheckboxPatch could only be called once'); $.fn.checkbox = ariaCheckboxFn; ariaCheckboxFn.settings = fomanticCheckboxFn.settings; } // the patched `$.fn.checkbox` checkbox function // * it does the one-time attaching on the first call function ariaCheckboxFn(...args) { const ret = fomanticCheckboxFn.apply(this, args); for (const el of this) { if (el[ariaPatchKey]) continue; attachInit(el); } return ret; } function attachInit(el) { // 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. el[ariaPatchKey] = {}; // record that this element has been patched const label = el.querySelector('label'); const input = el.querySelector('input'); if (!label || !input || input.getAttribute('id')) return; const id = generateAriaId(); input.setAttribute('id', id); label.setAttribute('for', id); }