Skip to content

fix(CommandPalette): add aria-label to listbox #5508

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: v4
Choose a base branch
from
Draft

fix(CommandPalette): add aria-label to listbox #5508

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
11 changes: 1 addition & 10 deletions test/components/CommandPalette.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,15 +149,6 @@
}
})

expect(await axe(wrapper.element, {
rules: {
// ARIA input fields must have an accessible name (aria-input-field-name)"
// Fix any of the following:
// 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
'aria-input-field-name': { enabled: false }
}
})).toHaveNoViolations()
expect(await axe(wrapper.element)).toHaveNoViolations()

Check failure on line 152 in test/components/CommandPalette.spec.ts

View workflow job for this annotation

GitHub Actions / build (ubuntu-latest, 22)

../components/CommandPalette.spec.ts > CommandPalette > passes accessibility tests 

Error: expect(received).toHaveNoViolations(expected)

Expected the HTML found at $('.overflow-hidden') to have no violations:

<div data-slot="content" class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">

Received:

"ARIA input fields must have an accessible name (aria-input-field-name)"

Fix any of the following:
  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

You can find more information on this issue here: 
https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI
 ❯ ../components/CommandPalette.spec.ts:152:40
})
})
Loading