search

carbon-design-system / carbon-components-vue

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

When using the altInput switch, CvDatePicker startDate label points to wrong input field #1218

Open schuetza opened 3 years ago

schuetza commented 3 years ago

Detailed description

This is a follow-on of #408.

We are using the cv-date-picker with kind="range" and calOption altInput: true. When using this combination, the label of the start date picker refers to a hidden input element, which leads to an A11y violation.

The "for" attribute of the label should point to the second, visible input field (class="bx--date-picker__input form-control input active")

image

Is this a feature request (new component, new icon), a bug, or a general issue?

bug

Is this issue related to a specific component?

CvDatePicker

What did you expect to happen? What happened instead? What would you like to see changed?

Component should be accessible

What browser are you working in?

Firefox 89.0.2

What version of the Carbon Design System are you using?

carbon/vue 2.37.0 and 2.38.2

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

no time pessure

Steps to reproduce the issue

  1. visit the story book https://vue.carbondesignsystem.com/?path=/story/components-cvdatepicker--range-using-date
  2. On the knobs tab, for calOptions enter 
    {
"dateFormat": "m/d/Y", "altInput": true
}
  3. Inspect the DOM tree for the start date control -> Label points to invisible input field. (see screenshot above)

Additional information

none

github-actions[bot] commented 2 weeks 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.