Skip to content

Tooltip misuses the aria-describedby attribute #781

@OmerGronich

Description

@OmerGronich

Please provide the environment you discovered this bug in.

Discovered in the first main example on the Spartan NG Tooltip documentation page:
https://spartan.ng/components/tooltip

Which area/package is the issue in?

tooltip

Description

The example incorrectly uses the aria-describedby attribute with a value that does not reference a valid DOM element:

<button hlmTooltipTrigger aria-describedby="Hello world" hlmBtn variant="outline">Default</button>

According to WAI-ARIA specifications, the aria-describedby attribute must reference one or more element IDs whose text content describes the current element. However, in this case:

"Hello world" is not a valid ID.

No DOM element with id="Hello world" exists.

This breaks accessibility tooling and results in a reference to a non-existent element, as confirmed by document.getElementById('Hello world') === null.

Image

I believe the tooltip component should not require the consumer to manually provide the aria-describedby attribute. Instead, it should automatically manage the necessary ARIA wiring behind the scenes.

For comparison, Angular Material's tooltip handles this correctly: it programmatically generates an aria-describedby value that points to an internal <div role="tooltip"> element with a valid ID and description, without requiring the user to specify it manually.

Image

Please provide the exception or error you saw


Other information

No response

I would be willing to submit a PR to fix this issue

  • Yes
  • No

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions