Merge pull request '[v7.0/forgejo] [PORT] gitea#30546: Add form field id generation, remove duplicated ids' (#3362) from bp-v7.0/forgejo-a01387f into v7.0/forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3362
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
Earl Warren 2024-04-22 08:15:26 +00:00
commit 792764456c
5 changed files with 42 additions and 25 deletions

View file

@ -9,8 +9,8 @@
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<input type="hidden" name="action" value="update"> <input type="hidden" name="action" value="update">
<div class="required field {{if .Err_RepoName}}error{{end}}"> <div class="required field {{if .Err_RepoName}}error{{end}}">
<label for="repo_name">{{ctx.Locale.Tr "repo.repo_name"}}</label> <label>{{ctx.Locale.Tr "repo.repo_name"}}</label>
<input id="repo_name" name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" autofocus required> <input name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" autofocus required>
</div> </div>
<div class="inline field"> <div class="inline field">
<label>{{ctx.Locale.Tr "repo.repo_size"}}</label> <label>{{ctx.Locale.Tr "repo.repo_size"}}</label>
@ -539,8 +539,8 @@
</label> </label>
</div> </div>
<div class="required field"> <div class="required field">
<label for="repo_name">{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label> <label>{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label>
<input id="repo_name" name="repo_name" required maxlength="100"> <input name="repo_name" required maxlength="100">
</div> </div>
<div class="text right actions"> <div class="text right actions">
@ -570,8 +570,8 @@
</label> </label>
</div> </div>
<div class="required field"> <div class="required field">
<label for="repo_name">{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label> <label>{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label>
<input id="repo_name" name="repo_name" required> <input name="repo_name" required>
</div> </div>
<div class="text right actions"> <div class="text right actions">
@ -602,8 +602,8 @@
</label> </label>
</div> </div>
<div class="required field"> <div class="required field">
<label for="repo_name">{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label> <label>{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label>
<input id="repo_name" name="repo_name" required> <input name="repo_name" required>
</div> </div>
<div class="required field"> <div class="required field">
<label for="new_owner_name">{{ctx.Locale.Tr "repo.settings.transfer_owner"}}</label> <label for="new_owner_name">{{ctx.Locale.Tr "repo.settings.transfer_owner"}}</label>
@ -672,8 +672,8 @@
</label> </label>
</div> </div>
<div class="required field"> <div class="required field">
<label for="repo_name">{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label> <label>{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label>
<input id="repo_name" name="repo_name" required> <input name="repo_name" required>
</div> </div>
<div class="text right actions"> <div class="text right actions">
@ -705,8 +705,8 @@
</label> </label>
</div> </div>
<div class="required field"> <div class="required field">
<label for="repo_name">{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label> <label>{{ctx.Locale.Tr "repo.settings.confirmation_string"}}</label>
<input id="repo_name" name="repo_name" required> <input name="repo_name" required>
</div> </div>
<div class="text right actions"> <div class="text right actions">

View file

@ -1,6 +1,7 @@
import $ from 'jquery'; import $ from 'jquery';
import {initFomanticApiPatch} from './fomantic/api.js'; import {initFomanticApiPatch} from './fomantic/api.js';
import {initAriaCheckboxPatch} from './fomantic/checkbox.js'; import {initAriaCheckboxPatch} from './fomantic/checkbox.js';
import {initAriaFormFieldPatch} from './fomantic/form.js';
import {initAriaDropdownPatch} from './fomantic/dropdown.js'; import {initAriaDropdownPatch} from './fomantic/dropdown.js';
import {initAriaModalPatch} from './fomantic/modal.js'; import {initAriaModalPatch} from './fomantic/modal.js';
import {initFomanticTransition} from './fomantic/transition.js'; import {initFomanticTransition} from './fomantic/transition.js';
@ -27,6 +28,7 @@ export function initGiteaFomantic() {
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
initAriaCheckboxPatch(); initAriaCheckboxPatch();
initAriaFormFieldPatch();
initAriaDropdownPatch(); initAriaDropdownPatch();
initAriaModalPatch(); initAriaModalPatch();
} }

View file

@ -3,3 +3,16 @@ let ariaIdCounter = 0;
export function generateAriaId() { export function generateAriaId() {
return `_aria_auto_id_${ariaIdCounter++}`; return `_aria_auto_id_${ariaIdCounter++}`;
} }
export function linkLabelAndInput(label, input) {
const labelFor = label.getAttribute('for');
const inputId = input.getAttribute('id');
if (inputId && !labelFor) { // missing "for"
label.setAttribute('for', inputId);
} else if (!inputId && !labelFor) { // missing both "id" and "for"
const id = generateAriaId();
input.setAttribute('id', id);
label.setAttribute('for', id);
}
}

View file

@ -1,4 +1,4 @@
import {generateAriaId} from './base.js'; import {linkLabelAndInput} from './base.js';
export function initAriaCheckboxPatch() { export function initAriaCheckboxPatch() {
// link the label and the input element so it's clickable and accessible // link the label and the input element so it's clickable and accessible
@ -7,18 +7,7 @@ export function initAriaCheckboxPatch() {
const label = el.querySelector('label'); const label = el.querySelector('label');
const input = el.querySelector('input'); const input = el.querySelector('input');
if (!label || !input) continue; if (!label || !input) continue;
const inputId = input.getAttribute('id'); linkLabelAndInput(label, input);
const labelFor = label.getAttribute('for');
if (inputId && !labelFor) { // missing "for"
label.setAttribute('for', inputId);
} else if (!inputId && !labelFor) { // missing both "id" and "for"
const id = generateAriaId();
input.setAttribute('id', id);
label.setAttribute('for', id);
} else {
continue;
}
el.setAttribute('data-checkbox-patched', 'true'); el.setAttribute('data-checkbox-patched', 'true');
} }
} }

View file

@ -0,0 +1,13 @@
import {linkLabelAndInput} from './base.js';
export function initAriaFormFieldPatch() {
// link the label and the input element so it's clickable and accessible
for (const el of document.querySelectorAll('.ui.form .field')) {
if (el.hasAttribute('data-field-patched')) continue;
const label = el.querySelector(':scope > label');
const input = el.querySelector(':scope > input');
if (!label || !input) continue;
linkLabelAndInput(label, input);
el.setAttribute('data-field-patched', 'true');
}
}