upstream/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-28 07:32:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fix @mention combobox semantics for screen reader accessibility (#11860)

Browse source 
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>
This commit is contained in:
Henry Catalini Smith 2026-04-01 00:14:47 +02:00 committed by Otto
parent ba6794348e
commit bfebd42a3d
2 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
tests/e2e/issue-comment.test.e2e.ts
View file

@ -331,7 +331,7 @@ test('Emoji suggestions', async ({page}) => {
];
for (const {emoji, name} of expectedSuggestions) {
const item = suggestionList.locator(`li:has-text("${name}")`);
const item = suggestionList.locator(`[id="combobox-emoji-${name}"]`);
await expect(item).toContainText(`${emoji} ${name}`);
}

3
web_src/js/features/comp/TextExpander.js
View file

@ -12,6 +12,7 @@ export function initTextExpander(expander) {
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)) {
@ -33,10 +34,12 @@ export function initTextExpander(expander) {
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);