fix(tooltip): automatically generate aria-describedby for accessibility #816
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MatanShushan
force-pushed
the
fix/tooltip-aria-describedby-accessibility
branch
from
e06560a to
79b05bb
Compare
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 spartan-ng#781 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
MatanShushan
force-pushed
the
fix/tooltip-aria-describedby-accessibility
branch
from
79b05bb to
b07ce7a
Compare
Resolve axe accessibility check timeouts by ensuring tooltip ARIA attributes only exist when tooltip is visible. Changes: - Only add role="tooltip" and id when tooltip isVisible() - Clean up aria-describedby when tooltip is detached - Prevent invalid ARIA references to hidden elements Fixes e2e test failures in toggle-group due to accessibility violations caused by always-present tooltip roles and invalid aria-describedby refs. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
MatanShushan
force-pushed
the
fix/tooltip-aria-describedby-accessibility
branch
from
4f14281 to
5e9f768
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
PR Checklist
guidelines: https://github.com/spartan-ng/spartan/blob/main/CONTRIBUTING.md#-commit-message-guidelines
PR Type
What kind of change does this PR introduce?
Which package are you modifying?
Primitives
Others
What is the current behavior?
The tooltip component requires users to manually provide
aria-describedbyattributes, often leading to invalid implementations likearia-describedby="Hello world"which don't reference actual DOM elements. This breaks accessibility as screen readers cannot properly announce tooltip content.Closes #781
What is the new behavior?
The tooltip component automatically generates unique IDs for tooltip content and sets the
aria-describedbyattribute on trigger elements. Screen readers can now properly access tooltip descriptions without manual configuration. Manualaria-describedbyvalues are still respected when provided.Does this PR introduce a breaking change?
Other information
This change follows Angular Material's approach and maintains backward compatibility while fixing the accessibility issue described in #781.
EOF < /dev/null