Merge pull request #180 from cal-smith/tooltip-a11y

fix(dialog): make a11y work automagically for all dialogs
carbon-design-system · Oct 19, 2018 · 085d1cd · 085d1cd
2 parents 5cefa67 + dd53b7e
commit 085d1cd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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<any> = new EventEmitter<any>();
 	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
@@ -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;
 	}
 }