fix(tooltip): automatically generate aria-describedby for accessibility

The tooltip component now automatically generates and sets a unique
aria-describedby attribute that references the tooltip content's ID.
This eliminates the need for manual configuration and ensures proper
screen reader compatibility.

Previously, users had to manually provide aria-describedby values,
often incorrectly as shown in documentation examples. The component
now follows Angular Material's approach by programmatically managing
the ARIA relationship.

Closes #781

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: MatanShushan

libs/brain/tooltip/src/lib/brn-tooltip-content.ts

@@ -19,6 +19,7 @@ import {
 	viewChild,
 	ViewEncapsulation,
 } from '@angular/core';
+
 import { Subject } from 'rxjs';
 
 /**
@@ -29,6 +30,8 @@ import { Subject } from 'rxjs';
 	selector: 'brn-tooltip-content',
 	template: `
 		<div
+			[id]="tooltipId"
+			role="tooltip"
 			(mouseenter)="_contentHovered.set(true)"
 			(mouseleave)="_contentHovered.set(false)"
 			[class]="tooltipClasses()"
@@ -62,6 +65,8 @@ export class BrnTooltipContent implements OnDestroy {
 
 	public readonly tooltipClasses = signal('');
 	public readonly side = signal('above');
+	/** Unique ID for this tooltip instance */
+	public readonly tooltipId = `brn-tooltip-${Math.random().toString(36).substring(2, 15)}`;
 	/** Message to display in the tooltip */
 	public content: string | TemplateRef<unknown> | null = null;
 

libs/brain/tooltip/src/lib/brn-tooltip-trigger.ts

@@ -45,12 +45,12 @@ import {
 	numberAttribute,
 	type OnDestroy,
 	type Provider,
+	Renderer2,
 	signal,
 	type TemplateRef,
 	untracked,
 	ViewContainerRef,
 } from '@angular/core';
-import { brnDevMode } from '@spartan-ng/brain/core';
 import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { BrnTooltip } from './brn-tooltip';
@@ -122,6 +122,7 @@ export class BrnTooltipTrigger implements OnDestroy, AfterViewInit {
 	private readonly _dir = inject(Directionality);
 	private readonly _scrollStrategy = inject(BRN_TOOLTIP_SCROLL_STRATEGY);
 	private readonly _document = inject(DOCUMENT);
+	private readonly _renderer = inject(Renderer2);
 
 	private _portal?: ComponentPortal<BrnTooltipContent>;
 	private _viewInitialized = false;
@@ -337,10 +338,6 @@ export class BrnTooltipTrigger implements OnDestroy, AfterViewInit {
 					this._ngZone.run(() => this.show());
 				}
 			});
-
-		if (brnDevMode && !this.computedAriaDescribedBy()) {
-			console.warn('BrnTooltip: "aria-describedby" attribute is required for accessibility');
-		}
 	}
 
 	/**
@@ -387,6 +384,10 @@ export class BrnTooltipTrigger implements OnDestroy, AfterViewInit {
 		instance.side.set(this._currentPosition ?? 'above');
 		instance.afterHidden.pipe(takeUntil(this._destroyed)).subscribe(() => this._detach());
 		this._updateTooltipContent();
+
+		// Automatically set aria-describedby if not manually provided
+		this._setAriaDescribedBy(instance.tooltipId);
+
 		instance.show(delay);
 	}
 
@@ -766,4 +767,14 @@ export class BrnTooltipTrigger implements OnDestroy, AfterViewInit {
 			(style as any).webkitTapHighlightColor = 'transparent';
 		}
 	}
+
+	/** Sets aria-describedby attribute automatically if not manually provided */
+	private _setAriaDescribedBy(tooltipId: string): void {
+		const manualAriaDescribedBy = this.ariaDescribedBy();
+
+		// If user provided manual aria-describedby, use it; otherwise auto-set
+		const ariaDescribedByValue = manualAriaDescribedBy || tooltipId;
+
+		this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', ariaDescribedByValue);
+	}
 }