Merge branch 'main' into chore-sync-next-main

2026-03-13 10:22:08 +08:00 · 2024-08-30 13:35:59 -04:00
parent a0101bf3fb 95dd3364f2
commit 526f2b4a63
184 changed files with 14650 additions and 12348 deletions
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+
+
+
+
+
+## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
 ## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)

 **Note:** Version bump only for package @ionic/angular
--- a/packages/angular/common/src/directives/navigation/router-link-delegate.ts
+++ b/packages/angular/common/src/directives/navigation/router-link-delegate.ts
@@ -31,12 +31,45 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {

  ngOnInit(): void {
    this.updateTargetUrlAndHref();
+    this.updateTabindex();
  }

  ngOnChanges(): void {
    this.updateTargetUrlAndHref();
  }

+  /**
+   * The `tabindex` is set to `0` by default on the host element when
+   * the `routerLink` directive is used. This causes issues with Ionic
+   * components that wrap an `a` or `button` element, such as `ion-item`.
+   * See issue https://github.com/angular/angular/issues/28345
+   *
+   * This method removes the `tabindex` attribute from the host element
+   * to allow the Ionic component to manage the focus state correctly.
+   */
+  private updateTabindex() {
+    // Ionic components that render a native anchor or button element
+    const ionicComponents = [
+      'ION-BACK-BUTTON',
+      'ION-BREADCRUMB',
+      'ION-BUTTON',
+      'ION-CARD',
+      'ION-FAB-BUTTON',
+      'ION-ITEM',
+      'ION-ITEM-OPTION',
+      'ION-MENU-BUTTON',
+      'ION-SEGMENT-BUTTON',
+      'ION-TAB-BUTTON',
+    ];
+    const hostElement = this.elementRef.nativeElement;
+
+    if (ionicComponents.includes(hostElement.tagName)) {
+      if (hostElement.getAttribute('tabindex') === '0') {
+        hostElement.removeAttribute('tabindex');
+      }
+    }
+  }
+
  private updateTargetUrlAndHref() {
    if (this.routerLink?.urlTree) {
      const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
--- a/packages/angular/common/src/overlays/modal.ts
+++ b/packages/angular/common/src/overlays/modal.ts
@@ -60,6 +60,7 @@ const MODAL_INPUTS = [
  'cssClass',
  'enterAnimation',
  'event',
+  'focusTrap',
  'handle',
  'handleBehavior',
  'initialBreakpoint',
--- a/packages/angular/common/src/overlays/popover.ts
+++ b/packages/angular/common/src/overlays/popover.ts
@@ -56,6 +56,7 @@ const POPOVER_INPUTS = [
  'dismissOnSelect',
  'enterAnimation',
  'event',
+  'focusTrap',
  'isOpen',
  'keyboardClose',
  'leaveAnimation',
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular",
-  "version": "8.2.2",
+  "version": "8.2.7",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular",
-      "version": "8.2.2",
+      "version": "8.2.7",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^8.2.2",
+        "@ionic/core": "^8.2.7",
        "ionicons": "^7.0.0",
        "jsonc-parser": "^3.0.0",
        "tslib": "^2.3.0"
@@ -1398,11 +1398,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz",
-      "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==",
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.7.tgz",
+      "integrity": "sha512-pi7cGjgUcX3dMiku7mO/wh1mQ6yHsHZaUQKKor+fabmoL04YSRJCSJfqf9vImMwmegeon9xU6VPZuiJh2HV8YQ==",
      "dependencies": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -2203,9 +2203,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz",
-      "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -9820,11 +9820,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.2.tgz",
-      "integrity": "sha512-gpWemL5IJjGDJPz6dltHnFyqioRl0sugs2PUXrwPaYwMnTDoRZ6iojYFovCIr5YJN99rHZprOthdcsYR/viGyQ==",
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.7.tgz",
+      "integrity": "sha512-pi7cGjgUcX3dMiku7mO/wh1mQ6yHsHZaUQKKor+fabmoL04YSRJCSJfqf9vImMwmegeon9xU6VPZuiJh2HV8YQ==",
      "requires": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -10375,9 +10375,9 @@
      }
    },
    "@stencil/core": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz",
-      "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@tootallnate/once": {
      "version": "2.0.0",
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "8.2.2",
+  "version": "8.2.7",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -47,7 +47,7 @@
    }
  },
  "dependencies": {
-    "@ionic/core": "^8.2.2",
+    "@ionic/core": "^8.2.7",
    "ionicons": "^7.0.0",
    "jsonc-parser": "^3.0.0",
    "tslib": "^2.3.0"
--- a/packages/angular/test/base/e2e/src/lazy/popover.spec.ts
+++ b/packages/angular/test/base/e2e/src/lazy/popover.spec.ts
@@ -22,4 +22,14 @@ describe('Popovers: Inline', () => {
    cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
    cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
  });
+
+  it('should have an item with a disabled attribute', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
+    cy.wait(1500);
+
+    cy.get('ion-list ion-item:nth-child(3)').should('have.attr', 'disabled');
+  });
 });
