fix(elements): link input and textarea element to its label (#1041)

inovex · Sep 7, 2023 · 5ad5f90 · 5ad5f90
1 parent e60cd8d
commit 5ad5f90
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 24 deletions.
diff --git a/packages/elements-angular/src/directives/proxies.ts b/packages/elements-angular/src/directives/proxies.ts
@@ -554,13 +554,13 @@ export declare interface InoLabel extends Components.InoLabel {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'outline', 'required', 'showHint', 'text']
+  inputs: ['disabled', 'for', 'outline', 'required', 'showHint', 'text']
 })
 @Component({
   selector: 'ino-label',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'outline', 'required', 'showHint', 'text']
+  inputs: ['disabled', 'for', 'outline', 'required', 'showHint', 'text']
 })
 export class InoLabel {
   protected el: HTMLElement;

diff --git a/packages/elements-vue/src/proxies.ts b/packages/elements-vue/src/proxies.ts
@@ -277,7 +277,8 @@ export const InoLabel = /*@__PURE__*/ defineContainer<JSX.InoLabel>('ino-label',
   'text',
   'required',
   'showHint',
-  'disabled'
+  'disabled',
+  'for'
 ]);
 
 

diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts
@@ -735,6 +735,10 @@ export namespace Components {
           * Colors the label in an light grey to indicate the disabled status for this element
          */
         "disabled": boolean;
+        /**
+          * Id of the associated form control
+         */
+        "for": string;
         /**
           * Styles the label in an outlined style
          */
@@ -2591,6 +2595,10 @@ declare namespace LocalJSX {
           * Colors the label in an light grey to indicate the disabled status for this element
          */
         "disabled"?: boolean;
+        /**
+          * Id of the associated form control
+         */
+        "for"?: string;
         /**
           * Styles the label in an outlined style
          */

diff --git a/packages/elements/src/components/ino-currency-input/ino-currency-input.e2e.ts b/packages/elements/src/components/ino-currency-input/ino-currency-input.e2e.ts
@@ -4,7 +4,7 @@ const CONTENT = `
     <ino-input type="text"></ino-input>
   </ino-currency-input>
 `;
-const NATIVE_INPUT_SELECTOR = 'ino-input > label > input';
+const NATIVE_INPUT_SELECTOR = 'ino-input > .mdc-text-field > input';
 const HIDDEN_INPUT_SELECTOR = 'input[type="hidden"]';
 
 describe('InoCurrencyInput', () => {

diff --git a/packages/elements/src/components/ino-datepicker/ino-datepicker.e2e.ts b/packages/elements/src/components/ino-datepicker/ino-datepicker.e2e.ts
@@ -18,7 +18,7 @@ describe('InoDatepicker', () => {
       const inputEl = await page.find(INPUT);
       expect(inputEl).toBeDefined();
 
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
       expect(flatpickrInputEl).toBeDefined();
 
       const flatpickrCalEl = await page.find('.flatpickr-calendar');
@@ -34,7 +34,7 @@ describe('InoDatepicker', () => {
       const inoDatepickerEl = await page.find(DATEPICKER);
       expect(inoDatepickerEl).toBeDefined();
 
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
       expect(flatpickrInputEl).not.toHaveClass('mdc-text-field--focused');
 
       inoDatepickerEl.setAttribute('autofocus', 'true');
@@ -161,7 +161,7 @@ describe('InoDatepicker', () => {
       const page = await setupPageWithContent(INO_DATEPICKER_WITH_SIBLING);
       const inoDatepickerEl = await page.find(DATEPICKER);
       const buttonEl = await page.find('button');
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('required', true);
       await page.waitForChanges();
@@ -227,7 +227,7 @@ describe('InoDatepicker', () => {
     it('should be invalid if wrong date format provided', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER_WITH_FORMAT);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('value', '01-1970-01');
       await page.waitForChanges();
@@ -243,7 +243,7 @@ describe('InoDatepicker', () => {
     it('should be valid if not required and empty value', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('required', false);
       inoDatepickerEl.setAttribute('value', '');
@@ -255,7 +255,7 @@ describe('InoDatepicker', () => {
     it('should be invalid if value is set before min date', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('min', '10-10-2020');
@@ -268,7 +268,7 @@ describe('InoDatepicker', () => {
     it('should be valid if value is set to min date', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('min', '10-10-2020');
@@ -281,7 +281,7 @@ describe('InoDatepicker', () => {
     it('should be validated after min date is set', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('value', '09-10-2020');
@@ -294,7 +294,7 @@ describe('InoDatepicker', () => {
     it('should be invalid if value is set after max date', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('max', '10-10-2020');
@@ -307,7 +307,7 @@ describe('InoDatepicker', () => {
     it('should be valid if value is set to max date', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('max', '10-10-2020');
@@ -320,7 +320,7 @@ describe('InoDatepicker', () => {
     it('should be validated after max date is set', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('value', '11-10-2020');
@@ -333,7 +333,7 @@ describe('InoDatepicker', () => {
     it('should be valid with min and max date set', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd-m-Y');
       inoDatepickerEl.setAttribute('min', '09-10-2020');
@@ -347,7 +347,7 @@ describe('InoDatepicker', () => {
     it('should be invalid if wrong date format is used inside range', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('date-format', 'd.m.Y');
       inoDatepickerEl.setAttribute('range', 'true');
@@ -360,7 +360,7 @@ describe('InoDatepicker', () => {
     it('should be invalid if incorrectly formatted value is provided in month-picker', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('type', 'month');
       inoDatepickerEl.setAttribute('date-format', 'm.Y');
@@ -373,7 +373,7 @@ describe('InoDatepicker', () => {
     it('should be valid if correctly formatted value is provided in month-picker', async () => {
       const page = await setupPageWithContent(INO_DATEPICKER);
       const inoDatepickerEl = await page.find(DATEPICKER);
-      const flatpickrInputEl = await page.find('ino-input > label.mdc-text-field');
+      const flatpickrInputEl = await page.find('ino-input > span.mdc-text-field');
 
       inoDatepickerEl.setAttribute('type', 'month');
       inoDatepickerEl.setAttribute('date-format', 'm.Y');

diff --git a/packages/elements/src/components/ino-input/ino-input.e2e.ts b/packages/elements/src/components/ino-input/ino-input.e2e.ts
@@ -13,7 +13,7 @@ describe('InoInput', () => {
     page = await setupPageWithContent(`<ino-input></ino-input>`);
     inoInputEl = await page.find('ino-input');
     nativeInputEl = await page.find('input');
-    labelEl = await page.find('label');
+    labelEl = await page.find('.mdc-text-field');
   });
 
   async function applyToNativeHtmlElement(

diff --git a/packages/elements/src/components/ino-input/ino-input.tsx b/packages/elements/src/components/ino-input/ino-input.tsx
@@ -15,7 +15,7 @@ import {
   Method,
 } from '@stencil/core';
 import classNames from 'classnames';
-import { hasSlotContent } from '../../util/component-utils';
+import { generateUniqueId, hasSlotContent } from '../../util/component-utils';
 import { getPrecision } from '../../util/math-utils';
 import { InputType, UserInputInterceptor } from '../types';
 
@@ -357,6 +357,12 @@ export class Input implements ComponentInterface {
    */
   @Prop() resetOnChange = true;
 
+
+  private inputID: string;
+
+  componentWillLoad() {
+    this.inputID = generateUniqueId();
+  }
   // ----
   // Native input event handler
   // ----
@@ -475,8 +481,9 @@ export class Input implements ComponentInterface {
 
     return (
       <Host>
-        <label class={classTextfield}>
+        <span class={classTextfield}>
           <ino-label
+            for={this.inputID}
             outline={this.outline}
             text={this.label}
             required={this.required}
@@ -489,6 +496,7 @@ export class Input implements ComponentInterface {
             </span>
           )}
           <input
+            id={this.inputID}
             ref={(el) => (this.nativeInputEl = el)}
             class="mdc-text-field__input"
             autocomplete={this.autocomplete}
@@ -535,7 +543,7 @@ export class Input implements ComponentInterface {
               <slot name={'icon-trailing'} />
             </span>
           )}
-        </label>
+        </span>
         <div class="mdc-text-field-helper-line">
           {hasHelperText && this.helperTextTemplate()}
           {hasCharacterCounter && this.characterCounterTemplate()}

diff --git a/packages/elements/src/components/ino-label/ino-label.tsx b/packages/elements/src/components/ino-label/ino-label.tsx
@@ -33,6 +33,12 @@ export class Label {
    */
   @Prop() disabled: boolean;
 
+
+  /**
+   * Id of the associated form control
+   */
+  @Prop() for: string;
+
   private filledTemplate = (label: HTMLElement) => [
     <div class="mdc-line-ripple" />,
     label,
@@ -55,7 +61,7 @@ export class Label {
     });
 
     const label = this.text ? (
-      <label class={'mdc-floating-label'}>{this.text}</label>
+      <label htmlFor={this.for} class={'mdc-floating-label'}>{this.text}</label>
     ) : (
       ''
     );

diff --git a/packages/elements/src/components/ino-label/readme.md b/packages/elements/src/components/ino-label/readme.md
@@ -20,6 +20,7 @@ This is an internally used component for various sorts of inputs like `ino-input
 | Property   | Attribute   | Description                                                                        | Type      | Default     |
 | ---------- | ----------- | ---------------------------------------------------------------------------------- | --------- | ----------- |
 | `disabled` | `disabled`  | Colors the label in an light grey to indicate the disabled status for this element | `boolean` | `undefined` |
+| `for`      | `for`       | Id of the associated form control                                                  | `string`  | `undefined` |
 | `outline`  | `outline`   | Styles the label in an outlined style                                              | `boolean` | `undefined` |
 | `required` | `required`  | Appends * to the label to make it appear as an required input in a form            | `boolean` | `undefined` |
 | `showHint` | `show-hint` | Shows a "optional" message, when not `required`; Shows a * mark, when `required`   | `boolean` | `undefined` |

diff --git a/packages/elements/src/components/ino-textarea/ino-textarea.tsx b/packages/elements/src/components/ino-textarea/ino-textarea.tsx
@@ -14,6 +14,7 @@ import {
 } from '@stencil/core';
 import autosize from 'autosize';
 import classNames from 'classnames';
+import { generateUniqueId } from '../../util/component-utils';
 
 @Component({
   tag: 'ino-textarea',
@@ -200,6 +201,8 @@ export class Textarea implements ComponentInterface {
     e.preventDefault();
   }
 
+  private inputID: string;
+
   private initAutogrow() {
     autosize(this.nativeTextareaElement);
   }
@@ -223,6 +226,12 @@ export class Textarea implements ComponentInterface {
     this.valueChange.emit(value);
   }
 
+
+
+  componentWillLoad() {
+    this.inputID = generateUniqueId();
+  }
+
   render() {
     const hostClasses = classNames({
       'ino-textarea--outline': this.outline,
@@ -243,6 +252,7 @@ export class Textarea implements ComponentInterface {
         <div class={classes}>
           <textarea
             ref={(el) => (this.nativeTextareaElement = el)}
+            id={this.inputID}
             class="mdc-text-field__input"
             autofocus={this.autoFocus}
             cols={this.cols}
@@ -264,6 +274,7 @@ export class Textarea implements ComponentInterface {
           )}
           <ino-label
             outline={this.outline}
+            for={this.inputID}
             text={this.label}
             required={this.required}
             disabled={this.disabled}

diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json
@@ -4293,6 +4293,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "for",
+          "type": "string",
+          "mutable": false,
+          "attr": "for",
+          "reflectToAttr": false,
+          "docs": "Id of the associated form control",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "outline",
           "type": "boolean",