@ionic/core 7.7.2-dev.11707926434.1affaed4 → 7.7.2-dev.11707932366.16baf005

package/dist/collection/components/textarea/test/a11y/textarea.e2e.js

@@ -4,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/textarea/test/a11y`, config);
+        test('default layout should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-textarea label="Label" placeholder="Placeholder"></ion-textarea>
+          <ion-textarea placeholder="Placeholder">
+            <div slot="label">Label"></div>
+          </ion-textarea>
+          <ion-textarea label="Label" value="My Text"></ion-textarea>
+          <ion-textarea aria-label="Label"></ion-textarea>
+          <ion-textarea label="Email" label-placement="floating" fill="solid" value="hi@ionic.io">
+            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+            <ion-button slot="end" aria-label="button">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
+          </ion-textarea>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('focused state should not have accessibility violations', async ({ page }) => {
+            /**
+             * The primary color against the focus background
+             * when using fill="solid" does not meet AA
+             * contrast guidelines so it excluded from the test.
+             * The contrast here is a significant improvement
+             * over what Ionic has had in the past, so the team
+             * has decided that this tradeoff is acceptable since
+             * the scope of the problem is limited to the focus
+             * state with the primary color when fill="solid".
+             */
+            await page.setContent(`
+        <main>
+          <ion-textarea class="has-focus" label="Label" value="My Text"></ion-textarea>
+          <ion-textarea class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-textarea>
+          <ion-textarea class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-textarea>
+        </main>
+      `, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('textarea: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/textarea/textarea.ios.css

@@ -84,16 +84,16 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: 0;
+  --padding-bottom: 8px;
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -104,16 +104,13 @@
   display: block;
   position: relative;
   width: 100%;
+  min-height: 44px;
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
   box-sizing: border-box;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -144,20 +141,6 @@
   width: fit-content;
 }
 
-:host(.legacy-textarea) {
-  flex: 1;
-  background: var(--background);
-  white-space: pre-wrap;
-}
-
-:host(.legacy-textarea.ion-color) {
-  color: var(--ion-color-base);
-}
-
-:host(:not(.legacy-textarea)) {
-  --padding-bottom: 8px;
-}
-
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
   background: initial;
@@ -221,21 +204,6 @@
   opacity: var(--placeholder-opacity);
 }
 
-:host(.legacy-textarea) .native-textarea {
-  white-space: inherit;
-}
-
-:host(.legacy-textarea) .native-textarea,
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  border-radius: var(--border-radius);
-}
-
 .native-textarea {
   color: inherit;
   font-family: inherit;
@@ -252,55 +220,14 @@
   word-break: break-word;
 }
 
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  grid-area: 1/1/2/2;
-  word-break: break-word;
-}
-
 .cloned-input {
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  .cloned-input {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .cloned-input {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .cloned-input {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .cloned-input {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .cloned-input:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.cloned-input {
+  inset-inline-start: 0;
 }
 
 /**
@@ -312,13 +239,6 @@
   opacity: 1;
 }
 
-:host(.legacy-textarea[auto-grow]) .cloned-input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 :host([auto-grow]) .cloned-input {
   height: 100%;
 }
@@ -374,8 +294,7 @@
   padding-bottom: var(--padding-bottom);
 }
 
-.native-wrapper,
-.textarea-legacy-wrapper {
+.native-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
@@ -390,8 +309,7 @@
    */
   grid-auto-rows: 100%;
 }
-.native-wrapper::after,
-.textarea-legacy-wrapper::after {
+.native-wrapper::after {
   white-space: pre-wrap;
   content: attr(data-replicated-value) " ";
   visibility: hidden;
@@ -490,7 +408,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -509,7 +427,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -941,7 +859,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --padding-top: 10px;
   --padding-end: 0px;
   --padding-bottom: 8px;
@@ -949,13 +867,6 @@
   font-size: inherit;
 }
 
-:host(.legacy-textarea) {
-  --padding-top: 10px;
-  --padding-end: 8px;
-  --padding-bottom: 10px;
-  --padding-start: 0;
-}
-
 :host-context(.item-label-stacked),
 :host-context(.item-label-floating) {
   --padding-top: 8px;
@@ -963,7 +874,6 @@
   --padding-start: 0px;
 }
 
-:host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
 }

package/dist/collection/components/textarea/textarea.js

@@ -2,9 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
+import { createNotchController } from "../../utils/forms/index";
+import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -27,8 +26,6 @@ export class Textarea {
          */
         this.didTextareaClearOnEdit = false;
         this.inheritedAttributes = {};
-        // This flag ensures we log the deprecation warning at most once.
-        this.hasLoggedDeprecationWarning = false;
         // `Event` type is used instead of `InputEvent`
         // since the types from Stencil are not derived
         // from the element (e.g. textarea and input
@@ -47,12 +44,10 @@ export class Textarea {
         this.onFocus = (ev) => {
             this.hasFocus = true;
             this.focusedValue = this.value;
-            this.focusChange();
             this.ionFocus.emit(ev);
         };
         this.onBlur = (ev) => {
             this.hasFocus = false;
-            this.focusChange();
             if (this.focusedValue !== this.value) {
                 /**
                  * Emits the `ionChange` event when the textarea value
@@ -94,7 +89,6 @@ export class Textarea {
         this.helperText = undefined;
         this.label = undefined;
         this.labelPlacement = 'start';
-        this.legacy = undefined;
         this.shape = undefined;
     }
     debounceChanged() {
@@ -105,9 +99,6 @@ export class Textarea {
          */
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
-    disabledChanged() {
-        this.emitStyle();
-    }
     /**
      * Update the native input element when the value changes
      */
@@ -118,14 +109,11 @@ export class Textarea {
             nativeInput.value = value;
         }
         this.runAutoGrow();
-        this.emitStyle();
     }
     connectedCallback() {
         const { el } = this;
-        this.legacyFormController = createLegacyFormController(el);
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        this.emitStyle();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -183,21 +171,6 @@ export class Textarea {
         }
         return Promise.resolve(this.nativeInput);
     }
-    emitStyle() {
-        if (this.legacyFormController.hasLegacyControl()) {
-            this.ionStyle.emit({
-                interactive: true,
-                textarea: true,
-                input: true,
-                'interactive-disabled': this.disabled,
-                'has-placeholder': this.placeholder !== undefined,
-                'has-value': this.hasValue(),
-                'has-focus': this.hasFocus,
-                // TODO(FW-2876): remove this
-                legacy: !!this.legacy,
-            });
-        }
-    }
     /**
      * Emits an `ionChange` event.
      *
@@ -271,40 +244,12 @@ export class Textarea {
             this.didTextareaClearOnEdit = true;
         }
     }
-    focusChange() {
-        this.emitStyle();
-    }
     hasValue() {
         return this.getValue() !== '';
     }
     getValue() {
         return this.value || '';
     }
-    // TODO: FW-2876 - Remove this render function
-    renderLegacyTextarea() {
-        if (!this.hasLoggedDeprecationWarning) {
-            printIonWarning(`ion-textarea now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.
-
-Example: <ion-textarea label="Comments"></ion-textarea>
-Example with aria-label: <ion-textarea aria-label="Comments"></ion-textarea>
-
-For textareas that do not render the label immediately next to the input, developers may continue to use "ion-label" but must manually associate the label with the textarea by using "aria-labelledby".
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
-            this.hasLoggedDeprecationWarning = true;
-        }
-        const mode = getIonMode(this);
-        const value = this.getValue();
-        const labelId = this.inputId + '-lbl';
-        const label = findItemLabel(this.el);
-        if (label) {
-            label.id = labelId;
-        }
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
-                'legacy-textarea': true,
-            }) }, h("div", { class: "textarea-legacy-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? label.id : null, ref: (el) => (this.nativeInput = el), autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value))));
-    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -388,7 +333,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
         }
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
-    renderTextarea() {
+    render() {
         const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
@@ -414,7 +359,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '1994b7a16356fc5fcaead042588ceaafcb80a894', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -423,11 +368,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "textarea-wrapper-inner" }, h("div", { class: "start-slot-wrapper" }, h("slot", { name: "start" })), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { class: "end-slot-wrapper" }, h("slot", { name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
-    }
-    render() {
-        const { legacyFormController } = this;
-        return legacyFormController.hasLegacyControl() ? this.renderLegacyTextarea() : this.renderTextarea();
+            }) }, h("label", { key: 'e7b8610e92ceebe19fd1d17c80134acb5d4f52d1', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '522308f0d38c481b56ed99f43fc7c3747f9c1263', class: "textarea-wrapper-inner" }, h("div", { key: '0e65d62e91815cbb954d3a286813ed75b4dc1500', class: "start-slot-wrapper" }, h("slot", { key: 'e88f83ec1c62c7e9d97837dc9fdcc6f30be6dacc', name: "start" })), h("div", { key: '4d26c34c2468acfd962c6a4a73ad6057342aef44', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e6135e0a61fb5eb2b4f8f7da70ee49a28567c954', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '1946c844cdbeefb989b1a4033050a851b367084f', class: "end-slot-wrapper" }, h("slot", { key: 'ac34fa1edaddb8b377310a2ce88fa651a6e73d3c', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -920,23 +861,6 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "reflect": false,
                 "defaultValue": "'start'"
             },
-            "legacy": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
-                },
-                "attribute": "legacy",
-                "reflect": false
-            },
             "shape": {
                 "type": "string",
                 "mutable": false,
@@ -1117,9 +1041,6 @@ Developers can use the "legacy" property to continue using the legacy form marku
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "disabledChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"