Merge pull request #408 from DTS-STN/sch-a11yfix3

a11y fixes
DTS-STN · Oct 23, 2023 · 4c7f35d · 4c7f35d
2 parents ceafbf5 + ac362fd
commit 4c7f35d
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 19 deletions.
diff --git a/components/Card.js b/components/Card.js
@@ -24,7 +24,7 @@ export default function Card(props) {
         className="pb-6 md:pb-8 md:pt-4 px-3 sm:px-8 md:px-15 w-full"
         acronym={props.acronym}
         refPageAA={props.refPageAA}
-        ariaLabel={props.cardTitle}
+        ariaLabel={`${props.cardTitle} - ${props.viewMoreLessCaption}`}
       />
       {!isOpen ? null : (
         <div className="pb-6" data-cy="sectionList">

diff --git a/components/ContextualAlert.js b/components/ContextualAlert.js
@@ -87,8 +87,8 @@ ContextualAlert.propTypes = {
   /**
    * heading text
    */
-  message_heading: PropTypes.string.isRequired,
-
+  message_heading: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+    .isRequired,
   /**
    * body text
    */

diff --git a/components/Footer.js b/components/Footer.js
@@ -49,7 +49,7 @@ export function Footer(props) {
                   href={btnLink}
                   className="sm:hidden float-left cursor-pointer text-sm"
                 >
-                  Top of page / Haut de la page
+                  {t.topOfPage}
                   <FontAwesomeIcon
                     icon={icon['chevron-up']}
                     className="text-sm sm:hidden pl-2"
@@ -89,7 +89,7 @@ export function Footer(props) {
                     })}
                     <li className="sm:hidden float-left cursor-pointer text-sm">
                       <a id="top_btn" href={btnLink}>
-                        Top of page / Haut de la page
+                        {t.topOfPage}
                         <FontAwesomeIcon
                           icon={icon['chevron-up']}
                           className="text-sm sm:hidden pl-2"
@@ -112,7 +112,7 @@ export function Footer(props) {
                     : 'h-[25px] md:h-[40px] w-[105px] md:w-[164px]'
                 } my-[15px]`}
                 src={logo}
-                alt="Symbol of the Government of Canada"
+                alt={t.footerCanadaCaAltText}
                 width={143}
                 height={34}
               />

diff --git a/components/Header.js b/components/Header.js
@@ -40,7 +40,11 @@ export function Header(props) {
                     : 'md:max-h-[35px] max-h-[20px]'
                 } md:max-w-[360px] max-w-[206px]`}
                 src={lang === 'en' ? logoFile : logoFileFR}
-                alt="Government of Canada"
+                alt={
+                  lang === 'en'
+                    ? 'Government of Canada'
+                    : 'Governement du Canada'
+                }
                 width={819}
                 height={76}
               />

diff --git a/components/Menu.js b/components/Menu.js
@@ -28,18 +28,26 @@ export function Menu(props) {
     return () => window.removeEventListener('click', handleClick)
   }, [showDropdown])
 
+  useEffect(() => {
+    if (!showDropdown) return
+    function handleEsc(event) {
+      if (event.key === 'Escape') {
+        setShowDropdown(false)
+      }
+    }
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
+  }, [showDropdown])
+
   return (
-    <div className="relative w-full bg-blue-primary">
+    <div className="w-full bg-blue-primary">
       <nav className="sch-container sch-container-menu sm:flex items-center justify-between sm:h-[60px]">
-        <div className="h-[60px] flex sm:h-full items-center">
-          <p
-            id="mainSiteNav"
-            className="text-white font-display font-bold md:text-[24px] text-[19px] sm:p-0 sch-container mb-0 pr-0 sm:ml-4 md:ml-0"
-          >
+        <div className="h-[60px] flex items-center text-white font-display font-bold text-[19px] leading-[21px] md:text-2xl mx-15px md:m-0 ">
+          <span id="mainSiteNav">
             {lang === 'fr'
               ? 'Mon dossier Service Canada'
               : 'My Service Canada Account'}
-          </p>
+          </span>
         </div>
         <div
           className="w-full sm:w-[260px] h-full bg-bright-blue-pale hover:bg-gray-50a focus:bg-gray-50a"
@@ -54,7 +62,7 @@ export function Menu(props) {
             aria-haspopup="true"
             data-testid="menuButton"
             aria-expanded={showDropdown}
-            className="flex h-[60px] justify-between w-full h-full font-bold font-body items-center sm:py-2px pl-4 text-blue-primary ring-offset-2 focus:ring-2 ring-blue-hover rounded-sm focus:outline-none focus:mb-1"
+            className="flex justify-between w-full h-full font-bold font-body items-center py-0.5 pl-4 text-blue-primary ring-offset-2 focus:ring-2 ring-blue-hover rounded-sm focus:outline-none focus:mb-1"
           >
             <span className="flex items-center">
               <svg

diff --git a/cypress/e2e/PageObjects/termsAndConditionsPO.cy.js b/cypress/e2e/PageObjects/termsAndConditionsPO.cy.js
@@ -31,7 +31,7 @@ function BackToDashboardButton() {
 }
 
 function ValidateinformationSection() {
-  cy.get('[data-cy="terms-conditions"]>div:nth-child(2)').should('be.visible')
+  cy.get('[data-cy="terms-conditions"]').should('be.visible')
 }
 
 module.exports = {

diff --git a/pages/privacy-notice-terms-conditions.js b/pages/privacy-notice-terms-conditions.js
@@ -32,7 +32,7 @@ export default function PrivacyCondition(props) {
       <ContextualAlert
         id="PrivacyCondition-alert"
         type={props.content.alert.type}
-        message_heading="Information"
+        message_heading={<h2>Information</h2>}
         message_body={props.content.alert.text}
         alert_icon_alt_text="info icon"
         alert_icon_id="info-icon"
@@ -54,7 +54,7 @@ export default function PrivacyCondition(props) {
               ol: {
                 props: {
                   className:
-                    'list-[lower-decimal] [&>li>ol]:list-[lower-latin] [&>li>ol>li>ol]:list-[lower-roman] mx-8 mb-3',
+                    'list-[lower-decimal] [&>li>ol]:list-[lower-latin] [&>li>ol>li>ol]:list-[lower-roman] ml-2 sm:mx-8 mb-3',
                 },
               },
               a: {
@@ -85,7 +85,7 @@ export default function PrivacyCondition(props) {
               ol: {
                 props: {
                   className:
-                    'list-[lower-decimal] [&>li>ol]:list-[lower-latin] [&>li>ol>li>ol]:list-[lower-roman] mx-8 mb-3',
+                    'break-all xs:break-normal list-[lower-decimal] [&>li>ol]:list-[lower-latin] [&>li>ol>li>ol]:list-[lower-roman] ml-2 sm:mx-8 mb-3',
                 },
               },
               a: {