[Bug Report] Checkbox label does not have a corresponding for attribute
#6178
Comments
deadbeef404
added a commit
to deadbeef404/vuetify
that referenced
this issue
Jan 17, 2019
As checkboxes use the `selectable` mixin, `id` of a VCheckbox is a prop. Therefore, when `genLabel` is called, `id` is not present in `this.$attrs`, and is instead accessible via `this.id`. fix vuetifyjs#6178
8 tasks
deadbeef404
added a commit
to deadbeef404/vuetify
that referenced
this issue
Jan 17, 2019
As checkboxes use the `selectable` mixin, `id` of a VCheckbox is a prop. Therefore, when `genLabel` is called, `id` is not present in `this.$attrs`, and is instead accessible via `this.id`. fix vuetifyjs#6178
|
The v-radio element also does not have a for attribute, @deadbeef404 could you also check this component and replicate your fix if applicable? Thanks |
|
The v-radio passes its id to the labels for attribute, but the id is not defined in the props as far as I can tell. In any case currently in ios mobile browsers & cordova builds clicking on checkbox & radio labels do not work - hope adding the for attribute fixes this issue. Cheers |
|
This also applies to any input that extends input and overwrites genLabel. |
dsseng
added
T: bug
deadbeef404
added a commit
to deadbeef404/vuetify
that referenced
this issue
Jan 23, 2019
The reference to `this.id` in `genLabel()` was not working correctly as the passed attribute was being stored in `$attrs` instead. This change restores the ability to properly relate the `label` to the `input` using the input's `id` attribute. See vuetifyjs#6178
8 tasks
@denizar Restored |
johnleider
pushed a commit
that referenced
this issue
Feb 3, 2019
* fix(VInput): Add `for` attribute on checkbox's related label As checkboxes use the `selectable` mixin, `id` of a VCheckbox is a prop. Therefore, when `genLabel` is called, `id` is not present in `this.$attrs`, and is instead accessible via `this.id`. fix #6178 * fix(VInput): Add `for` attribute on checkbox's related label As checkboxes use the `selectable` mixin, `id` of a VCheckbox is a prop. Therefore, when `genLabel` is called, `id` is not present in `this.$attrs`, and is instead accessible via `this.id`. fix #6178
|
Fix reverted in 666e0fc |
johnleider
added a commit
that referenced
this issue
Jun 2, 2019
MajesticPotatoe
pushed a commit
that referenced
this issue
Jun 5, 2019
* fix(VDataTable): import ripple into datatable and header (#7308) * fix(VDataTable): import ripple in datatable and header * test(VDataTable): remove tohavebeenwared ripple * chore(VDataTable): add comments to vue git issue * test: create initial e2e tests (#7152) add cypress * docs(VBottomNavigation): update examples (#7213) * docs(VBottomNavigation): sort examples * docs(VBottomNav): fix usage example * docs(VBottomNav): fix colorAndShift example * docs(VBottomNav): add grow example * docs(VBottomNav): add hideOnScroll example * docs(VBottomNav): add scrollThreshold example * docs(VBottomNavigation): remove deprecated props * docs(VBottomNavigation): update examples * docs(VBottomNavigation): clean up usage * docs(VBottomNavigation): clean up toggle * docs(VBottomNavigation): split out color and shift, add horizontal * docs(VBottomNavigation): cleanup grow * docs(VBottomNavigation): simplify grow * fix(VDataTable): server side selection (#7270) * feat(VDataTable): column filtering (#7271) * refactor(VDataTable): enable default search on nested properties also updated logic for column filters * chore: update casing on exported type Co-Authored-By: Dmitry Sharshakov <d3dx12.xx@gmail.com> * chore(yarn.lock): update * chore(release): publish v2.0.0-beta.0 * docs(Markdown): trim default slot text * fix(validatable): VuetifyRuleValidator can return string | bolean * fix(VDataIterator): resolve type check error * revert(VDataIterator): revert selection bool, return bool isSelected reverts last commit of setting selection to bool, evaluate selection as bool in isSelected method * docs(QuickStart): update snippet for mdi install * docs: improve information surrounding using v2 and a-la-carte/webpack installations * docs(QuickStart): improve cdn usage information * docs: update snippets to reflect new bootstrap method normalized style of multiple snippets and information * docs: normalize more snippet import styles * docs(Roadmap): update language, fix spelling mistakes * docs(VDivider): update example for 2.0 (#7318) * docs(VDivider): organize existing examples * docs(VDivider): update example pathing * docs(VDivider): update usage * docs(VDivider): Update description. * docs(VDivider): Add playground section * docs(VDivider): Add v-divider component playground. * docs(VDivider): Reorganize existing examples. * docs(VDivider): Separate simple and intermediate examples. * docs(VDivider): Move vertical desc before intermediate examples. * docs(VDivider): Update basic playground example. * docs(VDivider): Update example and usage descriptions. * chore: remove BOM fixes #7337 * fix(VGrid): wrap gutter equation in parentheses was producing incorrect css * style(VData): correct lint in unit test * fix: remove pointer events in &:before hover fixes #7335 * fix(VSlider): set correct value when using negative min and 0 fixes #7320 * fix(VSlider): fixed issue when value is NaN if value is NaN it should reset to min, not zero. since slider might be using a range that does not include zero. * docs(examples): remove usage of shorthand syntax for v-slot * fix(VMessages): update min-height to avoid screen jitter * docs(update new/deprecated data): * fix(VDataTable): fix header color (#7341) closes #7334 * fix(VDataTable): header icons should respect icon type (svg/non-svg) (#7342) closes #7338 * docs(VDivider): update examples for 2.0 (#7343) * docs(VDivider): organize existing examples * docs(VDivider): update example pathing * docs(VDivider): update usage * docs(VDivider): Update description. * docs(VDivider): Add playground section * docs(VDivider): [WIP] Add v-divider component playground. * docs(VDivider): [WIP] Add v-divider component playground. * docs(VDivider): Reorganize existing examples. * docs(VDivider): Separate simple and intermediate examples. * docs(VDivider): Move vertical desc before intermediate examples. * docs(VDivider): Update basic playground example. * docs(VDivider): Update example and usage descriptions. * docs(VDivider): Remove lightAndDark example. * docs(VDivider): Add vertical inset desc. Add vertical inset description and update vertical divider desc. * docs(VDivider): Add vertical inset example. Add vertical inset example and remove inset property from vertical example. * docs(VDivider): Update playground. Remove light/dark theme toggle and fix visibility with controls. * docs(VDivider): Update inset example. Remove toolbar and shorten list data. * docs(VDivider): Combine subheaders and dividerlist examples. * docs(VDivider): Combine subheaders and list examples. * docs(VDivider): Update subheader description and title. * Remove extra line * fix(VTabs): properly set height when provided fixes #7345 * docs(VDataTable): fixed incorrect slot names closes #7340 * docs(VDataTable): fixed incorrect header markup closes #7330 * fix(scripts): invalid path to jest binary in debug:test fixes #7350 * feat(locale): remove obsolete gr.ts locale BREAKING translations for greek language are located in el.ts * fix(VBadge): fix delay on closing badge if transition is disabled (#7287) * Prevent transition if property is unset * Add unit test * style(kitchen): linting * docs(VBottomSheet): update examples (#7349) * docs(VBottomSheet): sort examples * docs(VBottomSheet): add persistent example * docs(VBottomSheet): add model example * docs(VBottomSheet): add playground * docs(VBottomSheet): move inset example to intermediate * docs(VBottomSheet): simplify prop examples * docs(VBottomSheet): move player and list to complex * docs(VNavigationDrawer): add append/prepend slot information to api * docs(Home): improve visual style * fix(VTextField, VSelect): check the existence of input before focusing fixes #7059 * docs(VDivider): Fix inset example theme. (#7362) * chore: updated crowdin in-context keys * docs(Feature): moved data out from lang file * fix(VTextarea): recalculate height on model update (#7363) fixes #4683 fixes #6978 * docs(VSubheader): update examples for 2.0 (#7346) * docs(VSubheader): Reorganize existing examples * docs(VSubheader): Update usage and usage desc. * docs(VSubheader): Update usage example. * docs(VSubheader): Add inset example and description. * docs(VSubheader): Add playground. Add playground section and example. * docs(VSubheader): Update inset desc. * docs(VSubheader): Update playground example. * docs(VSubheader): Update inset example. * docs(VSubheader): Fix trailing commas Remove trailing commas and add key to template because travis said so. * style(docs): linting * fix(locale): update polish translations to 2.0 * chore(ESLint): enable comma-dangle (#7368) * fix(input-controls): properly associate labels with inputs for a11y fixes #6178 * chore(update dev lint styles): * fix(VListItem): add missing disabled styles * fix(VAppBar): remove width declaration on fixed bar width is handled by left and right * chore: global lint:fix script (#7373) * chore: global lint:fix script * chore: better lint:fix script Co-Authored-By: Kael <kaelwd@gmail.com> * docs(VItemGroup): update examples (#7380) * docs(VItemGroup): sort existing examples * docs(VItemGroup): add multiple example * docs(VItemGroup): add mandatory example * docs(VItemGroup): add activeClass example * docs(VItemGroup): hyphenate active-class prop in example * docs(VItemGroup): add playground * feat(locale): add Korean locale files (#7366) * Update korean locale * chore(locale): fix lint errors * chore: fix sneaky comma * docs(VItemGroups): fix lint error * fix(locale): update translation files structure to 2.0 (#7367) * fix(locale): update translatin files structure to 2.0 * lint * fix(VAutocomplete): don't reset search to both undefined and null fixes #7344 * revert: "fix(VAutocomplete): don't reset search to both undefined and null" This reverts commit 071ae76. * calendar event fixes: sass bugs, new prop eventMarginBottom, added styling to better match googleCal * fixed double month name display
johnleider
pushed a commit
that referenced
this issue
Jun 25, 2019
* feat(VCalendar): Add events to v-calendar * feat(VCalendar): Improved event collision and more * docs(VCalendar): Update documentation with new props * fix(VCalendar): fix snapshots * fix(VCalendar): add resize directive to calendar base to fix tests * test(VCalendar): fix timestamp test * test(VCalendar): add some tests for calendar with events * fix(VCalendar): fix snapshots * test(VCalendar): add more tests fpr calendar with events * test(VCalendar): more tests for calendar with events * style(VCalendar): improve styles * test(VCalendar): add tests for events utils * test(VCalendar): fix test names * docs(VCalendar): Update documentation and improve error message * test(VCalendar): add some snapshot tests for events * test(VCalendar): make events utils coverage 100% * test(VCalendar): make calendar base coverage 100% * docs(kitchen): add pans for VCalendar (#6511) * Removed semicolons in tests * docs(VCalendar): fix example lint errors * refactor(VCalendar): move style to component and rename sass * fix(VCalendar): resolve typescript error * Feat(VCalendar) merge next, fix event styles and conflicts (#7406) * fix(VDataTable): import ripple into datatable and header (#7308) * fix(VDataTable): import ripple in datatable and header * test(VDataTable): remove tohavebeenwared ripple * chore(VDataTable): add comments to vue git issue * test: create initial e2e tests (#7152) add cypress * docs(VBottomNavigation): update examples (#7213) * docs(VBottomNavigation): sort examples * docs(VBottomNav): fix usage example * docs(VBottomNav): fix colorAndShift example * docs(VBottomNav): add grow example * docs(VBottomNav): add hideOnScroll example * docs(VBottomNav): add scrollThreshold example * docs(VBottomNavigation): remove deprecated props * docs(VBottomNavigation): update examples * docs(VBottomNavigation): clean up usage * docs(VBottomNavigation): clean up toggle * docs(VBottomNavigation): split out color and shift, add horizontal * docs(VBottomNavigation): cleanup grow * docs(VBottomNavigation): simplify grow * fix(VDataTable): server side selection (#7270) * feat(VDataTable): column filtering (#7271) * refactor(VDataTable): enable default search on nested properties also updated logic for column filters * chore: update casing on exported type Co-Authored-By: Dmitry Sharshakov <d3dx12.xx@gmail.com> * chore(yarn.lock): update * chore(release): publish v2.0.0-beta.0 * docs(Markdown): trim default slot text * fix(validatable): VuetifyRuleValidator can return string | bolean * fix(VDataIterator): resolve type check error * revert(VDataIterator): revert selection bool, return bool isSelected reverts last commit of setting selection to bool, evaluate selection as bool in isSelected method * docs(QuickStart): update snippet for mdi install * docs: improve information surrounding using v2 and a-la-carte/webpack installations * docs(QuickStart): improve cdn usage information * docs: update snippets to reflect new bootstrap method normalized style of multiple snippets and information * docs: normalize more snippet import styles * docs(Roadmap): update language, fix spelling mistakes * docs(VDivider): update example for 2.0 (#7318) * docs(VDivider): organize existing examples * docs(VDivider): update example pathing * docs(VDivider): update usage * docs(VDivider): Update description. * docs(VDivider): Add playground section * docs(VDivider): Add v-divider component playground. * docs(VDivider): Reorganize existing examples. * docs(VDivider): Separate simple and intermediate examples. * docs(VDivider): Move vertical desc before intermediate examples. * docs(VDivider): Update basic playground example. * docs(VDivider): Update example and usage descriptions. * chore: remove BOM fixes #7337 * fix(VGrid): wrap gutter equation in parentheses was producing incorrect css * style(VData): correct lint in unit test * fix: remove pointer events in &:before hover fixes #7335 * fix(VSlider): set correct value when using negative min and 0 fixes #7320 * fix(VSlider): fixed issue when value is NaN if value is NaN it should reset to min, not zero. since slider might be using a range that does not include zero. * docs(examples): remove usage of shorthand syntax for v-slot * fix(VMessages): update min-height to avoid screen jitter * docs(update new/deprecated data): * fix(VDataTable): fix header color (#7341) closes #7334 * fix(VDataTable): header icons should respect icon type (svg/non-svg) (#7342) closes #7338 * docs(VDivider): update examples for 2.0 (#7343) * docs(VDivider): organize existing examples * docs(VDivider): update example pathing * docs(VDivider): update usage * docs(VDivider): Update description. * docs(VDivider): Add playground section * docs(VDivider): [WIP] Add v-divider component playground. * docs(VDivider): [WIP] Add v-divider component playground. * docs(VDivider): Reorganize existing examples. * docs(VDivider): Separate simple and intermediate examples. * docs(VDivider): Move vertical desc before intermediate examples. * docs(VDivider): Update basic playground example. * docs(VDivider): Update example and usage descriptions. * docs(VDivider): Remove lightAndDark example. * docs(VDivider): Add vertical inset desc. Add vertical inset description and update vertical divider desc. * docs(VDivider): Add vertical inset example. Add vertical inset example and remove inset property from vertical example. * docs(VDivider): Update playground. Remove light/dark theme toggle and fix visibility with controls. * docs(VDivider): Update inset example. Remove toolbar and shorten list data. * docs(VDivider): Combine subheaders and dividerlist examples. * docs(VDivider): Combine subheaders and list examples. * docs(VDivider): Update subheader description and title. * Remove extra line * fix(VTabs): properly set height when provided fixes #7345 * docs(VDataTable): fixed incorrect slot names closes #7340 * docs(VDataTable): fixed incorrect header markup closes #7330 * fix(scripts): invalid path to jest binary in debug:test fixes #7350 * feat(locale): remove obsolete gr.ts locale BREAKING translations for greek language are located in el.ts * fix(VBadge): fix delay on closing badge if transition is disabled (#7287) * Prevent transition if property is unset * Add unit test * style(kitchen): linting * docs(VBottomSheet): update examples (#7349) * docs(VBottomSheet): sort examples * docs(VBottomSheet): add persistent example * docs(VBottomSheet): add model example * docs(VBottomSheet): add playground * docs(VBottomSheet): move inset example to intermediate * docs(VBottomSheet): simplify prop examples * docs(VBottomSheet): move player and list to complex * docs(VNavigationDrawer): add append/prepend slot information to api * docs(Home): improve visual style * fix(VTextField, VSelect): check the existence of input before focusing fixes #7059 * docs(VDivider): Fix inset example theme. (#7362) * chore: updated crowdin in-context keys * docs(Feature): moved data out from lang file * fix(VTextarea): recalculate height on model update (#7363) fixes #4683 fixes #6978 * docs(VSubheader): update examples for 2.0 (#7346) * docs(VSubheader): Reorganize existing examples * docs(VSubheader): Update usage and usage desc. * docs(VSubheader): Update usage example. * docs(VSubheader): Add inset example and description. * docs(VSubheader): Add playground. Add playground section and example. * docs(VSubheader): Update inset desc. * docs(VSubheader): Update playground example. * docs(VSubheader): Update inset example. * docs(VSubheader): Fix trailing commas Remove trailing commas and add key to template because travis said so. * style(docs): linting * fix(locale): update polish translations to 2.0 * chore(ESLint): enable comma-dangle (#7368) * fix(input-controls): properly associate labels with inputs for a11y fixes #6178 * chore(update dev lint styles): * fix(VListItem): add missing disabled styles * fix(VAppBar): remove width declaration on fixed bar width is handled by left and right * chore: global lint:fix script (#7373) * chore: global lint:fix script * chore: better lint:fix script Co-Authored-By: Kael <kaelwd@gmail.com> * docs(VItemGroup): update examples (#7380) * docs(VItemGroup): sort existing examples * docs(VItemGroup): add multiple example * docs(VItemGroup): add mandatory example * docs(VItemGroup): add activeClass example * docs(VItemGroup): hyphenate active-class prop in example * docs(VItemGroup): add playground * feat(locale): add Korean locale files (#7366) * Update korean locale * chore(locale): fix lint errors * chore: fix sneaky comma * docs(VItemGroups): fix lint error * fix(locale): update translation files structure to 2.0 (#7367) * fix(locale): update translatin files structure to 2.0 * lint * fix(VAutocomplete): don't reset search to both undefined and null fixes #7344 * revert: "fix(VAutocomplete): don't reset search to both undefined and null" This reverts commit 071ae76. * calendar event fixes: sass bugs, new prop eventMarginBottom, added styling to better match googleCal * fixed double month name display * docs: revert bad merge conflict * feat(VCalendar): fix tests (#7408) * calendar event fixes: sass bugs, new prop eventMarginBottom, added styling to better match googleCal * fixed double month name display * more test fixes * feat(VCalendar): fixed ts lint issues (#7452) * calendar event fixes: sass bugs, new prop eventMarginBottom, added styling to better match googleCal * fixed double month name display * more test fixes * fixed ts lint errors * feat(VCalendar): doc fixes, styling, and locales * feat(VCalendar): doc fixes * fix: pr feedback
This was referenced Jul 23, 2019
This was referenced Jul 23, 2019
This was referenced Sep 20, 2019
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Versions and Environment
Vuetify: 1.4.2
Vue: 2.5.18
Browsers: Chrome 70.0.3538.110
OS: Mac OS 10.11.6
Steps to reproduce
Inspect the
labelelement for the checkbox.Expected Behavior
The
labelelement should have aforattribute pointing to the id of the checkboxinputelement.Actual Behavior
There is no
forattribute.Reproduction Link
https://codepen.io/deadbeef404/pen/ZVZNOJ
Other comments
This is necessary for accessibility. I have created a fix, and will submit the PR shortly.
The text was updated successfully, but these errors were encountered: