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,
+ ) {}
}