Accessibility violation: Tippy.js adds aria-expanded to <span> with role="tooltip"

Created on 28 March 2025, 6 months ago

Problem/Motivation

Tooltips in Webform use a &lt;span&gt; element with role="tooltip" and tabindex="0", which is keyboard-focusable but not an interactive element.
When using Tippy.js with interactive: true, the library automatically adds aria-expanded to the trigger.

This causes an accessibility violation because aria-expanded is not valid on non-interactive elements like a &lt;span&gt; with role="tooltip".
This issue is flagged by accessibility tools such as Siteimprove.

Steps to reproduce

  1. Enable the Webform module.
  2. Add a form element with help text.
  3. Inspect the DOM: a &lt;span&gt; with role="tooltip" is rendered as the help icon.
  4. Note that Tippy.js adds aria-expanded="false" to that element.
  5. Run an accessibility audit using Siteimprove.
  6. The audit flags the use of aria-expanded on the &lt;span&gt; as an invalid ARIA attribute.

Proposed resolution

Explicitly disable the automatic addition of aria-expanded in the Tippy.js configuration by setting:

aria: {
  expanded: null
}

This prevents Tippy.js from injecting the aria-expanded attribute, resolving the accessibility violation while still allowing tooltips to be triggered from a &lt;span&gt;.

Alternative approach: Replace the &lt;span&gt; element with a &lt;button&gt; element to improve semantic accessibility. A &lt;button&gt; is a natively interactive element and is compatible with attributes like aria-expanded, making it a better choice when tooltips are triggered via focus or click.

However, to minimize UI and markup changes, this patch preserves the current &lt;span&gt; and disables the problematic ARIA attribute instead.

Remaining tasks

  • Apply the fix in webform.element.help.js.

User interface changes

None. Tooltip behavior remains unchanged visually.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Needs review

Version

6.3

Component

Accessibility

Created by

🇪🇸Spain marthinal

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024