diff --git a/src/framework/theme/components/accordion/accordion-item-header.component.ts b/src/framework/theme/components/accordion/accordion-item-header.component.ts index e147090390..cd6f0e87b1 100644 --- a/src/framework/theme/components/accordion/accordion-item-header.component.ts +++ b/src/framework/theme/components/accordion/accordion-item-header.component.ts @@ -58,6 +58,7 @@ export class NbAccordionItemHeaderComponent implements OnInit, OnDestroy { return !this.accordionItem.collapsed; } + // issue #794 @HostBinding('attr.tabindex') get tabbable(): string { return this.accordionItem.disabled ? '-1' : '0'; diff --git a/src/framework/theme/components/button/button.component.ts b/src/framework/theme/components/button/button.component.ts index b5c60688b0..b4a2ffb98a 100644 --- a/src/framework/theme/components/button/button.component.ts +++ b/src/framework/theme/components/button/button.component.ts @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, Input, HostBinding, HostListener } from '@angular/core'; +import { Component, Input, HostBinding, HostListener, Renderer2, ElementRef } from '@angular/core'; import { convertToBoolProperty } from '../helpers'; /** @@ -203,6 +203,7 @@ export class NbButtonComponent { @HostBinding('attr.aria-disabled') @HostBinding('class.btn-disabled') disabled: boolean; + // issue #794 @HostBinding('attr.tabindex') get tabbable(): string { return this.disabled ? '-1' : '0'; @@ -256,6 +257,7 @@ export class NbButtonComponent { @Input('disabled') set setDisabled(val: boolean) { this.disabled = convertToBoolProperty(val); + this.renderer.setProperty(this.hostElement.nativeElement, 'disabled', this.disabled); } /** @@ -276,6 +278,16 @@ export class NbButtonComponent { this.outline = convertToBoolProperty(val); } + /** + * @private + * Keep this handler to partially support anchor disabling. + * Unlike button, anchor doesn't have 'disabled' DOM property, + * so handler will be called anyway. We preventing navigation and bubbling. + * Disabling is partial due to click handlers precedence. Consider example: + * ... + * 'clickHandler' will be called before our host listener below. We can't prevent + * such handlers call. + */ @HostListener('click', ['$event']) onClick(event: Event) { if (this.disabled) { @@ -283,4 +295,9 @@ export class NbButtonComponent { event.stopImmediatePropagation(); } } + + constructor( + protected renderer: Renderer2, + protected hostElement: ElementRef, + ) {} }