🐛 What's broken?
The lightbulb emoji (💡) used as an icon in the docs-info callout box lacks an aria-hidden attribute. Because of this, screen readers may read the emoji description aloud abruptly (e.g., "Electric light bulb EaseMotion CSS bridges the gap..."), which creates a confusing experience for visually impaired users.
📋 Steps to Reproduce
- Navigate to the repository file:
docs/index.html.
- Inspect the HTML structure around line 560 inside the
<section id="getting-started">.
- Observe the
<span> wrapping the emoji.
✅ Expected Behavior
The decorative emoji should be hidden from screen readers using aria-hidden="true" so that only the meaningful text next to it is announced.
❌ Actual Behavior
The emoji is exposed to the accessibility tree without any decorative safeguards.
🔗 Reproduction
Current Structure:
<span class="docs-info-icon">💡</span>
🐛 What's broken?
The lightbulb emoji (
💡) used as an icon in thedocs-infocallout box lacks anaria-hiddenattribute. Because of this, screen readers may read the emoji description aloud abruptly (e.g., "Electric light bulb EaseMotion CSS bridges the gap..."), which creates a confusing experience for visually impaired users.📋 Steps to Reproduce
docs/index.html.<section id="getting-started">.<span>wrapping the emoji.✅ Expected Behavior
The decorative emoji should be hidden from screen readers using
aria-hidden="true"so that only the meaningful text next to it is announced.❌ Actual Behavior
The emoji is exposed to the accessibility tree without any decorative safeguards.
🔗 Reproduction
Current Structure: