When the Vue RadioGroupLabel component is used to label the entire radio group (rather than an individual option), it produces an accessibility error related to invalid ARIA usage.
Rendered output
The component is rendered as:
<label id="headlessui-label-2" class="sr-only" role="none">Label</label>
Accessibility error
Accessibility tools (axe) report the following error:
ARIA role should be appropriate for the element
Rule: aria-allowed-role
Details: https://dequeuniversity.com/rules/axe/4.11/aria-allowed-role
This happens because role="none" is not allowed on a <label> element. According to the ARIA specification, role="none" (or presentation) is not valid for elements that have native semantic meaning such as <label>.
Expected behavior
When RadioGroupLabel is used to label the entire radio group:
The rendered <label> should not include role="none"
Native semantics should be preserved so assistive technologies can correctly associate the label with the radio group
Actual behavior
role="none" is applied to the <label> element
This causes an accessibility violation and may interfere with assistive technology behavior
Suggested fix
In this case, the role attribute should be omitted entirely, rather than set to none. Removing the role would preserve the native semantics of the element and resolve the accessibility error.
What package within Headless UI are you using?
nuxt-headlessui
What version of that package are you using?
1.2.1
What browser are you using?
N/A
When the Vue RadioGroupLabel component is used to label the entire radio group (rather than an individual option), it produces an accessibility error related to invalid ARIA usage.
Rendered output
The component is rendered as:
Accessibility error
Accessibility tools (axe) report the following error:
ARIA role should be appropriate for the element
Rule: aria-allowed-role
Details: https://dequeuniversity.com/rules/axe/4.11/aria-allowed-role
This happens because
role="none"is not allowed on a<label>element. According to the ARIA specification, role="none" (or presentation) is not valid for elements that have native semantic meaning such as<label>.Expected behavior
When RadioGroupLabel is used to label the entire radio group:
The rendered
<label>should not include role="none"Native semantics should be preserved so assistive technologies can correctly associate the label with the radio group
Actual behavior
role="none"is applied to the<label>elementThis causes an accessibility violation and may interfere with assistive technology behavior
Suggested fix
In this case, the role attribute should be omitted entirely, rather than set to none. Removing the role would preserve the native semantics of the element and resolve the accessibility error.
What package within Headless UI are you using?
nuxt-headlessui
What version of that package are you using?
1.2.1
What browser are you using?
N/A