search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
606 stars 178 forks source link

Update modal dialog labelledBy and aria-label to match react version #1070

Open lee-chase opened 3 years ago

lee-chase commented 3 years ago

There are discrepancies between how the modal handles aria-label, label and labelled by. Review and update Vue component.

ed2novoa commented 3 years ago

Hi @lee-chase I think this issue is related to an existing accessibility bug found on version "2.36.0".

When analysing the open cv-modal on https://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default with the "Axe" extension on chrome it detects this a11y issue:

image

That also corresponds to this MDN documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role Under the "Description" section we find this bullet point: "The dialog must be properly labeled"

To fix this we will need a way to set custom values for aria-label, aria-labelledby and aria-describedby attributes for the element that has the role="dialog". (Maybe adding some props to the component to let the consumer to pass down the values).

I can help with the work needed to fix this issue. I just need more information to pin point all the existing "discrepancies" that need to be addressed. Please let me know. Thanks!

github-actions[bot] commented 2 months ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.