[qwik] Accessibility issues

Open dustinsgoodman opened this issue 1 year ago • 0 comments

Manually Identified Issues

[ ] Filter Dropdown items are tab-indexed when they are not visible. They should have tabindex="-1" when the dropdown is not opened so tabbing the page skips over them.
[ ] Navigation in dropdown items should be possible with arrow keys. Applies to:
- [ ] Filter Dropdown component
- [ ] User Dropdown component

Accessibility Issues Found by Automated Tests

The audit has been made with Axe DevTools. You can install the extension and run the same test from Chrome dev tools (you may need to restart Chrome to see the new tab there).

General

[ ] Document must have <title> element to aid in navigation
[ ] <html> element must have a lang attribute
[ ] Link must have discernible text

To solve this problem, you need to fix at least (1) of the following:
- [ ] Element does not have text that is visible to screen readers
- [ ] 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

Repo Detail (http://localhost:5173/thisdot/starter.dev/)

[ ] Elements must have sufficient color contrast
[ ] Links must be distinguishable without relying on color

To solve this problem, you need to fix at least (1) of the following:
- [ ] The link has insufficient color contrast of 2.84:1 with the surrounding text. (Minimum contrast is 3:1, link text: #2563eb, surrounding text: #1f2937)
- [ ] The link has no styling (such as underline) to distinguish it from the surrounding text.

Issues (http://localhost:5173/thisdot/starter.dev/issues/)

[ ] Buttons must have discernible text

To solve this problem, you need to fix at least (1) of the following:
- [ ] Element does not have inner text that is visible to screen readers
- [ ] 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's default semantics were not overridden with role="none" or role="presentation"
[ ] Elements must have sufficient color contrast
[ ] Form elements must have labels

To solve this problem, you need to fix at least (1) of the following:
- [ ] Form element does not have an implicit (wrapped)
- [ ] Form element does not have an explicit
- [ ] 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"

Pull Requests (http://localhost:5173/thisdot/starter.dev/pulls/)

[ ] Buttons must have discernible text

To solve this problem, you need to fix at least (1) of the following:
- [ ] Element does not have inner text that is visible to screen readers
- [ ] 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's default semantics were not overridden with role="none" or role="presentation"
[ ] Elements must have sufficient color contrast
[ ] Form elements must have labels

To solve this problem, you need to fix at least (1) of the following:
- [ ] Form element does not have an implicit (wrapped)
- [ ] Form element does not have an explicit
- [ ] 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"

User (http://localhost:5173/mhevery/)

[ ] Buttons must have discernible text

To solve this problem, you need to fix at least (1) of the following:
- [ ] Element does not have inner text that is visible to screen readers
- [ ] 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's default semantics were not overridden with role="none" or role="presentation"
[ ] Elements must have sufficient color contrast