Skip to content
New issue

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

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

Already on GitHub? # to your account

DCX Library Components - Accessibility issues against all current components #200

Closed
ClaudioRicciCG opened this issue Jun 18, 2021 · 0 comments · Fixed by #223
Closed

DCX Library Components - Accessibility issues against all current components #200

ClaudioRicciCG opened this issue Jun 18, 2021 · 0 comments · Fixed by #223
Assignees
Labels
a11y a11y
Milestone

Comments

@ClaudioRicciCG
Copy link
Collaborator

ClaudioRicciCG commented Jun 18, 2021

Describe the bug
Following an Accessibility Audit across all current Components, a list of bugs to be addressed has been compiled

To Reproduce
[Steps to reproduce the behavior:]

  1. Install and enable webaim.org Chrome extension in Chrome
  2. Go to localhost://1234
  3. Click on a listed component
  4. Click on the Webaim Icon top right of Chrome.
  5. View the Accessibility Warnings against the given component in the left hand panel.

Expected behavior
Once components have their Accessibility Issues fixed, the error count per Component in the Webaim extension should be zero.
Listed Issues













COMPONENTISSUES
radioFieldset aria-describedby is empty. Needs to refer to a css selector of DOM element that's innerHTML would address the value
CheckboxInput type="checkbox" has aria-describedby is empty. Needs to refer to a css selector of DOM element that's innerHTML would address the value.Is data-aria-controls needed? As it is empty for each checkbox.labels should refer using the 'for' attribute to the input it is for by the inputs id.Fieldset aria-describedby is empty. Needs to refer to a css selector of DOM element that's innerHTML would address the value
AutocompleteDemo2 Empty buttons need 'aria-label="something descriptive" in place
ToggleDemolabel is missing a htmlFor attribute, which should reference the immediate child div which should have an id
FormDateDemo9 Empty buttons need 'aria-label="something descriptive" in place
CopyToClipboardDemo3 Empty buttons need 'aria-label="something descriptive" in place
`

Desktop (please complete the following information):

  • OS: Agnostic, any OS
  • Browser: Chrome (for testing, though affects all browser and devices)
  • Version: latest
@ClaudioRicciCG ClaudioRicciCG self-assigned this Jun 18, 2021
@daniele-zurico daniele-zurico added the a11y a11y label Jun 21, 2021
@daniele-zurico daniele-zurico added this to the 0.3 milestone Jun 21, 2021
@Ibabalola Ibabalola linked a pull request Sep 9, 2021 that will close this issue
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
a11y a11y
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants