Feedback buttons should not squash other buttons

[compulim]

Fixes #5479.

Changelog Entry

Fixed

• Fixed #5479. Fixed feedback form buttons should not squash other buttons, in PR #5480, by @compulim
  • Migrated to radio button for like/dislike where form submission is required

Description

UI issue

When the feedback form is enabled, the feedback buttons are grouped in a flex container and its width is set to 100%, forcing other component to squash.

Form

A <form> is now put around the like/dislike button and the feedback form. It will handle all kind of like/dislike and form submissions.

Button vs. radio button

• If no feedback form, the like/dislike button is an action, thus, they are <input type="button"> and submitted (almost) immediately
  • Press ESC will do nothing as the selection has already submitted
• If feedback form is available, the like/dislike is <input type="radio">
  • Press ESC will cancel the selection of like/dislike

Design

Moving from channelData to entities

Today, due to limitation on Copilot Studio backend, we have to use channelData.feedbackLoop as a temporary solution to indicate feedback that would have review feedback.

{
  "channelData": {
    "feedbackLoop": {
      "disclaimer": "...", // optional
      "type": "default"
    }
  },
  "entities": [
    {
      "@id": "",
      "@type": "Message"
      "potentialAction": [
        {
          "@type": "LikeAction"
        },
        {
          "@type": "DislikeAction"
        }
      ]
    }
  ],
  "text": "...",
  "type": "message"
}

In this PR, we are leveraging the Schema.org standard:

{
  "entities": [
    {
      "@id": "",
      "@type": "Message"
      "potentialAction": [
        {
          "@type": "LikeAction",
          "result": {
            "@type": "UserReview",
            "reviewAspect": "..." // optional
          }
        },
        {
          "@type": "DislikeAction",
          "result": {
            "@type": "UserReview",
            "reviewAspect": "..." // optional
          }
        }
      ]
    }
  ],
  "text": "...",
  "type": "message"
}

The LikeAction literally means: "the user liked this message and that action resulted in a user review." The review content (feedback text) will become UserReview.reviewBody in latter PR.

We will maintain the backcompat code that migrate channelData.feedbackLoop to entities[@id=""].potentialAction.result until Copilot Studio fully onboarded the standard payload.

Specific Changes

• Updated feedback form to do the grouping differently

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[OEvgeny]

The perf of RTL is what concerns me...