[ACA-3899] Viewer thumbnails cannot be accessed by keyboard (#6150)

* accessibility

* add thumb focus

* close thumbs list event

* fix eventbus listener

* rename parameter

* track previous focused element

* implement FocusKeyManager

* fix getGlobalEventBus is deprecated

* keyboard navigation

* set tabindex

* setActiveItem on list change

* update  test
This commit is contained in:
Cilibiu Bogdan
2020-09-23 07:57:46 +03:00
committed by GitHub
parent 472e112b71
commit 3da5196b2d
10 changed files with 181 additions and 35 deletions

View File

@@ -15,28 +15,34 @@
* limitations under the License.
*/
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { FocusableOption } from '@angular/cdk/a11y';
@Component({
selector: 'adf-pdf-thumb',
templateUrl: './pdf-viewer-thumb.component.html',
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
host: { tabindex: '0'}
})
export class PdfThumbComponent implements OnInit {
export class PdfThumbComponent implements OnInit, FocusableOption {
@Input()
page: any = null;
image$: Promise<string>;
constructor(private sanitizer: DomSanitizer) {
constructor(private sanitizer: DomSanitizer, private element: ElementRef) {
}
ngOnInit() {
this.image$ = this.page.getPage().then((page) => this.getThumb(page));
}
focus() {
this.element.nativeElement.focus();
}
private getThumb(page): Promise<string> {
const viewport = page.getViewport({ scale: 1 });