honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(aio): focus search when `/` is pressed (#16636) 

This will aid accessibility.

Closes #16129
This commit is contained in:
Pete Bacon Darwin 2017-05-08 23:40:32 +01:00 committed by Miško Hevery
parent c5ce0408a1
commit 041f57cb7d
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
aio/src/app/search/search-box/search-box.component.spec.ts
View File

@ -56,6 +56,12 @@ describe('SearchBoxComponent', () => {
input.triggerEventHandler('keyup', { target: { value: 'some query' }, which: 27 });
expect(search.search).not.toHaveBeenCalled();
}));
it('should grab focus when the / key is pressed', () => {
const input = fixture.debugElement.query(By.css('input'));
window.document.dispatchEvent(new KeyboardEvent('keyup', { 'key': '/' }));
expect(document.activeElement).toBe(input.nativeElement, 'Search box should be active element');
});
});
describe('on focus', () => {

9
aio/src/app/search/search-box/search-box.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
import { SearchService } from 'app/search/search.service';
import { LocationService } from 'app/shared/location.service';
@ -46,4 +46,11 @@ export class SearchBoxComponent implements OnInit {
}
this.searchService.search(query);
}
@HostListener('document:keyup', ['$event'])
onKeyUp($event: KeyboardEvent) {
if ($event.key === '/') {
this.searchBox.nativeElement.focus();
}
}
}