merge release-8.5.8 (#30437)

v8.5.8

Author: ShaneK

CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.8](https://github.com/ionic-team/ionic-framework/compare/v8.5.7...v8.5.8) (2025-05-28)
+
+
+### Bug Fixes
+
+* **input-password-toggle, button:** force update aria attributes ([#30411](https://github.com/ionic-team/ionic-framework/issues/30411)) ([4e38700](https://github.com/ionic-team/ionic-framework/commit/4e387005663b4e8425cb28e41608bb4f924b3864))
+
+
+
+
+
 ## [8.5.7](https://github.com/ionic-team/ionic-framework/compare/v8.5.6...v8.5.7) (2025-05-07)
 
 

core/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.8](https://github.com/ionic-team/ionic-framework/compare/v8.5.7...v8.5.8) (2025-05-28)
+
+
+### Bug Fixes
+
+* **input-password-toggle, button:** force update aria attributes ([#30411](https://github.com/ionic-team/ionic-framework/issues/30411)) ([4e38700](https://github.com/ionic-team/ionic-framework/commit/4e387005663b4e8425cb28e41608bb4f924b3864))
+
+
+
+
+
 ## [8.5.7](https://github.com/ionic-team/ionic-framework/compare/v8.5.6...v8.5.7) (2025-05-07)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.7",
+  "version": "8.5.8",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "@capacitor/haptics": "^7.0.0",
     "@capacitor/keyboard": "^7.0.0",
     "@capacitor/status-bar": "^7.0.0",
-    "@clack/prompts": "^0.10.0",
+    "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.52.0",

core/package.json

@@ -2612,7 +2612,7 @@ export namespace Components {
          */
         "cancelButtonIcon": string;
         /**
-          * Set the the cancel button text. Only applies to `ios` mode.
+          * Set the cancel button text. Only applies to `ios` mode.
          */
         "cancelButtonText": string;
         /**
@@ -7443,7 +7443,7 @@ declare namespace LocalJSX {
          */
         "cancelButtonIcon"?: string;
         /**
-          * Set the the cancel button text. Only applies to `ios` mode.
+          * Set the cancel button text. Only applies to `ios` mode.
          */
         "cancelButtonText"?: string;
         /**

core/src/components.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, Watch, State, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, Watch, State, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
@@ -158,6 +158,26 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    */
   @Event() ionBlur!: EventEmitter<void>;
 
+  /**
+   * This component is used within the `ion-input-password-toggle` component
+   * to toggle the visibility of the password input.
+   * These attributes need to update based on the state of the password input.
+   * Otherwise, the values will be stale.
+   *
+   * @param newValue
+   * @param _oldValue
+   * @param propName
+   */
+  @Watch('aria-checked')
+  @Watch('aria-label')
+  onAriaChanged(newValue: string, _oldValue: string, propName: string) {
+    this.inheritedAttributes = {
+      ...this.inheritedAttributes,
+      [propName]: newValue,
+    };
+    forceUpdate(this);
+  }
+
   /**
    * This is responsible for rendering a hidden native
    * button element inside the associated form. This allows

core/src/components/button/button.tsx

@@ -127,7 +127,7 @@ export class InputPasswordToggle implements ComponentInterface {
           fill="clear"
           shape="round"
           aria-checked={isPasswordVisible ? 'true' : 'false'}
-          aria-label="show password"
+          aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
           role="switch"
           type="button"
           onPointerDown={(ev) => {

core/src/components/input-password-toggle/input-password-toggle.tsx

@@ -20,4 +20,38 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       expect(results.violations).toEqual([]);
     });
   });
+
+  test.describe(title('input password toggle: aria attributes'), () => {
+    test('should inherit aria attributes to inner button on load', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="input" type="password">
+          <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+        </ion-input>
+      `,
+        config
+      );
+
+      const nativeButton = page.locator('ion-input-password-toggle button');
+
+      await expect(nativeButton).toHaveAttribute('aria-label', 'Show password');
+      await expect(nativeButton).toHaveAttribute('aria-checked', 'false');
+    });
+    test('should inherit aria attributes to inner button after toggle', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="input" type="password">
+          <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+        </ion-input>
+      `,
+        config
+      );
+
+      const nativeButton = page.locator('ion-input-password-toggle button');
+      await nativeButton.click();
+
+      await expect(nativeButton).toHaveAttribute('aria-label', 'Hide password');
+      await expect(nativeButton).toHaveAttribute('aria-checked', 'true');
+    });
+  });
 });

core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts

@@ -386,7 +386,7 @@ export class PickerColumnCmp implements ComponentInterface {
     const colEl = this.optsEl;
     if (colEl) {
       // DOM READ
-      // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
+      // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
       this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
     }
     this.refresh(forceRefresh, animated);

core/src/components/picker-legacy-column/picker-column.tsx

@@ -101,7 +101,7 @@ export class Searchbar implements ComponentInterface {
   @Prop() cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp) as string;
 
   /**
-   * Set the the cancel button text. Only applies to `ios` mode.
+   * Set the cancel button text. Only applies to `ios` mode.
    */
   @Prop() cancelButtonText = 'Cancel';