mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-02-18 20:12:34 -05:00
4f8d96a6de
Accessibility:
- improved semantic layout
- Fixes unlabelled input for custom pronouns. CC @hazy
- Adds labels to dropdowns.
- Shortens certain texts for less verbose screen reader outputs and
people with slow reading speed.
- Turned optional username rename helper text with low contrast into
"normal" help text.
UI/UX:
- Removes section about primary email which is no longer managed in the
profile section.
- Fixes section about primary email not displaying in user settings when notifications are
not available.
- Removes primary email display, because it is not actually a form
element here. (Alternatively, we could display it and link to the
account settings for managing the email)
(cherry picked from commit 2885ea8da2)
50 lines
2 KiB
JavaScript
50 lines
2 KiB
JavaScript
import {hideElem, showElem} from '../utils/dom.js';
|
|
|
|
function onPronounsDropdownUpdate() {
|
|
const pronounsCustom = document.getElementById('label-pronouns-custom');
|
|
const pronounsCustomInput = pronounsCustom.querySelector('input');
|
|
const pronounsDropdown = document.getElementById('pronouns-dropdown');
|
|
const pronounsInput = pronounsDropdown.querySelector('input');
|
|
// must be kept in sync with `routers/web/user/setting/profile.go`
|
|
const isCustom = !(
|
|
pronounsInput.value === '' ||
|
|
pronounsInput.value === 'he/him' ||
|
|
pronounsInput.value === 'she/her' ||
|
|
pronounsInput.value === 'they/them' ||
|
|
pronounsInput.value === 'it/its' ||
|
|
pronounsInput.value === 'any pronouns'
|
|
);
|
|
if (isCustom) {
|
|
if (pronounsInput.value === '!') {
|
|
pronounsCustomInput.value = '';
|
|
} else {
|
|
pronounsCustomInput.value = pronounsInput.value;
|
|
}
|
|
showElem(pronounsCustom);
|
|
} else {
|
|
hideElem(pronounsCustom);
|
|
}
|
|
}
|
|
function onPronounsCustomUpdate() {
|
|
const pronounsCustomInput = document.querySelector('#label-pronouns-custom input');
|
|
const pronounsInput = document.querySelector('#pronouns-dropdown input');
|
|
pronounsInput.value = pronounsCustomInput.value;
|
|
}
|
|
|
|
export function initUserSettings() {
|
|
if (!document.querySelectorAll('.user.settings.profile').length) return;
|
|
|
|
const pronounsDropdown = document.getElementById('label-pronouns');
|
|
const pronounsCustomInput = document.querySelector('#label-pronouns-custom input');
|
|
const pronounsInput = pronounsDropdown.querySelector('input');
|
|
|
|
// If JS is disabled, the page will show the custom input, as the dropdown requires JS to work.
|
|
// JS progressively enhances the input by adding a dropdown, but it works regardless.
|
|
pronounsCustomInput.removeAttribute('name');
|
|
pronounsInput.setAttribute('name', 'pronouns');
|
|
showElem(pronounsDropdown);
|
|
|
|
onPronounsDropdownUpdate();
|
|
pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
|
|
pronounsCustomInput.addEventListener('input', onPronounsCustomUpdate);
|
|
}
|