[v14.0/forgejo] fix(ui): add dynamic aria-label to monospace button in markdown editor (#10543)

**Backport:** https://codeberg.org/forgejo/forgejo/pulls/8244

The aria-label now changes dynamically depending on whether
the monospace font is enabled or disabled.

Greetings from GPN :)

Fixes #7669.

Co-authored-by: JohnnyJayJay <johnny@leftfold.tech>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10543
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>

tests/e2e/markdown-editor.test.e2e.ts

@@ -560,3 +560,29 @@ test('Markdown bold/italic toolbar and shortcut', async ({page}) => {
   await textarea.press('ControlOrMeta+KeyI');
   await expect(textarea).toHaveValue(`line 1\nline 2\nline 3\nline 4`);
 });
+
+test('Monospace button aria-label', async ({page}) => {
+  // Load page with editor
+  const response = await page.goto('/user2/repo1/issues/new');
+  expect(response?.status()).toBe(200);
+
+  const monospaceButton = page.locator('.markdown-switch-monospace');
+  const enableText = await monospaceButton.getAttribute('data-enable-text');
+  const disableText = await monospaceButton.getAttribute('data-disable-text');
+
+  async function assertAriaLabel(enabled: boolean) {
+    const expected = enabled ? disableText : enableText;
+
+    await expect(monospaceButton).toHaveAttribute('aria-label', expected);
+  }
+
+  const enabled = await monospaceButton.getAttribute('aria-checked') === 'true';
+
+  await assertAriaLabel(enabled);
+
+  await monospaceButton.click();
+  await assertAriaLabel(!enabled);
+
+  await monospaceButton.click();
+  await assertAriaLabel(enabled);
+});

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -176,6 +176,7 @@ class ComboMarkdownEditor {
     const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true';
     const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text');
     monospaceButton.setAttribute('data-tooltip-content', monospaceText);
+    monospaceButton.setAttribute('aria-label', monospaceText);
     monospaceButton.setAttribute('aria-checked', String(monospaceEnabled));
 
     monospaceButton?.addEventListener('click', (e) => {
@@ -185,6 +186,7 @@ class ComboMarkdownEditor {
       this.textarea.classList.toggle('tw-font-mono', enabled);
       const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text');
       monospaceButton.setAttribute('data-tooltip-content', text);
+      monospaceButton.setAttribute('aria-label', text);
       monospaceButton.setAttribute('aria-checked', String(enabled));
     });