fix: add aria-describedby attribute to read out tooltip on focus

Author: zvonimirfras

src/tooltip/definition-tooptip.component.ts

@@ -28,6 +28,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			class="cds--definition-term"
 			[attr.aria-controls]="id"
 			[attr.aria-expanded]="isOpen"
+			[attr.aria-describedby]="isOpen ? id : null"
 			(blur)="onBlur($event)"
 			(click)="onClick($event)"
 			type="button">
@@ -37,9 +38,9 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			*ngIf="description"
 			class="cds--popover"
 			[id]="id"
-			[attr.aria-hidden]="isOpen"
+			[attr.aria-hidden]="!isOpen"
 			role="tooltip">
-			<span class="cds--popover-content cds--definition-tooltip">
+			<span class="cds--popover-content cds--definition-tooltip" aria-live="polite">
 				<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
 				<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
 				<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
@@ -62,6 +63,8 @@ export class TooltipDefinition extends PopoverContainer {
 	 */
 	@Input() templateContext: any;
 
+	@Input() openOnHover = false;
+
 	constructor(
 		protected elementRef: ElementRef,
 		protected ngZone: NgZone,
@@ -94,6 +97,18 @@ export class TooltipDefinition extends PopoverContainer {
 		this.handleChange(false, event);
 	}
 
+	@HostListener("mouseenter", ["$event"])
+	mouseenter(event) {
+		if (this.openOnHover) {
+			this.handleChange(true, event);
+		}
+	}
+
+	@HostListener("focusin", ["$event"])
+	onFocus(event) {
+		this.handleChange(true, event);
+	}
+
 	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}

src/tooltip/definition-tooptip.stories.ts

@@ -62,6 +62,7 @@ const Template = (args) => ({
 				<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a
 				<cds-tooltip-definition
 					[isOpen]="isOpen"
+					[openOnHover]="openOnHover"
 					[caret]="caret"
 					[align]="align"
 					(onOpen)="onOpen($event)"
@@ -101,6 +102,7 @@ const AutoAlignTemplate = (args) => ({
 				<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a
 				<cds-tooltip-definition
 					[isOpen]="isOpen"
+					[openOnHover]="openOnHover"
 					[caret]="caret"
 					[align]="align"
 					[autoAlign]="true"