Separate link reference markers from the previous word for screen readers

CHANGELOG.md

@@ -63,6 +63,7 @@ Legends:
 - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed timestamps always using the 12-hour clock, such as "4:41 PM" instead of "16:41" in German, in PR [#5920](https://github.com/microsoft/BotFramework-WebChat/pull/5920), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed screen readers gluing a link reference marker to the previous word in the message summary, such as "settings1" for `settings[1]`, in PR [#5923](https://github.com/microsoft/BotFramework-WebChat/pull/5923), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08
 

__tests__/html2/accessibility/accessibleName.linkReference.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <!-- Shows the live region, so the snapshot shows the copy sent to screen readers. -->
+    <link href="/assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { hideSendBox: true, internalLiveRegionFadeAfter: 60000 } // Keep the live region content for the assertion and the snapshot.
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: a message with a link reference marker "[1]" right after a word, without a space.
+        await directLine.emulateIncomingActivity({
+          text: 'Override the proxy settings[1].\n\n[1]: https://example.com/proxy "Proxy settings"',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // THEN: the message's accessible name separates the marker from the word: "settings 1.", not "settings1.".
+        // Zero-width spaces wrap every link for line breaking, screen readers do not pause on them.
+        await waitFor(async () =>
+          expect(
+            (
+              await testHelpers.getAccessibleName(
+                pageElements.activities()[0].querySelector('.webchat__basic-transcript__activity-active-descendant')
+              )
+            ).replace(/\u200b/gu, '')
+          ).toBe('Bot said: Override the proxy settings 1. One or more links in the message.')
+        );
+
+        // THEN: the live region announces the same text on arrival.
+        await waitFor(() =>
+          expect(
+            testHelpers
+              .getAllTextContents(pageElements.liveRegion())
+              .join('\n')
+              .replace(/\u200b/gu, '')
+          ).toContain('Bot said:\nOverride the proxy settings 1.')
+        );
+
+        await pageConditions.liveRegionStabilized();
+
+        // THEN: the live region (top) shows "Override the proxy settings 1." with a space, while the transcript shows "settings[1].".
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

packages/component/src/Utils/activityAltText.ts

@@ -88,6 +88,9 @@ function htmlTextAlternatives(document: Document): string[] {
 
     if (nodeType === Node.TEXT_NODE) {
       return [textContent];
+    } else if (tagName === 'A' || tagName === 'BUTTON') {
+      // Links and citation buttons are separate words, e.g. "settings[1]" should read "settings 1", not "settings1".
+      return /\S$/u.test(node.previousSibling?.textContent || '') ? [' '] : [];
     } else if (tagName === 'IMG') {
       return [node.getAttribute('alt')];
     } else if (!HTML_INLINE_TAGS.includes(tagName)) {