Merge pull request #5 from GormFrank/dev

JS & Styles: Fix accessibility issues

src/connector.css

@@ -24,28 +24,31 @@
 
 /*
  * Render heading level 2 the same size as the heading level 4
- * To be replaced by out-of-the-box GCWeb
+ * To be added and replaced by out-of-the-box GCWeb
  */
 .page-type-search h2 {
 	font-size: 1.1em;
 }
 
+/*
+ * Render heading level 2 the same size as the heading level 4
+ * To be added and replaced by out-of-the-box GCWeb
+ */
+.page-type-search .location li, .page-type-search cite a {
+	word-break: break-word;
+}
+
 /*
  * Add top margin to alert
- * To be replaced by out-of-the-box GCWeb
+ * To be added and replaced by out-of-the-box GCWeb
  */
 .page-type-search .alert {
 	margin-top: 30px;
 }
 
-.page-type-search .did-you-mean {
-	font-weight: 600;
-	margin-left: 15px;
-}
-
 /*
  * Pagination styles 
- * To be replaced by out-of-the-box GCWeb
+ * To be added and replaced by out-of-the-box GCWeb
  */
 .pager>li>button, .pagination>li>button {
 	cursor: pointer;

src/connector.js

@@ -72,8 +72,8 @@ let lastCharKeyUp;
 
 // UI Elements placeholders 
 let searchBoxElement;
-let formElement = document.querySelector( 'form[action="#wb-land"]' );
-let resultsSection = document.querySelector( '.results' );
+let formElement = document.querySelector( '#gc-searchbox, form[action="#wb-land"]' );
+let resultsSection = document.querySelector( '#wb-land' );
 let resultListElement = document.querySelector( '#result-list' );
 let querySummaryElement = document.querySelector( '#query-summary' );
 let pagerElement = document.querySelector( '#pager' );
@@ -239,11 +239,11 @@ function initTpl() {
 	if ( !didYouMeanTemplateHTML ) {
 		if ( lang === "fr" ) {
 			didYouMeanTemplateHTML = 
-				`<p class="h5 mrgn-lft-md">Rechercher plutôt <button class="btn btn-link p-0" type="button">%[correctedQuery]</button> ?</p>`;
+				`<p class="h5 mrgn-lft-md">Rechercher plutôt <button class="btn btn-lg btn-link p-0" type="button">%[correctedQuery]</button> ?</p>`;
 		}
 		else {
 			didYouMeanTemplateHTML = 
-				`<p class="h5 mrgn-lft-md">Did you mean <button class="btn btn-link p-0" type="button">%[correctedQuery]</button> ?</p>`;
+				`<p class="h5 mrgn-lft-md">Did you mean <button class="btn btn-lg btn-link p-0" type="button">%[correctedQuery]</button> ?</p>`;
 		}
 	}
 
@@ -314,7 +314,6 @@ function initTpl() {
 	if ( !resultsSection ) {
 		resultsSection = document.createElement( "section" );
 		resultsSection.id = "wb-land";
-		resultsSection.classList.add( "results" );
 
 		baseElement.prepend( resultsSection );
 	}
@@ -339,6 +338,7 @@ function initTpl() {
 	if ( !resultListElement ) {
 		resultListElement = document.createElement( "div" );
 		resultListElement.id = "result-list";
+		resultListElement.classList.add( "results" );
 
 		resultsSection.append( resultListElement );
 	}
@@ -397,9 +397,6 @@ function initTpl() {
 			} );
 		}
 	}
-
-	// Now that the templates are iniated, update the user when idle of further change to the region
-	resultsSection.setAttribute( "aria-live", "polite" );
 }
 
 // Initiate headless engine
@@ -870,10 +867,6 @@ function updateResultListState( newState ) {
 			resultListElement.appendChild( sectionNode );
 		} );
 	}
-	else if ( resultListState.firstSearchExecuted && !resultListState.hasResults && !resultListState.hasError ) {
-		resultListElement.innerHTML = noResultTemplateHTML;
-		focusToView();
-	}
 }
 
 // Update heading that has number of results displayed
@@ -894,14 +887,14 @@ function updateQuerySummaryState( newState ) {
 				.replace( '%[query]', querySummaryState.query )
 				.replace( '%[queryDurationInSeconds]', querySummaryState.durationInSeconds.toLocaleString( params.lang ) );
 		}
+		else {
+			querySummaryElement.innerHTML = noResultTemplateHTML;
+		}
+		focusToView();
 	}
 	else if ( querySummaryState.hasError ) {
 		querySummaryElement.textContent = "";
 		querySummaryElement.innerHTML = resultErrorTemplateHTML;
-	}
-
-
-	if( !querySummaryState.isLoading && querySummaryElement.textContent !== "" ) {
 		focusToView();
 	}
 }
