fix(components): VisuallyHiddenInput fails Axe tests inside of form element #3172
Annotations
2 errors
|
Test
Process completed with exit code 1.
|
|
Test:
packages/core/src/RadioGroup/RadioGroup.test.ts#L105
Error: expect(received).toHaveNoViolations(expected)
Expected the HTML found at $('#r1') to have no violations:
<button aria-label="Default" class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default data-[disabled]:bg-red-500" id="r1" role="radio" type="button" data-state="unchecked" required="false" name="test" value="true">
Received:
"Required ARIA attributes must be provided (aria-required-attr)"
Fix any of the following:
Required ARIA attribute not present: aria-checked
You can find more information on this issue here:
https://dequeuniversity.com/rules/axe/4.9/aria-required-attr?application=axeAPI
────────
Expected the HTML found at $('input') to have no violations:
<input data-hidden="" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="test" type="radio" value="true">
Received:
"Form elements must have labels (label)"
Fix any of the following:
Form element does not have an implicit (wrapped) <label>
Form element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
You can find more information on this issue here:
https://dequeuniversity.com/rules/axe/4.9/label?application=axeAPI
────────
Expected the HTML found at $('#r1') to have no violations:
<button aria-label="Default" class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default data-[disabled]:bg-red-500" id="r1" role="radio" type="button" data-state="unchecked" required="false" name="test" value="true">
Received:
"Interactive controls must not be nested (nested-interactive)"
Fix any of the following:
Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with aria-hidden="true")
You can find more information on this issue here:
https://dequeuniversity.com/rules/axe/4.9/nested-interactive?application=axeAPI
❯ src/RadioGroup/RadioGroup.test.ts:105:40
|
Loading