--- a/packages/angular/test/base/e2e/src/lazy/router-link.spec.ts
+++ b/packages/angular/test/base/e2e/src/lazy/router-link.spec.ts
@@ -123,6 +123,21 @@ describe('Router Link', () => {
      testBack();
    });
  });
+
+  // Angular sets the `tabindex` to `"0"` on any element that uses
+  // the `routerLink` directive. Ionic removes the `tabindex` from
+  // components that wrap an `a` or `button` element, so we are
+  // checking here that it is only removed from Ionic components.
+  // https://github.com/ionic-team/ionic-framework/issues/20632
+  describe('tabindex', () => {
+    it('should have tabindex="0" with a native span', () => {
+      cy.get('#span').should('have.attr', 'tabindex', '0');
+    });
+
+    it('should not have tabindex set with an ionic button', () => {
+      cy.get('#routerLink').should('not.have.attr', 'tabindex');
+    });
+  });
 });

 function testForward() {
--- a/packages/angular/test/base/e2e/src/standalone/router-link.spec.ts
+++ b/packages/angular/test/base/e2e/src/standalone/router-link.spec.ts
@@ -2,7 +2,7 @@ describe('RouterLink', () => {
  beforeEach(() => {
    cy.visit('/standalone/router-link');
  });
-  
+
  it('should mount the root component', () => {
    cy.ionPageVisible('app-router-link');

@@ -21,4 +21,17 @@ describe('RouterLink', () => {

    cy.url().should('include', '/standalone/popover');
  });
+
+  // Angular sets the `tabindex` to `"0"` on any element that uses
+  // the `routerLink` directive. Ionic removes the `tabindex` from
+  // components that wrap an `a` or `button` element, so we are
+  // checking here that it is only removed from Ionic components.
+  // https://github.com/ionic-team/ionic-framework/issues/20632
+  it('should have tabindex="0" with a native span', () => {
+    cy.get('span').should('have.attr', 'tabindex', '0');
+  });
+
+  it('should not have tabindex set with an ionic button', () => {
+    cy.get('ion-button').should('not.have.attr', 'tabindex');
+  });
 });
--- a/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
+++ b/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
@@ -57,5 +57,10 @@
        Accordions Test
      </ion-label>
    </ion-item>
+    <ion-item routerLink="/lazy/popover-inline">
+      <ion-label>
+        Popovers
+      </ion-label>
+    </ion-item>
  </ion-list>
 </ion-content>
--- a/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.html
+++ b/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.html
@@ -4,8 +4,8 @@
  <ng-template>
    <ion-content>
      <ion-list>
-        <ion-item *ngFor="let item of items">
-          <ion-label>{{ item }}</ion-label>
+        <ion-item *ngFor="let item of items" [button]="true" [disabled]="item.disabled">
+          <ion-label>{{ item.text }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
--- a/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts
+++ b/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts
@@ -13,13 +13,13 @@ import { IonPopover } from "@ionic/angular";
 })
 export class PopoverInlineComponent {

-  items: string[] = [];
+  items: {text: string, disabled?: boolean}[] = [];

  openPopover(popover: IonPopover) {
    popover.present();

    setTimeout(() => {
-      this.items = ['A', 'B', 'C', 'D'];
+      this.items = [{text: 'A'}, {text: 'B'}, {text: 'C', disabled: true}, {text: 'D'}];
    }, 1000);
  }

--- a/packages/angular/test/base/src/app/lazy/router-link/router-link.component.html
+++ b/packages/angular/test/base/src/app/lazy/router-link/router-link.component.html
@@ -36,4 +36,5 @@
  <p><button id="queryParamsFragment" routerLink="/lazy/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }"
      fragment="myDiv1">Query Params and Fragment</button></p>

+  <p><span routerLink="/lazy/router-link-page" id="span">span[routerLink]</span></p>
 </ion-content>
--- a/packages/angular/test/base/src/app/standalone/router-link/router-link.component.html
+++ b/packages/angular/test/base/src/app/standalone/router-link/router-link.component.html
@@ -4,3 +4,9 @@
 <button routerLink="/standalone/popover" routerDirection="root">
  I'm a button
 </button>
+<span routerLink="/standalone/popover" routerDirection="root">
+  I'm a span
+</span>
+<ion-button routerLink="/standalone/popover" routerDirection="root">
+  I'm an ion-button
+</ion-button>