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

[lee-chase]

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

[ed2novoa]

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:

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]

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.