diff --git a/src/dialog/dialog.directive.ts b/src/dialog/dialog.directive.ts index fe9812f22c..8574749b7c 100644 --- a/src/dialog/dialog.directive.ts +++ b/src/dialog/dialog.directive.ts @@ -9,7 +9,8 @@ import { TemplateRef, ViewContainerRef, HostListener, - OnChanges + OnChanges, + HostBinding } from "@angular/core"; import { fromEvent } from "rxjs"; import { DialogService } from "./dialog.service"; @@ -94,6 +95,9 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges { @Output() onClose: EventEmitter = new EventEmitter(); dialogConfig: DialogConfig; + @HostBinding("attr.role") role = "button"; + @HostBinding("attr.aria-expanded") expanded = false; + /** * Creates an instance of DialogDirective. * @param {ElementRef} elementRef @@ -158,7 +162,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges { this.dialogService.isClosed.subscribe(value => { if (value) { this.onClose.emit(); - this.elementRef.nativeElement.setAttribute("aria-expanded", "false"); + this.expanded = false; } }); @@ -182,7 +186,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges { */ open() { this.dialogService.open(this.viewContainerRef, this.dialogConfig); - this.elementRef.nativeElement.setAttribute("aria-expanded", "true"); + this.expanded = true; } /** @@ -192,7 +196,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges { */ toggle() { this.dialogService.toggle(this.viewContainerRef, this.dialogConfig); - this.elementRef.nativeElement.setAttribute("aria-expanded", this.dialogService.isOpen); + this.expanded = this.dialogService.isOpen; } /** @@ -202,7 +206,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges { */ close() { this.dialogService.close(this.viewContainerRef); - this.elementRef.nativeElement.setAttribute("aria-expanded", "false"); + this.expanded = false; } /** diff --git a/src/dialog/tooltip/tooltip.directive.ts b/src/dialog/tooltip/tooltip.directive.ts index 7ceee2cf97..3379d44363 100644 --- a/src/dialog/tooltip/tooltip.directive.ts +++ b/src/dialog/tooltip/tooltip.directive.ts @@ -5,7 +5,8 @@ import { ElementRef, Injector, ComponentFactoryResolver, - ViewContainerRef + ViewContainerRef, + HostBinding } from "@angular/core"; import { DialogDirective } from "./../dialog.directive"; import { Tooltip } from "./tooltip.component"; @@ -64,6 +65,8 @@ export class TooltipDirective extends DialogDirective { // tslint:disable-next-line:no-input-rename @Input("tooltip-type") tooltipType: "warning" | "error" | "" = ""; + @HostBinding("attr.aria-describedby") descriptorId: string; + /** * Creates an instance of `TooltipDirective`. * @param {ElementRef} elementRef @@ -89,6 +92,6 @@ export class TooltipDirective extends DialogDirective { this.dialogConfig.compID = "tooltip-" + TooltipDirective.tooltipCounter; this.dialogConfig.content = this.ibmTooltip; this.dialogConfig.type = this.tooltipType !== undefined ? this.tooltipType : this.type; - this.elementRef.nativeElement.setAttribute("aria-describedby", this.dialogConfig.compID); + this.descriptorId = this.dialogConfig.compID; } }