Merge pull request #1151 from sharelatex/jel-wiki-search-a11y

Accessible Wiki Search

GitOrigin-RevId: af9b5444fe1be1ced16f3049bfc1ac731c8bebd5

services/web/app/views/_mixins/faq_search.pug

@@ -3,7 +3,7 @@ mixin faq_search(headerText, headerClass)
 		if headerText
 			div(class=headerClass) #{headerText}
 		.wiki(ng-controller="SearchWikiController")
-			form.project-search.form-horizontal(role="form")
+			form.project-search.form-horizontal(role="search")
 				.form-group.has-feedback.has-feedback-left
 					.col-sm-12
 						input.form-control(type='text', ng-model='searchQueryText', ng-keyup='search()', placeholder="Search help library....")
@@ -19,8 +19,11 @@ mixin faq_search(headerText, headerClass)
 							ng-show="searchQueryText.length > 0"
 						) #{translate('clear_search')}
 
-			.row
+			.row(role="region" aria-label="search results")
 				.col-md-12(ng-cloak)
+					span.sr-only(ng-show="searchQueryText.length > 0" aria-live="polite")
+						span(ng-if="hits_total > config_hits_per_page") Showing first {{hits.length}} results of {{hits_total}} for {{searchQueryText}}
+						span(ng-if="hits_total <= config_hits_per_page") {{hits.length}} results for {{searchQueryText}}
 					a(ng-href='{{hit.url}}',ng-repeat='hit in hits').search-result.card.card-thin
 						span(ng-bind-html='hit.name')
 						div.search-result-content(ng-show="hit.content != ''", ng-bind-html='hit.content')

services/web/public/src/main/learn.js

@@ -24,6 +24,8 @@ define(['base', 'directives/mathjax', 'services/algolia-search'], function(
     $modal
   ) {
     $scope.hits = []
+    $scope.hits_total = 0
+    $scope.config_hits_per_page = 20
 
     $scope.clearSearchText = function() {
       $scope.searchQueryText = ''
@@ -68,24 +70,35 @@ define(['base', 'directives/mathjax', 'services/algolia-search'], function(
       return result
     }
 
-    var updateHits = hits => $scope.safeApply(() => ($scope.hits = hits))
+    var updateHits = (hits, hits_total = 0) => {
+      $scope.safeApply(() => {
+        $scope.hits = hits
+        $scope.hits_total = hits_total
+      })
+    }
 
-    return ($scope.search = function() {
+    $scope.search = function() {
       const query = $scope.searchQueryText
       if (query == null || query.length === 0) {
         updateHits([])
         return
       }
 
-      return algoliaSearch.searchWiki(query, function(err, response) {
-        if (response.hits.length === 0) {
-          return updateHits([])
-        } else {
-          const hits = _.map(response.hits, buildHitViewModel)
-          return updateHits(hits)
+      return algoliaSearch.searchWiki(
+        query,
+        function(err, response) {
+          if (response.hits.length === 0) {
+            return updateHits([])
+          } else {
+            const hits = _.map(response.hits, buildHitViewModel)
+            return updateHits(hits, response.nbHits)
+          }
+        },
+        {
+          hitsPerPage: $scope.config_hits_per_page
         }
-      })
-    })
+      )
+    }
   })
 
   return App.controller('LearnController', function() {})