(
selector: string,
impact: SeverityThreshold = 'serious',
options: { showTooltip?: boolean; ruleId?: string } = {},
)
| 340 | elements.forEach((el) => { |
| 341 | // Skip elements inside devtools |
| 342 | if (isInsideDevtools(el)) { |
| 343 | return |
| 344 | } |
| 345 | |
| 346 | el.classList.add(HIGHLIGHT_CLASS, `${HIGHLIGHT_CLASS}--${impact}`) |
| 347 | |
| 348 | // Add tooltip to first highlighted element only |
| 349 | if (showTooltip && highlightedCount === 0 && ruleId) { |
| 350 | const tooltip = createTooltip([{ ruleId, impact }], el) |
| 351 | if (tooltip) { |
| 352 | document.body.appendChild(tooltip) |
| 353 | } |
| 354 | } |
| 355 | |
| 356 | highlightedCount++ |
| 357 | }) |
| 358 | |
| 359 | if (highlightedCount > 0) { |
| 360 | console.log( |
| 361 | `[A11y Overlay] Highlighted ${highlightedCount} element(s) with selector: ${selector}`, |
| 362 | ) |
| 363 | } |
| 364 | } catch (error) { |
| 365 | console.error('[A11y Overlay] Error highlighting element:', error) |
| 366 | } |
| 367 | } |
| 368 | |
| 369 | /** |
| 370 | * Highlight all elements with issues. |
| 371 | * Shows all issues per element in the tooltip, using the most severe for highlighting. |
| 372 | */ |
| 373 | export function highlightAllIssues( |
| 374 | issues: Array<A11yIssue>, |
| 375 | theme: TanStackDevtoolsTheme = 'dark', |
| 376 | ): void { |
| 377 | injectStyles(theme) |
| 378 | clearHighlights() |
| 379 | |
| 380 | // Track ALL issues for each selector |
| 381 | // Map: selector -> Array<{ ruleId, impact }> |
| 382 | const selectorIssues = new Map<string, Array<TooltipIssue>>() |
| 383 | |
| 384 | // Collect all issues per selector |
| 385 | for (const issue of issues) { |
| 386 | for (const node of issue.nodes) { |
| 387 | const selector = node.selector |
| 388 | // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition |
| 389 | const impact = issue.impact ?? 'minor' |
no test coverage detected