Skip to content
This repository has been archived by the owner on Mar 20, 2024. It is now read-only.

Commit

Permalink
Rework search widget (.search-input) for better accessibility. Closes
Browse files Browse the repository at this point in the history
#599 & #591.

BREAKING CHANGES: the search widget now uses a different HTML markup. Please, refer to the docs for the right structure to use.
  • Loading branch information
almeidap committed Dec 12, 2017
1 parent c1955ac commit 21335cd
Show file tree
Hide file tree
Showing 9 changed files with 113 additions and 49 deletions.
10 changes: 1 addition & 9 deletions src/assets/js/autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

// Init Typeahead on search-fields
$searchFields.typeahead({
hint: true,
hint: false,
highlight: true,
minLength: 1
},
Expand All @@ -35,12 +35,4 @@
});
}

// Insert the icons
$searchFields.after('<span class="icon icon--close" data-form-search-clear><span class="sr-only">Clear</span></span>');
$('.form-search').append('<button class="icon icon--search icon--before"><span class="sr-only">Search</span></button>');

$('body').on('click', '[data-form-search-clear]', function () {
$('#search-field').val('').focus(); // clear search field and refocus it
});

}) (jQuery, (typeof searchData === 'undefined' ? false : searchData));
23 changes: 17 additions & 6 deletions src/assets/js/search.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
'</strong></li>',
'<li>',
window.translations['global-search']['nothing-found'],
'</li>',
'</li>'
].join('');
},
header: function() {
Expand All @@ -55,6 +55,7 @@

function initTypeahead(element) {
$('.search-input', element).typeahead({
hint: false,
highlight: true,
menu: $('.search-results .search-results-list', element),
classNames: {
Expand All @@ -63,19 +64,20 @@
}
}, datasets)
.on('typeahead:selected', function (event, selection) {
console.log('typeahead:selected', event, selection);
event.preventDefault();
$(this).typeahead('val', '')
.closest('.global-search').removeClass('has-input');
window.location.replace(selection.link);
})
.on('typeahead:open', function() {
$(this).closest('.global-search').addClass('focused');
})
.on('typeahead:close', function () {
.on('typeahead:close', function (event) {
console.log('typeahead:close', event.keyCode);
$(this).closest('.global-search').removeClass('focused');
$(this).closest('form').trigger('reset');
//$(this).closest('form').trigger('reset');
})
.on('keyup', function (event) {
console.log('keyup', event.keyCode);
if (event.keyCode === 27) { // ESC
$(this).closest('form').trigger('reset');
} else if ($(this).typeahead('val')) {
Expand All @@ -90,16 +92,25 @@
return false;
})
.on('reset', function() {
$('.search-input', this).blur().typeahead('val', '');
console.log('reset');
$('.search-input', this).typeahead('val', '');
$(this).closest('.global-search').removeClass('has-input');
});

$('.search-reset', element).on('click', function() {
$(this).closest('form').trigger('reset');
$('.search-input', element).focus();
});
}

initTypeahead($('.global-search-standard'));
initTypeahead($('.global-search-mobile'));

// Mobile improvements:
$('.nav-mobile .nav-mobile-menu').parent().on('show.bs.dropdown', function () {
setTimeout(function () {
$('.nav-mobile .search-input').eq(1).val(null).focus(); // Remember that Typeahead duplicates search input for word hinting.
}, 100);
});

})(jQuery);
12 changes: 11 additions & 1 deletion src/assets/sass/components/navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,18 @@ nav {
}
.icon {
position: absolute;
top: 13px;
top: 14px;
left: 15px;

&.icon--after {
left: auto;
right: 15px;
font-size: 11px;
color: $white;
transition: color 0.3s;
background: none;
border: none;
}
}
}
}
Expand Down
19 changes: 15 additions & 4 deletions src/assets/sass/components/search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,25 @@
cursor: pointer;
}
}
.icon--search {left: 3px;}
span.icon--search {display: none;}
.icon--search {
top: 1px;
left: 3px;
padding: 2px 4px;
@media only screen and (min-width: $screen-md-min) {
padding: 1px 4px;
}
}
.icon--close {
color: $white;
transition: color 0.3s;
right: 10px;
top: 4px;
right: 6px;
top: 1px;
font-size: 11px;

padding: 2px 4px;
@media only screen and (min-width: $screen-sm-min) {
padding: 1px 4px;
}
}
}

Expand Down
8 changes: 6 additions & 2 deletions src/assets/sass/layout/search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,12 @@
}

// typeahead fixes
.global-search-standard.focused .icon.icon--close:after {
color: $black;
.global-search-standard,
.global-search-mobile {
&.focused .icon.icon--close::after,
& .icon.icon--close:focus::after {
color: $black;
}
}

.search-result-header {
Expand Down
45 changes: 33 additions & 12 deletions src/example-pages/layout.twig
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
---
layout: empty
---
<!DOCTYPE html >
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 oldie" itemscope itemtype="http://schema.org/WebPage"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7 oldie" itemscope itemtype="http://schema.org/WebPage"> <![endif]-->
Expand Down Expand Up @@ -133,12 +136,20 @@
<h1>Department of the Environment, Transport, Energy and Communications</h1>
</a>


<form class="form-horizontal form-search pull-right">
<h2 class="sr-only">Search</h2>
<label for="search-field" class="sr-only">Search:</label>
<input id="search-field" class="form-control search-field" type="text" placeholder="Search">
</form>
<div class="mod mod-searchfield global-search global-search-standard">
<form class="form-horizontal form-search pull-right">
<h2 class="sr-only">Search</h2>
<label for="search-field" class="sr-only">Search:</label>
<input id="search-field" class="form-control search-field" type="text" placeholder="Search">
<button class="icon icon--close icon--after search-reset" tabindex="0" role="button">
<span class="sr-only">Clear</span>
</button>
<span class="icon icon--search"><span class="sr-only">Search</span></span>
<div class="search-results">
<div class="search-results-list"></div>
</div>
</form>
</div>
</div>

<!-- Standard Bootstrap `navbar` structure with the `yamm` mega-menu library -->
Expand Down Expand Up @@ -215,12 +226,22 @@
<div class="table-cell dropdown">
<a href="#" class="nav-mobile-menu dropdown-toggle" data-toggle="dropdown"><span class="icon icon--search"></span></a>
<div class="dropdown-menu" role="menu">
<form class="form">
<h2 class="sr-only">Search</h2>
<label for="search-field" class="sr-only">Search:</label>
<input class="form-control" type="text" placeholder="Search">
<span class="icon icon--search"></span>
</form>
<div class="mod mod-searchfield global-search global-search-mobile">
<form class="form">
<h2 class="sr-only">Search</h2>
<label for="search-field-mobile" class="sr-only">Search</label>
<input id="search-field-mobile" class="search-input form-control" type="text" placeholder="Search">
<button class="icon icon--close icon--after search-reset" tabindex="0" role="button">
<span class="sr-only">Reset</span>
</button>
<span class="icon icon--search">
<span class="sr-only">Search</span>
</span>
<div class="search-results">
<div class="search-results-list"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Expand Down
20 changes: 14 additions & 6 deletions src/materials/02-navigation/02-header/04-site-search.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@
---

<header>
<form class="form-horizontal form-search pull-right">
<h2 class="sr-only">Search</h2>
<label for="search-field" class="sr-only">Search:</label>
<input id="search-field" class="form-control search-field" type="text" placeholder="Search">
</form>

{{> general.logo}}
<div class="mod mod-searchfield global-search global-search-standard">
<form class="form-horizontal form-search pull-right">
<h2 class="sr-only">Search</h2>
<label for="search-field" class="sr-only">Search:</label>
<input id="search-field" class="form-control search-field" type="text" placeholder="Search">
<button class="icon icon--close icon--after search-reset" tabindex="0" role="button">
<span class="sr-only">Clear</span>
</button>
<span class="icon icon--search"><span class="sr-only">Search</span></span>
<div class="search-results">
<div class="search-results-list"></div>
</div>
</form>
</div>
</header>
<nav class="nav-main"></nav>
9 changes: 6 additions & 3 deletions src/views/layouts/includes/f-header.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,13 @@ <h1>{{t 'styleguide.title'}}</h1>
<!-- begin: sitesearch desktop-->
<form class="form-horizontal form-search pull-right">
<h2 class="sr-only">{{t 'styleguide.global-search.title'}}</h2>
<label for="webguiedelines-search-standard" class="sr-only">{{t 'styleguide.global-search.title'}}</label>
<input id="webguiedelines-search-standard" class="form-control search-input" type="text" placeholder="{{t 'styleguide.global-search.title'}}"/>
<span class="icon icon--close search-reset">
<label for="webguidelines-search-standard" class="sr-only">{{t 'styleguide.global-search.title'}}</label>
<input id="webguidelines-search-standard" class="form-control search-input" type="text" placeholder="{{t 'styleguide.global-search.title'}}"/>
<button class="icon icon--close icon--after search-reset" tabindex="0" role="button">
<span class="sr-only">{{t 'styleguide.global-search.reset'}}</span>
</button>
<span class="icon icon--search">
<span class="sr-only">{{t 'styleguide.global-search.title'}}</span>
</span>
<div class="search-results">
<div class="search-results-list"></div>
Expand Down
16 changes: 10 additions & 6 deletions src/views/layouts/includes/f-menu.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="nav-main yamm navbar" id="main-navigation">
<div class="nav-main yamm navbar" id="main-navigation">
<h2 class="sr-only">{{t 'styleguide.navigation'}}</h2>
<!-- The mobile navigation -->
<section class="nav-mobile">
Expand Down Expand Up @@ -56,13 +56,17 @@ <h1><a href="{{#if baseurl}}{{baseurl}}/{{/if}}../{{data 'locale'}}/">{{t 'style
<span class="icon icon--search"></span>
</a>
<div class="dropdown-menu" role="menu">

<div class="mod mod-searchfield global-search global-search-mobile">
<form class="form">
<h2 class="sr-only">{{t 'styleguide.global-search.title'}}</h2>
<label for="webguiedelines-search-mobile" class="sr-only">{{t 'styleguide.global-search.title'}}</label>
<input id="webguiedelines-search-mobile" class="search-input form-control" type="text" placeholder="{{t 'styleguide.global-search.title'}}">
<span class="icon icon--search"></span>
<label for="webguidelines-search-mobile" class="sr-only">{{t 'styleguide.global-search.title'}}</label>
<input id="webguidelines-search-mobile" class="search-input form-control" type="text" placeholder="{{t 'styleguide.global-search.title'}}">
<button class="icon icon--close icon--after search-reset" tabindex="0" role="button">
<span class="sr-only">{{t 'styleguide.global-search.reset'}}</span>
</button>
<span class="icon icon--search">
<span class="sr-only">{{t 'styleguide.global-search.title'}}</span>
</span>
<div class="search-results">
<div class="search-results-list"></div>
</div>
Expand Down Expand Up @@ -141,4 +145,4 @@ <h4><a href="{{#if @root.baseurl}}{{@root.baseurl}}/{{/if}}../{{data 'locale'}}/
</div>
</li>
</ul>
</nav>
</div>

0 comments on commit 21335cd

Please sign in to comment.