diff --git a/services/web/app/views/_mixins/faq_search.pug b/services/web/app/views/_mixins/faq_search.pug index 7d05d8cd53..1d6b8513ae 100644 --- a/services/web/app/views/_mixins/faq_search.pug +++ b/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') diff --git a/services/web/public/src/main/learn.js b/services/web/public/src/main/learn.js index 02f98761b2..4ede627c16 100644 --- a/services/web/public/src/main/learn.js +++ b/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() {})