diff --git a/scripts/gulp/tasks/bundle/rollup-config.ts b/scripts/gulp/tasks/bundle/rollup-config.ts index c5f0c9c6fe..ece333a16a 100644 --- a/scripts/gulp/tasks/bundle/rollup-config.ts +++ b/scripts/gulp/tasks/bundle/rollup-config.ts @@ -24,6 +24,7 @@ const ROLLUP_GLOBALS = { '@angular/cdk/scrolling': 'ng.cdk.scrolling', '@angular/cdk/table': 'ng.cdk.table', '@angular/cdk/bidi': 'ng.cdk.bidi', + '@angular/cdk/keycodes': 'ng.cdk.keycodes', // RxJS dependencies diff --git a/src/framework/theme/components/cdk/a11y/focus-key-manager.ts b/src/framework/theme/components/cdk/a11y/focus-key-manager.ts new file mode 100644 index 0000000000..aca69266c6 --- /dev/null +++ b/src/framework/theme/components/cdk/a11y/focus-key-manager.ts @@ -0,0 +1,4 @@ +import { FocusableOption, FocusKeyManager } from '@angular/cdk/a11y'; + +export type NbFocusableOption = FocusableOption; +export class NbFocusKeyManager extends FocusKeyManager {} diff --git a/src/framework/theme/components/cdk/index.ts b/src/framework/theme/components/cdk/index.ts index 3eebe8a106..136836dd58 100644 --- a/src/framework/theme/components/cdk/index.ts +++ b/src/framework/theme/components/cdk/index.ts @@ -1,6 +1,8 @@ export * from './overlay'; +export * from './a11y/focus-key-manager'; export * from './a11y/a11y.module'; export * from './a11y/focus-trap'; export * from './adapter/overlay-container-adapter'; export * from './adapter/scroll-dispatcher-adapter'; export * from './adapter/viewport-ruler-adapter'; +export * from './keycodes/keycodes'; diff --git a/src/framework/theme/components/cdk/keycodes/keycodes.ts b/src/framework/theme/components/cdk/keycodes/keycodes.ts new file mode 100644 index 0000000000..5b8691c3ee --- /dev/null +++ b/src/framework/theme/components/cdk/keycodes/keycodes.ts @@ -0,0 +1 @@ +export * from '@angular/cdk/keycodes'; diff --git a/src/framework/theme/components/select/option.component.scss b/src/framework/theme/components/select/option.component.scss index ceb15b9fe8..5968f0e011 100644 --- a/src/framework/theme/components/select/option.component.scss +++ b/src/framework/theme/components/select/option.component.scss @@ -7,7 +7,7 @@ @import '../../styles/core/mixins'; :host { - display: block; + display: flex; @include nb-component-animation(background-color, color); &:hover { @@ -15,7 +15,12 @@ } nb-checkbox { + display: flex; pointer-events: none; + + ::ng-deep .label { + padding: 0; + } } } diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts index c318fd8428..7bf2bc4180 100644 --- a/src/framework/theme/components/select/option.component.ts +++ b/src/framework/theme/components/select/option.component.ts @@ -19,7 +19,9 @@ import { Output, } from '@angular/core'; import { Observable, Subject } from 'rxjs'; + import { convertToBoolProperty } from '../helpers'; +import { NbFocusableOption } from '../cdk'; import { NbSelectComponent } from './select.component'; @@ -28,20 +30,15 @@ import { NbSelectComponent } from './select.component'; styleUrls: ['./option.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` - - + - - - - - - - - + `, }) -export class NbOptionComponent implements OnDestroy { +export class NbOptionComponent implements OnDestroy, NbFocusableOption { protected disabledByGroup = false; @@ -110,9 +107,19 @@ export class NbOptionComponent implements OnDestroy { return disabled ? '' : null; } - @HostListener('click') - onClick() { + @HostBinding('tabIndex') + get tabindex() { + return '-1'; + } + + @HostListener('click', ['$event']) + @HostListener('keydown.space', ['$event']) + @HostListener('keydown.enter', ['$event']) + onClick(event: Event) { this.click$.next(this); + + // Prevent scroll on space click, etc. + event.preventDefault(); } select() { @@ -147,4 +154,12 @@ export class NbOptionComponent implements OnDestroy { this.cd.markForCheck(); } } + + focus(): void { + this.elementRef.nativeElement.focus(); + } + + getLabel(): string { + return this.content; + } } diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index 3c2472d60b..4c59dff3d5 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -1,6 +1,8 @@