mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-04-19 13:00:20 +00:00
bfebd42a3d
Fixes https://codeberg.org/forgejo/forgejo/issues/7668. This was simpler to fix than my theory I posted on https://codeberg.org/forgejo/forgejo/issues/7668 about needing to patch the upstream package. When testing in Firefox with the developer console open and warnings enabled, I noticed a `Empty string passed to getElementById()` warning coming from `@github/combobox-nav` while attempting to manage the `aria-activedescendant` attribute. Then I found this in the [README for that project](https://github.com/github/combobox-nav). > Markup requirements: > - Each option needs to have role="option" and a unique id This was easy to miss, as we're using `@github/text-expander-element` and the combobox-nav package is one of _its_ dependencies. Without a unique ID on each dropdown menu item, `@github/text-expander-element` is unable to set an appropriate `aria-activedescendant` attribute on the textarea. Once that's in place, the screen reader announcements come to life beautifully. While working on it I noticed the emoji picker combobox was affected by the same problem and patched that as well. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11860 Reviewed-by: Otto <otto@codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se>
70 lines
2.4 KiB
JavaScript
70 lines
2.4 KiB
JavaScript
import {matchEmoji, matchMention} from '../../utils/match.js';
|
|
import {emojiHTML, emojiString} from '../emoji.js';
|
|
const {customEmojis} = window.config;
|
|
|
|
export function initTextExpander(expander) {
|
|
expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
|
|
if (key === ':') {
|
|
const matches = matchEmoji(text);
|
|
if (!matches.length) return provide({matched: false});
|
|
|
|
const ul = document.createElement('ul');
|
|
ul.classList.add('suggestions');
|
|
for (const name of matches) {
|
|
const li = document.createElement('li');
|
|
li.setAttribute('id', `combobox-emoji-${name}`);
|
|
li.setAttribute('role', 'option');
|
|
li.setAttribute('data-value', emojiString(name));
|
|
if (customEmojis.has(name)) {
|
|
li.style.gap = '0.25rem';
|
|
li.innerHTML = emojiHTML(name);
|
|
li.append(name);
|
|
} else {
|
|
li.textContent = `${emojiString(name)} ${name}`;
|
|
}
|
|
ul.append(li);
|
|
}
|
|
|
|
provide({matched: true, fragment: ul});
|
|
} else if (key === '@') {
|
|
const matches = matchMention(text);
|
|
if (!matches.length) return provide({matched: false});
|
|
|
|
const ul = document.createElement('ul');
|
|
ul.classList.add('suggestions');
|
|
for (const {value, name, fullname, avatar} of matches) {
|
|
const li = document.createElement('li');
|
|
li.setAttribute('id', `combobox-user-${name}`);
|
|
li.setAttribute('role', 'option');
|
|
li.setAttribute('data-value', `${key}${value}`);
|
|
|
|
const img = document.createElement('img');
|
|
img.setAttribute('aria-hidden', 'true');
|
|
img.src = avatar;
|
|
li.append(img);
|
|
|
|
const nameSpan = document.createElement('span');
|
|
nameSpan.textContent = name;
|
|
li.append(nameSpan);
|
|
|
|
if (fullname && fullname.toLowerCase() !== name) {
|
|
const fullnameSpan = document.createElement('span');
|
|
fullnameSpan.classList.add('fullname');
|
|
fullnameSpan.textContent = fullname;
|
|
li.append(fullnameSpan);
|
|
}
|
|
|
|
ul.append(li);
|
|
}
|
|
|
|
provide({matched: true, fragment: ul});
|
|
}
|
|
});
|
|
expander?.addEventListener('text-expander-value', ({detail}) => {
|
|
if (detail?.item) {
|
|
// add a space after @mentions as it's likely the user wants one
|
|
const suffix = detail.key === '@' ? ' ' : '';
|
|
detail.value = `${detail.item.getAttribute('data-value')}${suffix}`;
|
|
}
|
|
});
|
|
}
|