diff --git a/tests/e2e/markdown-editor.test.e2e.ts b/tests/e2e/markdown-editor.test.e2e.ts index 3f6e1608b6..e2c2f36ed1 100644 --- a/tests/e2e/markdown-editor.test.e2e.ts +++ b/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); +}); diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 8c010ae386..b4bc443c0e 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/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)); });