feat(ai-scan-support): Feedback mechanism and Copy Failure Details button (only for HTML reports) (#7576)

This PR follows:
#7570

#### Details

<!-- Usually a sentence or two describing what the PR changes -->

- Feedback mechanism is enabled when `feedbackURL` is provided AND the
issue's guidance matches `AI_SCAN`
- Copy failure details button is implemented for HTML reports


https://github.com/user-attachments/assets/c2f74853-67d8-4869-ac25-20887a1616a8

##### Motivation

<!-- This can be as simple as "addresses issue #123" -->

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->

<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [ ] Ran `yarn fastpass`
- [ ] Added/updated relevant unit test(s) (and ran `yarn test`)
- [ ] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [ ] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [ ] (UI changes only) Added screenshots/GIFs to description above
- [ ] (UI changes only) Verified usability with NVDA/JAWS

Author: ashkan0x

packages/report-e2e-tests/src/examples/axe-results-with-ai-issues-and-feedback-url.input.ts

@@ -924,6 +924,127 @@
   display: flex;
 }
 
+/* css-modules:src/common/components/cards/failed-instances-markup-footer */
+.markup-footer--HEVHv {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--neutral-2, #f8f8f8);
+  min-height: 48px;
+  padding-top: 0;
+  padding-right: 20px;
+  padding-bottom: 0;
+  padding-left: 20px;
+  border-top: 0.5px solid var(--card-footer-border, #dedede);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  margin-top: 0;
+}
+.feedback-text--yBb6Z {
+  font-size: 14px;
+  color: var(--secondary-text, rgba(0, 0, 0, 0.7));
+  margin-right: 12px;
+}
+.feedback-buttons--rDHVY {
+  display: flex;
+  gap: 8px;
+}
+.buttons-group-left--JSoCT {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.buttons-group-right--SKsSu {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  position: relative;
+  margin-left: auto;
+}
+.feedback-button--Vn-lA {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-60, #666);
+  text-decoration: none;
+  font-size: 14px;
+  gap: 6px;
+}
+.feedback-button--Vn-lA:hover {
+  background-color: var(--neutral-alpha-4, rgba(0, 0, 0, 0.04));
+}
+.feedback-button--Vn-lA span {
+  margin-left: 6px;
+  font-size: 14px;
+}
+.ai-content-label--1cidK {
+  background-color: var(--neutral-10, #e6e6e6);
+  color: var(--neutral-60, #666);
+  font-size: 12px;
+  padding-top: 4px;
+  padding-right: 10px;
+  padding-bottom: 4px;
+  padding-left: 10px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.notification-container--axJpL {
+  position: relative;
+  height: 0;
+  width: 0;
+}
+.copy-notification--MlMTG {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  background-color: var(--neutral-80, #333);
+  color: white;
+  padding-top: 6px;
+  padding-right: 12px;
+  padding-bottom: 6px;
+  padding-left: 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  animation: fade-in-out--AuVTM 2s ease-in-out;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+  z-index: 100;
+  display: none;
+}
+.copy-notification--MlMTG.visible--GCwEf {
+  display: inline-block;
+}
+.hidden-content--9JuU6 {
+  display: none;
+}
+@keyframes fade-in-out--AuVTM {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  80% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
 /* css-modules:src/common/components/toast */
 .toast-container--L-5HM {
   display: inline-block;
@@ -1531,4 +1652,33 @@
             }
         });
     }
+})(document)</script><script>(function(doc) {
+    const copyToClipboard = async function(instanceId) {
+        const contentId = `copy-content-${instanceId}`;
+        const contentElement = doc.getElementById(contentId);
+        const textToCopy = contentElement ? contentElement.textContent || "" : instanceId;
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+        } catch (err) {
+            console.error("Failed to copy text: ", err);
+            return;
+        }
+        const notificationId = `copy-notification-${instanceId}`;
+        const notificationElement = doc.getElementById(notificationId);
+        if (notificationElement) {
+            notificationElement.style.display = "inline";
+            setTimeout(function() {
+                notificationElement.style.display = "none";
+            }, 2e3);
+        }
+    };
+    const copyButtons = doc.querySelectorAll('button[id^="copy-button-"]');
+    for(let i = 0; i < copyButtons.length; i++){
+        const button = copyButtons[i];
+        const buttonId = button.id;
+        const instanceId = buttonId.replace("copy-button-", "");
+        button.addEventListener("click", function() {
+            void copyToClipboard(instanceId);
+        });
+    }
 })(document)</script></div></main><div class="report-footer-container"><div class="report-footer" role="contentinfo">This automated checks result was generated using the Service Name for Axe Results Without Issues that helps find some of the most common accessibility issues. The scan was performed in a clean browser environment, using axe-core 3.3.2 and Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/78.0.3904.108 Safari/537.36 with a display resolution of 800x600. For a complete WCAG 2.1 compliance assessment please visit <a target="_blank" href="http://aka.ms/AccessibilityInsights" class="ms-Link insights-link tool-name-link root-109" title="Get more information and download Accessibility Insights for Web">http://aka.ms/AccessibilityInsights</a>.</div></div></body></html>