User tests: Successful: Unsuccessful:
Pull Request resolves #48151.
This PR was drafted with AI assistance (Claude). I reviewed, tested (see below), and am accountable for the change per the Generative AI policy.
layouts/joomla/form/field/subform/repeatable-table.php renders each column header's help text as a role="tooltip" div, revealed visually by :focus/:hover on a preceding icon span (see _form.scss in both the atum and cassiopeia templates: :focus + [role="tooltip"], :hover + [role="tooltip"]). That icon span was both aria-hidden="true" and tabindex="0" — a keyboard user can tab onto it, but a screen reader announces nothing there, and the tooltip text was never programmatically associated with anything (axe-core: aria-hidden-focus, WCAG 4.1.2, serious).
Rather than simply dropping tabindex (which would also silently remove the CSS :focus reveal for sighted keyboard users, since the tooltip is only shown for the preceding sibling of the icon), this follows the pattern already used for this exact icon+tooltip shape elsewhere in core — JGrid::state() (libraries/src/HTML/Helpers/JGrid.php): keep the icon focusable, drop aria-hidden, and let aria-labelledby give the icon its accessible name from the tooltip text. This keeps the existing keyboard-visible-tooltip behavior intact while also making the description announced to screen readers.
Both branches of the file are affected (groupByFieldset and the default per-field branch) and both are fixed identically.
description attribute to a subfield used inside a subform field with layout="joomla.form.field.subform.repeatable-table" (no core form ships one by default; e.g. temporarily add description="test" to the name field inside plugins/editors/tinymce/forms/setoptions.xml's external_plugins subform).Extensions → Plugins → Editor - TinyMCE, External Plugin URLs field) and inspect the column header's icon span (.icon-info-circle).aria-hidden="true" tabindex="0", no aria-labelledby. After: aria-hidden is gone, tabindex="0" remains, aria-labelledby points at the role="tooltip" div's id.:focus rule unaffected), and a screen reader now announces the tooltip text as the icon's accessible name.The icon span is aria-hidden="true" and tabindex="0" at the same time: a keyboard user tabs onto it, but assistive technology announces nothing, and the tooltip text is never programmatically associated with anything. axe-core flags aria-hidden-focus (serious, WCAG 4.1.2).
The icon keeps its tabindex="0" (so the existing CSS :focus reveal still works for sighted keyboard users), aria-hidden is removed, and aria-labelledby gives the icon an accessible name from the tooltip text, so it is announced by assistive technology.
Please select:
Documentation link for guide.joomla.org:
No documentation changes for guide.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
🤖 Generated with Claude Code
| Status | New | ⇒ | Pending |
| Category | ⇒ | Layout |