From 041f57cb7de44f110cf64abdaff0d36b98f3c13f Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Mon, 8 May 2017 23:40:32 +0100 Subject: [PATCH] feat(aio): focus search when `/` is pressed (#16636) This will aid accessibility. Closes #16129 --- .../app/search/search-box/search-box.component.spec.ts | 6 ++++++ aio/src/app/search/search-box/search-box.component.ts | 9 ++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/aio/src/app/search/search-box/search-box.component.spec.ts b/aio/src/app/search/search-box/search-box.component.spec.ts index 1d7c27a2a9..fcb60f3d1a 100644 --- a/aio/src/app/search/search-box/search-box.component.spec.ts +++ b/aio/src/app/search/search-box/search-box.component.spec.ts @@ -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', () => { diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts index 1be305f6d5..91299bb29e 100644 --- a/aio/src/app/search/search-box/search-box.component.ts +++ b/aio/src/app/search/search-box/search-box.component.ts @@ -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(); + } + } }