still wip, fix the aria-label to contain text

wet-boew · Jan 25, 2024 · 2c8c52d · 2c8c52d
1 parent 990902c
commit 2c8c52d
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 5 deletions.
diff --git a/src/gcintranet/appFooter.ejs b/src/gcintranet/appFooter.ejs
@@ -19,9 +19,11 @@
                     const footerSection=pr.footerSections[sectionIndex];-%>
                     <%_ if (footerSection.customFooterLinks != null) { -%>
                         <%_ if (sectionIndex < 3) { -%>
-                            <section class="col-md-3 col-sm-6 col-lg-3" aria-labelledby="<%= (footerSection.sectionName).replaceAll(/\s/g,'') %>">
                                 <%_ if (footerSection.sectionName != null) { -%>
-                                    <h3 id="<%= (footerSection.sectionName).replaceAll(/\s/g,'') %>"><%= footerSection.sectionName %></h3>
+                                    <section class="col-md-3 col-sm-6 col-lg-3" aria-labelledby="cdts-footerSection<%= sectionIndex %>">
+                                    <h3 id="cdts-footerSection<%= sectionIndex %>"><%= footerSection.sectionName %></h3>
+                                <%_ } else { -%>
+                                    <section class="col-md-3 col-sm-6 col-lg-3" aria-label="<^- msg('Footer') ^>">
                                 <%_ } -%>
                                 <ul class="list-unstyled">
                                     <%_ for (var linkIndex=0; linkIndex<footerSection.customFooterLinks.length; linkIndex++) {
@@ -32,9 +34,11 @@
                             </section>
                         <%_ } -%>
                     <%_ } else if (sectionIndex == 0) { /*For backward compatibility */ -%>
-                        <section class="col-md-3 col-sm-6 col-lg-3" aria-labelledby="cdts-sectionName">
                             <%_ if (footerSection.sectionName != null) { -%>
-                                <h3 id="cdts-sectionName"><%= footerSection.sectionName %></h3>
+                                <section class="col-md-3 col-sm-6 col-lg-3" aria-labelledby="cdts-footerSection">
+                                <h3 id="cdts-footerSection"><%= footerSection.sectionName %></h3>
+                            <%_ } else { -%>
+                                <section class="col-md-3 col-sm-6 col-lg-3" aria-label="<^- msg('Footer') ^>">
                             <%_ } -%>
                             <ul class="list-unstyled">
                                 <%_ for (var linkIndex=0; linkIndex<pr.footerSections.length; linkIndex++) {

diff --git a/src/gcintranet/wet-messages.en.json b/src/gcintranet/wet-messages.en.json
@@ -9,6 +9,10 @@
         "source": "Related links",
         "target": null
     },
+    "26c01e70a337f208f56dae1c3bc18f60c4bff453": {
+        "source": "Footer",
+        "target": null
+    },
     "1d8b1236d7b70a9ca73929aa23ac4bfd96450bb1": {
         "source": "This link will open in a new window",
         "target": null

diff --git a/src/gcintranet/wet-messages.fr.json b/src/gcintranet/wet-messages.fr.json
@@ -448,5 +448,9 @@
     "5a4356b4e754ea9c3775e8c156860a6e18ab6b54": {
         "source": "GC Tools",
         "target": "Outils GC"
+    },
+    "26c01e70a337f208f56dae1c3bc18f60c4bff453": {
+        "source": "Footer",
+        "target": "Pied de page"
     }
 }
diff --git a/test/pageobjects/appFooter.page.js b/test/pageobjects/appFooter.page.js
@@ -26,6 +26,7 @@ class AppFooterPage extends Page {
     get customFooterLinkTextSubTheme() { return $('//footer[@id="wb-info"]/nav/h2/following-sibling::div/section[4]/h3'); }
     get cssScriptESDC() { return $('//head/link[contains(@href, "/cdts/esdc.css")] | //head/link[contains(@href, "cdts-esdc-styles.css")] | //head/link[contains(@href, "cdts-labour-styles.css")]'); }
     get cssScriptECCC() { return $('//head/link[contains(@href, "/cdts/eccc.css")] | //head/link[contains(@href, "cdts-eccc-styles.css")]'); }
+    get footerSectionIntranet() { return $('//footer/nav/div/section[@class="col-md-3 col-sm-6 col-lg-3"]')}
 
     /**
     * Opens a sub page of the page

diff --git a/test/specs/appFooter.js b/test/specs/appFooter.js
@@ -241,6 +241,22 @@ describe('AppFooter section tests for GCIntranet', () => {
         refFooter: '{"cdnEnv": "localhost"}'
 	});
 
+    generateTestFile('./test/html/gcintranet/template-gcintranetapp-en.html', 'gcintranet', 'gcintranet-appFooter-noFooterSectionName-en', {
+        refTop: '{"cdnEnv": "localhost", "subTheme": "labour"}',
+        appTop: '{"cdnEnv": "localhost", "appName": [{"text": "Application name", "href": "#"}]}',
+        preFooter: '{"cdnEnv": "localhost"}',
+        appFooter: '{"subTheme":"labour", "footerSections":[{ "customFooterLinks":[{ "href":"#", "text":"link1-1-new Window", "newWindow":true }] }, { "sectionName":"Custom Section 2", "customFooterLinks":[{ "href":"#", "text":"link2-1-new Window", "newWindow":true }] }, { "sectionName":"Custom Section 3", "customFooterLinks":[{ "href":"#", "text":"link3-1-new Window", "newWindow":true }] }], "cdnEnv": "localhost"}',
+        refFooter: '{"cdnEnv": "localhost"}'
+	});
+
+    generateTestFile('./test/html/gcintranet/template-gcintranetapp-fr.html', 'gcintranet', 'gcintranet-appFooter-noFooterSectionName-fr', {
+        refTop: '{"cdnEnv": "localhost"}',
+        appTop: '{"cdnEnv": "localhost", "appName": [{"text": "Application name", "href": "#"}]}',
+        preFooter: '{"cdnEnv": "localhost"}',
+        appFooter: '{"subTheme":"labour", "footerSections":[{ "customFooterLinks":[{ "href":"#", "text":"link1-1-new Window", "newWindow":true }] }, { "sectionName":"Custom Section 2", "customFooterLinks":[{ "href":"#", "text":"link2-1-new Window", "newWindow":true }] }, { "sectionName":"Custom Section 3", "customFooterLinks":[{ "href":"#", "text":"link3-1-new Window", "newWindow":true }] }], "cdnEnv": "localhost"}',
+        refFooter: '{"cdnEnv": "localhost"}'
+	});
+
     it('Validate the footer links', async () => {
         await footerLinksIntranet(theme, 'en');
         await footerLinksIntranet(theme, 'fr');
@@ -294,6 +310,16 @@ describe('AppFooter section tests for GCIntranet', () => {
         await cssScriptECCC(theme, 'en');
     });
 
+    it('Test if aria-label when no footer section name', async () => {
+        await customFooterNoSectionName(theme, 'en');
+        await customFooterNoSectionName(theme, 'fr');
+    });
+
+    it('Test if aria-labelledby with footer section name', async () => {
+        await customFooterWithSectionName(theme, 'en');
+        await customFooterWithSectionName(theme, 'fr');
+    });
+
     it('Accessibility', async () => {
         await accessibility(theme, 'en');
         await accessibility(theme, 'fr');
@@ -415,6 +441,16 @@ async function footerContactLink(theme, lang){
     await expect(appFooterPage.contactLink).toHaveHrefContaining('contactLinksTest');
 }
 
+async function customFooterNoSectionName(theme, lang){
+    await appFooterPage.open(theme, lang, 'noFooterSectionName');
+    await expect(appFooterPage.footerSectionIntranet).toHaveAttribute('aria-label');
+}
+
+async function customFooterWithSectionName(theme, lang){
+    await appFooterPage.open(theme, lang);
+    await expect(appFooterPage.footerSectionIntranet).toHaveAttribute('aria-labelledby');
+}
+
 async function accessibility(theme, lang) {
     await appFooterPage.open(theme, lang);
     await runAccessbilityTest();

diff --git a/wdio.conf.js b/wdio.conf.js
@@ -36,7 +36,8 @@ exports.config = {
     // directory is where your package.json resides, so `wdio` will be called from there.
     //
     specs: [
-        './test/specs/**/*.js'
+        // './test/specs/**/*.js'
+        './test/specs/**/appFooter.js'
     ],
     // Patterns to exclude.
     exclude: [