@@ -973,7 +966,7 @@ function updatePagerState( newState ) {
 
 		if ( page === pagerState.currentPage ) {
 			liNode.classList.add( "active" );
-			buttonNode.disabled = true;
+			buttonNode.setAttribute( "aria-current", "page" );
 		}
 
 		buttonNode.onclick = () => {

test/sra-en.html

@@ -8,13 +8,13 @@
 pageType: recherche
 share: false
 deptfeature: false
-dateModified: 2024-05-29
-stylesheets:
+dateModified: 2024-06-05
+css:
     - href: "../src/connector.css"
 ---
 
 <!--FORM-->
-<form action="#wb-land" method="get">  
+<form id="gc-searchbox">  
 	<fieldset> 
 		<legend class="h3 mrgn-tp-sm">Find pages with...</legend> 
 		<div class="form-group"> 
@@ -66,7 +66,8 @@
 	"searchHub": "canada-gouv-public-websites",
 	"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
 	"accessToken":"XYZ",
-	"isAdvancedSearch": true
+	"isAdvancedSearch": true,
+	"originLevel3": "/en/sr/srb/sra.html"
 }'></div>
 
 <!--DEMO-EXPECTATIONS-->

test/sra-fr.html

@@ -8,13 +8,13 @@
 pageType: recherche
 share: false
 deptfeature: false
-dateModified: 2024-05-29
-stylesheets:
+dateModified: 2024-06-05
+css:
     - href: "../src/connector.css"
 ---
 
 <!--FORM-->
-<form action="#wb-land" method="get">  
+<form id="gc-searchbox">  
 	<fieldset> 
 		<legend class="h3 mrgn-tp-sm">Trouvez des pages avec…</legend> 
 		<div class="form-group"> 
@@ -66,7 +66,8 @@
 	"searchHub": "canada-gouv-public-websites",
 	"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
 	"accessToken":"XYZ",
-	"isAdvancedSearch": true
+	"isAdvancedSearch": true,
+	"originLevel3": "/fr/sr/srb/sra.html"
 }'></div>
 
 <!--DEMO-EXPECTATIONS-->

test/srb-en.html

@@ -8,13 +8,13 @@
 pageType: recherche
 share: false
 deptfeature: false
-dateModified: 2024-03-14
-stylesheets:
+dateModified: 2024-06-05
+css:
     - href: "../src/connector.css"
 ---
 
 <!--FORM-->
-<form method="GET" action="#wb-land" class="mrgn-tp-sm">
+<form id="gc-searchbox" class="mrgn-tp-sm">
 	<div class="input-group mrgn-tp-lg">
 		<label class="wb-inv" for="sch-inp-ac">Search Government of Canada websites</label>
 		<input id="sch-inp-ac" class="form-control" value="" name="q" autocomplete="off" spellcheck="false" type="search" data-fusion-query="safe" aria-describedby="gc-pi">
@@ -29,7 +29,8 @@
 <div data-gc-search='{
 	"searchHub": "canada-gouv-public-websites",
 	"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
-	"accessToken":"XYZ"
+	"accessToken":"XYZ",
+	"originLevel3": "/en/sr/srb.html"
 }'></div>
 <p class="text-center small"><a href="sra-en.html">Perform an advanced search</a></p>
 

test/srb-fr.html

@@ -8,13 +8,13 @@
 pageType: recherche
 share: false
 deptfeature: false
-dateModified: 2024-03-14
-stylesheets:
+dateModified: 2024-06-05
+css:
     - href: "../src/connector.css"
 ---
 
 <!--FORM-->
-<form method="GET" action="#wb-land" class="mrgn-tp-sm">
+<form id="gc-searchbox" class="mrgn-tp-sm">
 	<div class="input-group mrgn-tp-lg">
 		<label class="wb-inv" for="sch-inp-ac">Rechercher les sites web du Gouvernment du Canada</label>
 		<input id="sch-inp-ac" class="form-control" value="" name="q" autocomplete="off" spellcheck="false" type="search" data-fusion-query="safe" aria-describedby="gc-pi">
@@ -29,7 +29,8 @@
 <div data-gc-search='{
 	"searchHub": "canada-gouv-public-websites",
 	"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
-	"accessToken":"XYZ"
+	"accessToken":"XYZ",
+	"originLevel3": "/fr/sr/srb.html"
 }'></div>
 <p class="text-center small"><a href="sra-fr.html">Effectuer une recherche avancée</a></p>
 

test/src-en.html

@@ -8,8 +8,8 @@
 pageType: recherche
 share: false
 deptfeature: false
-dateModified: 2024-05-29
-stylesheets:
+dateModified: 2024-06-05
+css:
     - href: "../src/connector.css"
 ---
 

test/src-fr.html

@@ -8,8 +8,8 @@
 pageType: recherche
 share: false
 deptfeature: false
-dateModified: 2024-05-29
-stylesheets:
+dateModified: 2024-06-05
+css:
     - href: "../src/connector.css"
 ---
 

todo.md

@@ -2,10 +2,11 @@
 
 This list contains outstanding suggestions / non-critical issues identified in previously merged pull requests. The following items do need to be addressed in due time.
 
+- [ ] Remove the need for having a CSS file to be handled by GCWeb instead!
+- [ ] Add missing pieces such as "error message", "no result" and "did you mean" into our reference implementation as an example
 - [ ] Potentially come up with an easier way to test locally
 - [ ] Add Expected output on test pages (HTML) and use Jekyll highlights
 - [ ] Finish proper development of Suggestion box (type-ahead)
-- [ ] Remove the need for having a CSS file to be handled by GCWeb instead
 - [ ] Add includes of JS (src) files in a baked in Jekyll variables instead of hardcoded
 - [ ] Align search pages with new GCWeb template and/or define new GCWeb templates
 - [ ] Ensure no section or heading or any element with semantic is added alone/empty on the page 
@@ -15,7 +16,6 @@ This list contains outstanding suggestions / non-critical issues identified in p
 - [ ] Improve caching of variable that are used multiple times in the script, such as: window.location, then window.location.pathname
 - [ ] Revisit how dates are handled for output formats (need an array of months?)
 - [ ] Make IDs configurable for "suggestion", "result-list", "result-link", "query-summary", "pager"
-- [ ] Add missing pieces such as "error message", "no result" and "did you mean" into our reference implementation as an example
 - [ ] Revisit customEvent to potentially be scoped to the search-ui element instead of document
 - [ ] Document customEvent
 - [ ] Improve warning message when Headless doesn't load