Make scrollable focusable

microsoft · Nov 15, 2024 · fe5079c · fe5079c
1 parent 6219651
commit fe5079c
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 6 deletions.
diff --git a/__tests__/html2/markdown/math/layout.4.html.snap-2.png b/__tests__/html2/markdown/math/layout.4.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.4.html.snap-3.png b/__tests__/html2/markdown/math/layout.4.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-2.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-3.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-4.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-4.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html b/__tests__/html2/markdown/math/layout.scroll.html
@@ -17,7 +17,7 @@
         const {
           Fluent: { createDarkTheme, createLightTheme, FluentProvider },
           ReactDOMClient: { createRoot },
-          WebChat: { FluentThemeProvider, ReactWebChat }
+          WebChat: { FluentThemeProvider, ReactWebChat, testIds }
         } = window; // Imports in UMD fashion.
 
         const { directLine, store } = testHelpers.createDirectLineEmulator();
@@ -77,6 +77,44 @@
         await pageConditions.numActivitiesShown(1);
 
         await host.snapshot('local');
+
+        // WHEN: Press ENTER over the activity.
+        document.querySelector(`#webchat [data-testid="${testIds.sendBoxTextBox}"]`).focus();
+
+        await host.sendShiftTab(
+          (searchParams.get('variant') === 'copilot' || searchParams.get('variant') === 'fluent') ? 2 : 3
+        );
+        await host.sendKeys('ENTER');
+
+        // THEN: Should focus on the first <figure>.
+        expect(document).toHaveProperty(
+          'activeElement',
+          pageElements.activityContents()[0].querySelectorAll('figure')[0]
+        );
+        // expect(document).toHaveProperty('activeElement.tagName', 'FIGURE');
+        await host.snapshot('local');
+
+        // ----------------------------------------
+
+        // WHEN: Press RIGHT key.
+        await host.sendKeys('RIGHT');
+
+        // THEN: Should scroll to the right.
+        await pageConditions.became('should scroll to the right', () => document.activeElement.scrollLeft > 10, 1000);
+        await pageConditions.stabilized('should finish scrolling', () => document.activeElement.scrollLeft, 5, 1000);
+        await host.snapshot('local');
+
+        // ----------------------------------------
+
+        // WHEN: Press TAB key.
+        await host.sendKeys('TAB');
+
+        // THEN: Should focus on the second <figure>.
+        expect(document).toHaveProperty(
+          'activeElement',
+          pageElements.activityContents()[0].querySelectorAll('figure')[1]
+        );
+        await host.snapshot('local');
       });
     </script>
   </body>

diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-2.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-3.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-4.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-4.png
diff --git a/packages/bundle/src/markdown/mathExtension/htmlRenderer.ts b/packages/bundle/src/markdown/mathExtension/htmlRenderer.ts
@@ -28,7 +28,8 @@ export default function createHtmlRenderer(options: CreateHtmlRendererOptions =
           type: 'block' | 'inline' | 'error' = defaults.type,
           tag: 'figure' | 'span' | 'pre' | 'code' = defaults.tag
         ) => {
-          this.tag(`<${tag} data-math-type="${type}">`);
+          // Math could be scrollable, need to be tabbable.
+          this.tag(`<${tag} data-math-type="${type}" tabindex="0">`);
           this.raw(content);
           this.tag(`</${tag}>`);
         };

diff --git a/packages/component/src/Styles/StyleSet/RenderMarkdown.ts b/packages/component/src/Styles/StyleSet/RenderMarkdown.ts
@@ -67,7 +67,7 @@ export default function createMarkdownStyle() {
         content: "'['"
       },
 
-      '& [data-math-type=block] math': {
+      '& [data-math-type=block]': {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'column',
@@ -76,7 +76,7 @@ export default function createMarkdownStyle() {
         scrollbarWidth: 'thin'
       },
 
-      '& [data-math-type=inline] math': {
+      '& [data-math-type=inline]': {
         alignItems: 'center',
         display: 'inline-flex',
         flexDirection: 'column'

diff --git a/packages/component/src/providers/HTMLContentTransformCOR/useTransformHTMLContent.ts b/packages/component/src/providers/HTMLContentTransformCOR/useTransformHTMLContent.ts
@@ -21,7 +21,7 @@ const DEFAULT_ALLOWED_TAGS: ReadonlyMap<string, Readonly<{ attributes: ReadonlyS
         ['del', []],
         ['div', []],
         ['em', []],
-        ['figure', ['data-math-type']],
+        ['figure', ['data-math-type', 'tabindex']],
         ['h1', []],
         ['h2', []],
         ['h3', []],

diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css
@@ -225,7 +225,7 @@
 /* Scrollbars */
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
 :global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body),
-:global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block'] math) {
+:global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block']) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;