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

Accessible Wiki Search

GitOrigin-RevId: af9b5444fe1be1ced16f3049bfc1ac731c8bebd5
This commit is contained in:
Jessica Lawshe 2018-11-15 11:22:08 -06:00 committed by sharelatex
parent d97fe4e39d
commit dd41a50377
2 changed files with 28 additions and 12 deletions

View file

@ -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')

View file

@ -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() {})