From d22a1a401db0cc0d14a0bb60a5abd7fbc92b6975 Mon Sep 17 00:00:00 2001
From: Jordan Willis <31868510+will0684@users.noreply.github.com>
Date: Thu, 31 Oct 2024 03:24:30 -0700
Subject: [PATCH] Post-2.0.0 Release Fixes (#1115)

* used meta name for twitter tags

* announce Feedback.js form submission to screen readers

* fix ProjectInfo modal position in Firefox mobile
---
 components/fragment_renderer/PageHead.js | 12 +++----
 components/organisms/Feedback.js         | 41 ++++++++++++++++--------
 styles/globals.css                       |  2 +-
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/components/fragment_renderer/PageHead.js b/components/fragment_renderer/PageHead.js
index 7972152531..337b0765e4 100644
--- a/components/fragment_renderer/PageHead.js
+++ b/components/fragment_renderer/PageHead.js
@@ -115,9 +115,9 @@ export default function PageHead(props) {
       />
 
       {/* Twitter */}
-      <meta property="twitter:card" content="summary_large_image" />
+      <meta name="twitter:card" content="summary_large_image" />
       <meta
-        property="twitter:url"
+        name="twitter:url"
         content={
           "https://alpha.service.canada.ca" +
           `${
@@ -128,7 +128,7 @@ export default function PageHead(props) {
         }
       />
       <meta
-        property="twitter:title"
+        name="twitter:title"
         content={
           props.locale === "en"
             ? props.pageData.scTitleEn
@@ -137,7 +137,7 @@ export default function PageHead(props) {
       />
       <meta name="twitter:creator" content="Service Canada" />
       <meta
-        property="twitter:description"
+        name="twitter:description"
         content={
           props.locale === "en"
             ? props.pageData.scTitleEn
@@ -145,11 +145,11 @@ export default function PageHead(props) {
         }
       />
       <meta
-        property="twitter:image"
+        name="twitter:image"
         content={props.pageData.scSocialMediaImageEn?._publishUrl}
       />
       <meta
-        property="twitter:image:alt"
+        name="twitter:image:alt"
         content={
           props.locale === "en"
             ? props.pageData.scTitleEn
diff --git a/components/organisms/Feedback.js b/components/organisms/Feedback.js
index 11c4f13c52..06c3ce312e 100644
--- a/components/organisms/Feedback.js
+++ b/components/organisms/Feedback.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
@@ -6,6 +6,7 @@ import { useTranslation } from "next-i18next";
 function Feedback() {
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [isProvidingFeedback, setIsProvidingFeedback] = useState(false);
+  const thankYouRef = useRef(null);
 
   const router = useRouter();
   const { t } = useTranslation("common");
@@ -22,9 +23,24 @@ function Feedback() {
       });
     } finally {
       setIsSubmitted(true);
+      // Focus will move to thank you message when it appears
+      setFocus(thankYouRef);
     }
   }
 
+  function onYesClick() {
+    setIsSubmitted(true);
+    setFocus(thankYouRef);
+  }
+
+  function setFocus(ref) {
+    setTimeout(() => {
+      if (ref.current) {
+        ref.current.focus();
+      }
+    }, 100);
+  }
+
   return (
     <div className="sm:flex items-center justify-between gap-20 bg-gray-light-200 p-5 max-w-[568px] border rounded">
       {isSubmitted && (
@@ -36,8 +52,10 @@ function Feedback() {
             height={25}
             style={{ width: 25, height: 25 }}
             priority
-          ></Image>
-          <p>{t("feedback.thank-you")}</p>
+          />
+          <p ref={thankYouRef} tabIndex={-1} role="status" aria-live="polite">
+            {t("feedback.thank-you")}
+          </p>
         </div>
       )}
 
@@ -54,7 +72,7 @@ function Feedback() {
                 name="what-was-wrong"
                 value="cant-find-info"
                 required
-              ></input>
+              />
               {t("feedback.cant-find-info")}
             </label>
             <label className="flex gap-2">
@@ -62,7 +80,7 @@ function Feedback() {
                 type="radio"
                 name="what-was-wrong"
                 value="hard-to-understand"
-              ></input>
+              />
               {t("feedback.hard-to-understand")}
             </label>
             <label className="flex gap-2">
@@ -70,16 +88,11 @@ function Feedback() {
                 type="radio"
                 name="what-was-wrong"
                 value="there-was-an-error"
-              ></input>
+              />
               {t("feedback.there-was-an-error")}
             </label>
             <label className="flex gap-2">
-              <input
-                type="radio"
-                name="what-was-wrong"
-                value="other-reason"
-              ></input>
-
+              <input type="radio" name="what-was-wrong" value="other-reason" />
               {t("feedback.other-reason")}
             </label>
           </fieldset>
@@ -98,7 +111,7 @@ function Feedback() {
               aria-describedby="extra-info maximum-characters"
               maxLength={300}
               className="p-1"
-            ></textarea>
+            />
           </label>
           <button className="bg-multi-blue-blue70 hover:bg-multi-blue-blue60e text-white rounded py-1 px-2">
             {t("feedback.submit")}
@@ -111,7 +124,7 @@ function Feedback() {
           <p className="font-semibold text-sm">{t("feedback.did-you-find")}</p>
           <div className="flex gap-2">
             <button
-              onClick={() => setIsSubmitted(true)}
+              onClick={() => onYesClick()}
               className="bg-multi-blue-blue70 hover:bg-multi-blue-blue60e text-white rounded py-1 px-2"
               aria-label={t("feedback.yes-aria-label")}
             >
diff --git a/styles/globals.css b/styles/globals.css
index 3dca8dbcb7..b70a00e0d9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -471,7 +471,7 @@ html {
   box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   background: #ffffff;
-  position: absolute;
+  position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);