Skip to content

fix(components): VisuallyHiddenInput fails Axe tests inside of form element #2251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: v2
Choose a base branch
from
+4 −0
Draft

fix(components): VisuallyHiddenInput fails Axe tests inside of form element #2251

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/core/src/RadioGroup/RadioGroup.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,10 @@
props: { handleSubmit },
})

it('should pass axe accessibility tests', async () => {
expect(await axe(wrapper.element)).toHaveNoViolations()

Check failure on line 105 in packages/core/src/RadioGroup/RadioGroup.test.ts

View workflow job for this annotation

GitHub Actions / test

src/RadioGroup/RadioGroup.test.ts > given radio in a form > should pass axe accessibility tests 

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
})

it('should have hidden input field', async () => {
expect(wrapper.find('[type="Radio"]').exists()).toBe(true)
})
Expand Down
Loading