Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect use of <label for=FORM_ELEMENT> in Field.Selection component #2842

Closed
langz opened this issue Nov 2, 2023 · 1 comment · Fixed by #2911
Closed

Incorrect use of <label for=FORM_ELEMENT> in Field.Selection component #2842

langz opened this issue Nov 2, 2023 · 1 comment · Fixed by #2911
Labels
released

Comments

@langz
Copy link
Contributor

langz commented Nov 2, 2023 •
edited
Loading

🐛 Bug Report

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
To fix this issue, make sure the label's for attribute references the correct id of a form field.

To Reproduce

<Field.Selection
  variant="button"
  label="Label text"
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
</Field.Selection>

Here's a screenshot of the same error:
image

Thoughts

I believe the problem is related to that ToggleButton's have some kind of own label, and that we should rather pass the related label properties to the ToggleButtonGroupContext.Provider or so 🤔
Instead of sending it to FieldBlock...
@langz langz mentioned this issue Nov 2, 2023
Merged
@langz langz changed the title Issue with label in Field.Selection component Incorrect use of <label for=FORM_ELEMENT> in Field.Selection component Nov 6, 2023
@langz langz mentioned this issue Nov 17, 2023
Merged
tujoworker added a commit that referenced this issue Nov 17, 2023
@tujoworker
fix(Selection): correctly link id with label (#2911)
71ad30d 
Fixes #2842
tujoworker pushed a commit that referenced this issue Dec 12, 2023
@semantic-release-bot
chore(release): 10.15.0 [skip ci]
e40e17e 
## [10.15.0](v10.14.0...v10.15.0) (2023-12-12)

### 📝 Documentation

* **Card:** adds horizontal fields example ([#2907](#2907)) ([661db7a](661db7a))
* **FAQ:** change version of yarn to v4 ([#2944](#2944)) ([5151fd9](5151fd9))
* **FAQ:** removes stylelint as dependency issue ([#2943](#2943)) ([64ffd13](64ffd13))
* **Field.SelectCountry:** select component -> selection component ([#3003](#3003)) ([b098c6b](b098c6b))
* **FormLabel:** document disabled property ([#3004](#3004)) ([d276bf6](d276bf6))
* **Layout:** fix import of ux-layout-spacing.png ([#2921](#2921)) ([910bcb4](910bcb4))
* **Number:** add info about when to use and not to use ([#2955](#2955)) ([55b3447](55b3447))
* **SelectCountry:** replace bar as value in examples ([#2990](#2990)) ([8fd9f0e](8fd9f0e))

### 🐛 Bug Fixes

* **Autocomplete:** enhance reactivity by value change from outside ([#2922](#2922)) ([e4fd9f9](e4fd9f9))
* **Card:** add support for small screen sizes ([#3051](#3051)) ([62daa1a](62daa1a))
* **DatePicker:** renders mask_placeholder from locale w/o provider ([#2947](#2947)) ([b522bd7](b522bd7))
* **Dropdown:** error message when passing a function to innerRef ([#2932](#2932)) ([c362a4a](c362a4a))
* **Expiry:** correct class placement and CSS specificity issue ([#2915](#2915)) ([ae1154d](ae1154d)), closes [#2914](#2914)
* **FieldBlock:** fix support for stretch alignment ([#2913](#2913)) ([2fdbd4b](2fdbd4b)), closes [#2907](#2907)
* **FormLabel:** don't apply margin-right when no content was given ([#2927](#2927)) ([057f957](057f957))
* **forms:** Fix bug on replacing error message values ([#2971](#2971)) ([b24ddb5](b24ddb5))
* **forms:** Fix data context provider path and error state handling ([#2926](#2926)) ([01a01f4](01a01f4))
* **GlobalStatus:** remove z-index to enhance flexibility ([#2952](#2952)) ([13a9d6e](13a9d6e)), closes [/github.com/dnbexperience/eufemia/commit/1fb638b12df290533e6a89e7f8135a7e23c0797e#diff-4d582f82c1661d8de20042e6e65250a4d2710c2b31f8955fcd6eda14097a0b4](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/commit/1fb638b12df290533e6a89e7f8135a7e23c0797e/issues/diff-4d582f82c1661d8de20042e6e65250a4d2710c2b31f8955fcd6eda14097a0b4)
* **Hr:** remove overflow causing a scrollbar ([#2945](#2945)) ([dc989ff](dc989ff))
* **PhoneNumber:** ensure correct alignment on smaller screens ([#2957](#2957)) ([ae9913b](ae9913b))
* **PhoneNumber:** return country code only when a number is given ([#2920](#2920)) ([5b1a9b0](5b1a9b0)), closes [#2922](#2922) [#2923](#2923)
* **RadioGroup:** omit rendering label when not given ([#2928](#2928)) ([693f9d4](693f9d4))
* **Selection:** correctly link id with label ([#2911](#2911)) ([71ad30d](71ad30d)), closes [#2842](#2842)
* **ToggleButtonGroup:** omit rendering label when not given ([#2929](#2929)) ([26f683e](26f683e))

### ✨ Features

* **Accordion:** new filled variant + style refactoring ([#2896](#2896)) ([a4c1fb0](a4c1fb0))
* add support for functional refs to various form components ([#2946](#2946)) ([cecad75](cecad75))
* **Breadcrumb:** correct gap between items and fix overlapping focus ring ([#2917](#2917)) ([6252458](6252458))
* **Button, Anchor:** fix launch icon for _blank button links ([#2930](#2930)) ([37a65dc](37a65dc))
* **Checkbox:** Sbanken styling ([#2904](#2904)) ([b2dbd44](b2dbd44)), closes [#2888](#2888)
* **Currency:** add automatic locale and alignment support ([#2956](#2956)) ([3c64d4d](3c64d4d))
* **forms:** include styles by default ([#2918](#2918)) ([e2f4c1e](e2f4c1e))
* **MultiInputMask:** Add stretch property ([#2914](#2914)) ([706beb3](706beb3))
* **PaymentCard:** adds card_status unknown ([#2934](#2934)) ([a36ffa7](a36ffa7))
* **PhoneNumber:** add `pattern` property ([#2962](#2962)) ([86cb6e0](86cb6e0))
* **PhoneNumber:** add filter for showing e.g. only Scandinavia countries ([#2959](#2959)) ([995c43d](995c43d))
* **PhoneNumber:** add prioritized sort option ([#3034](#3034)) ([5fe0e41](5fe0e41)), closes [#3023](#3023)
* **PhoneNumber:** add property `omitCountryCodeField` ([#2961](#2961)) ([4a3c7e2](4a3c7e2))
* **PhoneNumber:** remove structure and format when number is not +47 ([#2958](#2958)) ([56e2f08](56e2f08))
* **Section:** add dropShadow support ([#3053](#3053)) ([040a92b](040a92b))
* **SelectCountry:** use autocomplete instead of dropdown ([#3023](#3023)) ([0f2990c](0f2990c)), closes [#2993](#2993)
* **Switch:** Sbanken styling ([#2939](#2939)) ([46c5506](46c5506))
* **ToggleButton:** Sbanken styling ([#2936](#2936)) ([5370376](5370376)), closes [#2931](#2931) [#2904](#2904) [#2888](#2888)
* Updated Sbanken theming + improved screenshot test coverage for Radio+Checkbox ([#2931](#2931)) ([e42c81e](e42c81e))
@tujoworker
Copy link
Member

🎉 This issue has been resolved in version 10.15.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(Selection): correctly link id with label dnbexperience/eufemia
2 participants
@langz @tujoworker