Feedback buttons should not squash other buttons

CHANGELOG.md

@@ -87,6 +87,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Added sliding dots typing indicator in Fluent theme, in PR [#5447](https://github.com/microsoft/BotFramework-WebChat/pull/5447) and PR [#5448](https://github.com/microsoft/BotFramework-WebChat/pull/5448), by [@compulim](https://github.com/compulim)
 - (Experimental) Add an ability to pass `completion` prop into Fluent send box and expose the component, in PR [#5466](https://github.com/microsoft/BotFramework-WebChat/pull/5466), by [@OEvgeny](https://github.com/OEvgeny)
 - Added feedback form for like/dislike button when `feedbackActionsPlacement` is `"activity-actions"`, in PR [#5460](https://github.com/microsoft/BotFramework-WebChat/pull/5460), PR [#5469](https://github.com/microsoft/BotFramework-WebChat/pull/5469), and PR [5470](https://github.com/microsoft/BotFramework-WebChat/pull/5470) by [@lexi-taylor](https://github.com/lexi-taylor) and [@OEvgeny](https://github.com/OEvgeny)
+   - <kbd>ESCAPE</kbd> key should reset the feedback form, in PR [#5480](https://github.com/microsoft/BotFramework-WebChat/pull/5480), by [@compulim](https://github.com/compulim)
 - Added multi-dimensional grouping, `styleOptions.groupActivitiesBy`, and `useGroupActivitiesByName` hook, in PR [#5471](https://github.com/microsoft/BotFramework-WebChat/pull/5471), by [@compulim](https://github.com/compulim)
    - Existing behavior will be kept and activities will be grouped by `sender` followed by `status`
    - `useGroupActivitiesByName` is favored over the existing `useGroupActivities` hook for performance reason
@@ -221,6 +222,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed [#5472](https://github.com/microsoft/BotFramework-WebChat/issues/5472), ensure proper inheritance from the outside of Web Chat for visibility CSS property when hidden, in PR [#5473](https://github.com/microsoft/BotFramework-WebChat/pull/5473), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed [#5474](https://github.com/microsoft/BotFramework-WebChat/issues/5474). Disable AMD glue code in bundle, in PR [#5478](https://github.com/microsoft/BotFramework-WebChat/pull/5478), by [@compulim](https://github.com/compulim)
    - Downstreamers who use our CommonJS and ES Modules output with esbuild will need to disable AMD themselves to prevent conflict with RequireJS
+- Fixed [#5479](https://github.com/microsoft/BotFramework-WebChat/issues/5479). Fixed feedback form buttons should not squash other buttons, in PR [#5480](https://github.com/microsoft/BotFramework-WebChat/pull/5480), by [@compulim](https://github.com/compulim)
+   - Migrated to radio button for like/dislike where form submission is required
 
 # Removed
 

__tests__/html/fluentTheme/side-by-side.wide.dark.html

@@ -834,14 +834,15 @@
           await host.snapshot();
           await host.sendKeys('TAB');
           await host.snapshot();
-          await host.sendKeys('ENTER');
+          await host.sendKeys('SPACE');
           await host.snapshot();
           await host.sendKeys('TAB');
           await host.snapshot();
-          await host.sendKeys('ENTER');
+          await host.sendKeys('SPACE');
           await host.snapshot();
-          await host.sendKeys('ESCAPE');
-          await host.sendKeys('ESCAPE');
+          await host.sendKeys('SPACE'); // Clear feedback but still focused on feedback button
+          await host.sendKeys('ESCAPE'); // Focus on activity
+          await host.sendKeys('ESCAPE'); // Clear activity selection
           await host.snapshot();
         }
       }));

__tests__/html/fluentTheme/side-by-side.wide.html

@@ -817,14 +817,15 @@
           await host.snapshot();
           await host.sendKeys('TAB');
           await host.snapshot();
-          await host.sendKeys('ENTER');
+          await host.sendKeys('SPACE');
           await host.snapshot();
           await host.sendKeys('TAB');
           await host.snapshot();
-          await host.sendKeys('ENTER');
+          await host.sendKeys('SPACE');
           await host.snapshot();
-          await host.sendKeys('ESCAPE');
-          await host.sendKeys('ESCAPE');
+          await host.sendKeys('SPACE'); // Clear feedback but still focused on feedback button
+          await host.sendKeys('ESCAPE'); // Focus on activity
+          await host.sendKeys('ESCAPE'); // Clear activity selection
           await host.snapshot();
         }
       }));

__tests__/html2/feedbackForm/behavior.changeMind.keyboard.html

@@ -0,0 +1,130 @@
+<!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@7.8.7/babel.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>
+  </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 {
+          WebChat: { renderWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const styleOptions = {
+          feedbackActionsPlacement: 'activity-actions'
+        };
+
+        renderWebChat({ directLine, store, styleOptions }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          channelData: {
+            feedbackLoop: {
+              type: 'default'
+            }
+          },
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              type: 'https://schema.org/Message',
+              potentialAction: [
+                {
+                  '@type': 'LikeAction',
+                  actionStatus: 'PotentialActionStatus',
+                  target: {
+                    '@type': 'EntryPoint',
+                    urlTemplate: 'ms-directline://postback?interaction=like'
+                  }
+                },
+                {
+                  '@type': 'DislikeAction',
+                  actionStatus: 'PotentialActionStatus',
+                  result: {
+                    '@type': 'Review',
+                    reviewBody: "I don't like it.",
+                    'reviewBody-input': {
+                      '@type': 'PropertyValueSpecification',
+                      valueMinLength: 3,
+                      valueName: 'reason'
+                    }
+                  },
+                  target: {
+                    '@type': 'EntryPoint',
+                    urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
+                  }
+                }
+              ]
+            }
+          ],
+          text: `Ad quis ex deserunt irure in proident velit ut amet irure elit nulla deserunt.`,
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: The dislike button is pressed.
+        pageElements.allByTestId(testIds.feedbackButton)[1].focus();
+        await host.sendKeys('SPACE');
+
+        // THEN: Should focus on the feedback form text box.
+        await waitFor(() => expect(document.activeElement).toBe(pageElements.allByTestId(testIds.feedbackSendBox)[0]));
+
+        // WHEN: SHIFT-TAB is pressed.
+        await host.sendShiftTab();
+
+        // THEN: The dislike button should be focused.
+        expect(document.activeElement).toBe(pageElements.allByTestId(testIds.feedbackButton)[1]);
+
+        // WHEN: Left arrow key is pressed.
+        await host.sendKeys('LEFT');
+
+        // THEN: The like button should be focused.
+        expect(document.activeElement).toBe(pageElements.allByTestId(testIds.feedbackButton)[0]);
+
+        // THEN: The like button should be selected.
+        expect(pageElements.allByTestId(testIds.feedbackButton)[0].matches(':checked')).toBe(true);
+
+        // WHEN: Type a message in the feedback box and submit.
+        await host.sendKeys('TAB');
+        await host.sendKeys('Qui sint consequat reprehenderit aliquip esse duis.');
+
+        // THEN: It should submit with like.
+        const { activity } = await directLine.actPostActivity(() => host.sendKeys('ENTER'));
+
+        expect(activity).toEqual(
+          expect.objectContaining({
+            type: 'invoke',
+            value: {
+              actionName: 'feedback',
+              actionValue: {
+                feedback: {
+                  feedbackText: 'Qui sint consequat reprehenderit aliquip esse duis.'
+                },
+                reaction: 'like'
+              }
+            }
+          })
+        );
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/feedbackForm/behavior.changeMind.mouse.html

@@ -0,0 +1,123 @@
+<!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@7.8.7/babel.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>
+  </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 {
+          WebChat: { renderWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const styleOptions = {
+          feedbackActionsPlacement: 'activity-actions'
+        };
+
+        renderWebChat({ directLine, store, styleOptions }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          channelData: {
+            feedbackLoop: {
+              type: 'default'
+            }
+          },
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              type: 'https://schema.org/Message',
+              potentialAction: [
+                {
+                  '@type': 'LikeAction',
+                  actionStatus: 'PotentialActionStatus',
+                  target: {
+                    '@type': 'EntryPoint',
+                    urlTemplate: 'ms-directline://postback?interaction=like'
+                  }
+                },
+                {
+                  '@type': 'DislikeAction',
+                  actionStatus: 'PotentialActionStatus',
+                  result: {
+                    '@type': 'Review',
+                    reviewBody: "I don't like it.",
+                    'reviewBody-input': {
+                      '@type': 'PropertyValueSpecification',
+                      valueMinLength: 3,
+                      valueName: 'reason'
+                    }
+                  },
+                  target: {
+                    '@type': 'EntryPoint',
+                    urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}'
+                  }
+                }
+              ]
+            }
+          ],
+          text: `Exercitation ex enim tempor elit tempor pariatur eiusmod ex duis est in Lorem velit sunt.`,
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: The like button is tapped.
+        await host.click(pageElements.allByTestId(testIds.feedbackButton)[0]);
+
+        // THEN: Should focus on the feedback form text box.
+        await waitFor(() => expect(document.activeElement).toBe(pageElements.allByTestId(testIds.feedbackSendBox)[0]));
+
+        // WHEN: The dislike button is tapped.
+        await host.click(pageElements.allByTestId(testIds.feedbackButton)[1]);
+
+        // THEN: The dislike button should be focused.
+        expect(document.activeElement).toBe(pageElements.allByTestId(testIds.feedbackButton)[1]);
+
+        // THEN: The dislike button should be selected.
+        expect(pageElements.allByTestId(testIds.feedbackButton)[1].matches(':checked')).toBe(true);
+
+        // WHEN: Type a message in the feedback box and submit.
+        await host.click(pageElements.allByTestId(testIds.feedbackSendBox)[0]);
+        await host.sendKeys('Nostrud ad irure commodo magna pariatur aliqua.');
+
+        // THEN: It should submit with dislike.
+        const { activity } = await directLine.actPostActivity(() => host.sendKeys('ENTER'));
+
+        expect(activity).toEqual(
+          expect.objectContaining({
+            type: 'invoke',
+            value: {
+              actionName: 'feedback',
+              actionValue: {
+                feedback: {
+                  feedbackText: 'Nostrud ad irure commodo magna pariatur aliqua.'
+                },
+                reaction: 'dislike'
+              }
+            }
+          })
+        );
+      });
+    </script>
+  </body>
+</html>