Fluent: increase send box text size to prevent unwanted zoom on mobile (

#5192) * Fluent: increase focused send box text size to prevent unwanted zoom on mobile * Self review * Changelog
microsoft · May 28, 2024 · 058cccb · 058cccb
1 parent 6eb0f92
commit 058cccb
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Improved performance for `BasicTranscript`, in PR [5183](https://github.com/microsoft/BotFramework-WebChat/pull/5183), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed potential memory usage issues caused by `useActivitiesWithRenderer`, in PR [5183](https://github.com/microsoft/BotFramework-WebChat/pull/5183), by [@OEvgeny](https://github.com/OEvgeny)
 -  Improved performance for `useMemoized`, in PR [5190](https://github.com/microsoft/BotFramework-WebChat/pull/5190), by [@OEvgeny](https://github.com/OEvgeny)
+-  Fixed send box zoomed in when clicked on mobile Safari, in PR [5192](https://github.com/microsoft/BotFramework-WebChat/pull/5192), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

diff --git a/...-coarse-pointer-js-fluent-theme-applied-should-handle-coarse-pointer-1-snap.png b/...-coarse-pointer-js-fluent-theme-applied-should-handle-coarse-pointer-1-snap.png
diff --git a/...-coarse-pointer-js-fluent-theme-applied-should-handle-coarse-pointer-2-snap.png b/...-coarse-pointer-js-fluent-theme-applied-should-handle-coarse-pointer-2-snap.png
diff --git a/__tests__/html/fluentTheme/simple.coarsePointer.html b/__tests__/html/fluentTheme/simple.coarsePointer.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+    <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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        // GIVEN: On mobile device
+        await host.sendDevToolsCommand('Emulation.setTouchEmulationEnabled', {
+          enabled: true,
+          configuration: 'mobile'
+        });
+
+        const directLine = testHelpers.createDirectLineWithTranscript(
+          testHelpers.transcriptNavigation.generateTranscript()
+        );
+        const store = testHelpers.createStore();
+
+        const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
+
+        // WHEN: Typing text on mobile
+        await host.sendKeys('A quick brown fox jumped over the lazy dog.');
+
+        // THEN: Increases font-size to prevent zoom-in action
+        await host.snapshot();
+
+        // WHEN: Removing focus from the text box
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).blur();
+
+        // THEN: Decreases font-size back
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/fluentTheme/simple.coarsePointer.js b/__tests__/html/fluentTheme/simple.coarsePointer.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('should handle coarse pointer', () => runHTML('fluentTheme/simple.coarsePointer'));
+});
diff --git a/packages/fluent-theme/src/components/sendBox/SendBox.module.css b/packages/fluent-theme/src/components/sendBox/SendBox.module.css
@@ -79,6 +79,13 @@
   outline: none;
   padding: 4px 4px 0;
   resize: none;
+
+  /* Prevent zoom on focus on iOS */
+  @media only screen and (hover: none) and (pointer: coarse) {
+    &:focus-within {
+      font-size: 16px;
+    }
+  }
 }
 
 :global(.webchat-fluent) .sendbox__sendbox-controls {