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

@@ -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,19 +137,19 @@ 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
             : props.pageData.scTitleFr
         }
       />
       <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

components/organisms/Feedback.js

@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 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,32 +72,27 @@ function Feedback() {
                 name="what-was-wrong"
                 value="cant-find-info"
                 required
-              ></input>
+              />
               {t("feedback.cant-find-info")}
             </label>
             <label className="flex gap-2">
               <input
                 type="radio"
                 name="what-was-wrong"
                 value="hard-to-understand"
-              ></input>
+              />
               {t("feedback.hard-to-understand")}
             </label>
             <label className="flex gap-2">
               <input
                 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")}
             >

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%);