diff --git a/.github/COMPONENT-GUIDE.md b/.github/COMPONENT-GUIDE.md index 2212d559496..15c74b82e4b 100644 --- a/.github/COMPONENT-GUIDE.md +++ b/.github/COMPONENT-GUIDE.md @@ -93,6 +93,11 @@ The following styles should be set for the CSS to work properly. Note that the ` The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element. +> [!WARNING] +>`:active` should not be used here as it is not received on mobile Safari unless the element has a `touchstart` listener (which we don't necessarily want to have to add to every element). From [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html): +> +>> On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the `:active` pseudo state is triggered only when there is a touch event set on the HTML element + > Make sure the component has the correct [component structure](#component-structure) before continuing. #### JavaScript @@ -109,7 +114,7 @@ render() { } ``` -Once that is done, the element will get the `ion-activated` class added on press. +Once that is done, the element will get the `ion-activated` class added on press after a small delay. This delay exists so that the active state does not show up when an activatable element is tapped while scrolling. In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay: @@ -212,7 +217,13 @@ TODO ### Focused -The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element. +The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element. + +> [!WARNING] +> Do not use `:focus` because that will cause the focus to apply even when an element is tapped (because the element is now focused). Instead, we only want the focus state to be shown when it makes sense which is what the `.ion-focusable` utility mentioned below does. + +> [!NOTE] +> The [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo-class mostly does the same thing as our JavaScript-driven utility. However, it does not work well with Shadow DOM components as the element that receives focus is typically inside of the Shadow DOM, but we usually want to set the `:focus-visible` state on the host so we can style other parts of the component. Using other combinations such as `:has(:focus-visible)` does not work because `:has` does not pierce the Shadow DOM (as that would leak implementation details about the Shadow DOM contents). `:focus-within` does work with the Shadow DOM, but that has the same problem as `:focus` that was mentioned before. Unfortunately, a [`:focus-visible-within` pseudo-class does not exist yet](https://github.com/WICG/focus-visible/issues/151). > Make sure the component has the correct [component structure](#component-structure) before continuing. @@ -275,7 +286,10 @@ ion-button { ### Hover -The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover. +The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover. + +> [!NOTE] +> Some Android devices [incorrectly report their inputs](https://issues.chromium.org/issues/40855702) which can result in certain devices receiving hover events when they should not. > Make sure the component has the correct [component structure](#component-structure) before continuing. diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml index ea87c10fe51..153d18c2bb4 100644 --- a/.github/workflows/actions/build-angular-server/action.yml +++ b/.github/workflows/actions/build-angular-server/action.yml @@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml index 18c56efeff3..0fadff947b4 100644 --- a/.github/workflows/actions/build-angular/action.yml +++ b/.github/workflows/actions/build-angular/action.yml @@ -3,7 +3,7 @@ description: 'Build Ionic Angular' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml index 6ad678cec92..75516422ce6 100644 --- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml +++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml @@ -9,7 +9,7 @@ runs: using: 'composite' steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml index 0d3655e60ea..f8b788b05db 100644 --- a/.github/workflows/actions/build-core/action.yml +++ b/.github/workflows/actions/build-core/action.yml @@ -9,7 +9,7 @@ runs: using: 'composite' steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install Dependencies diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml index 312e6605541..7d511a3de3a 100644 --- a/.github/workflows/actions/build-react-router/action.yml +++ b/.github/workflows/actions/build-react-router/action.yml @@ -3,7 +3,7 @@ description: 'Build Ionic React Router' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml index c1c09325c4a..3d13b37c01d 100644 --- a/.github/workflows/actions/build-react/action.yml +++ b/.github/workflows/actions/build-react/action.yml @@ -3,7 +3,7 @@ description: 'Build Ionic React' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml index eafdcc7f167..897d52ccfc7 100644 --- a/.github/workflows/actions/build-vue-router/action.yml +++ b/.github/workflows/actions/build-vue-router/action.yml @@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml index d02003d0532..db88dcdc200 100644 --- a/.github/workflows/actions/build-vue/action.yml +++ b/.github/workflows/actions/build-vue/action.yml @@ -3,7 +3,7 @@ description: 'Build Ionic Vue' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/download-archive/action.yml b/.github/workflows/actions/download-archive/action.yml index 18108e506be..04cf5108f26 100644 --- a/.github/workflows/actions/download-archive/action.yml +++ b/.github/workflows/actions/download-archive/action.yml @@ -10,7 +10,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/download-artifact@v3 + - uses: actions/download-artifact@v4 with: name: ${{ inputs.name }} path: ${{ inputs.path }} diff --git a/.github/workflows/actions/publish-npm/action.yml b/.github/workflows/actions/publish-npm/action.yml index 4b6d66e4b2f..ede59d830a9 100644 --- a/.github/workflows/actions/publish-npm/action.yml +++ b/.github/workflows/actions/publish-npm/action.yml @@ -19,7 +19,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x # Provenance requires npm 9.5.0+ diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml index 47c8bdf8f09..50c5907af03 100644 --- a/.github/workflows/actions/test-angular-e2e/action.yml +++ b/.github/workflows/actions/test-angular-e2e/action.yml @@ -6,7 +6,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18 - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml index 1cef45dcd9f..8832e717485 100644 --- a/.github/workflows/actions/test-core-clean-build/action.yml +++ b/.github/workflows/actions/test-core-clean-build/action.yml @@ -3,7 +3,7 @@ description: 'Test Core Clean Build' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml index df5b2c3b5fa..c82cede4bf0 100644 --- a/.github/workflows/actions/test-core-lint/action.yml +++ b/.github/workflows/actions/test-core-lint/action.yml @@ -3,7 +3,7 @@ description: 'Test Core Lint' runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install Dependencies diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml index d9cf4bf6f50..d66bbaeae3d 100644 --- a/.github/workflows/actions/test-core-screenshot/action.yml +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -13,7 +13,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive @@ -82,7 +82,7 @@ runs: working-directory: ./core - name: Archive Updated Screenshots if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true' - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }} path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml index 785a84bfa7f..0225348c192 100644 --- a/.github/workflows/actions/test-core-spec/action.yml +++ b/.github/workflows/actions/test-core-spec/action.yml @@ -6,7 +6,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install Dependencies diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml index 17e43ff04a5..c0bc2a4a988 100644 --- a/.github/workflows/actions/test-react-e2e/action.yml +++ b/.github/workflows/actions/test-react-e2e/action.yml @@ -6,7 +6,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml index ce40ad2e125..03e0dc332d0 100644 --- a/.github/workflows/actions/test-react-router-e2e/action.yml +++ b/.github/workflows/actions/test-react-router-e2e/action.yml @@ -6,7 +6,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml index f0f0f2154f3..d4af8272c6b 100644 --- a/.github/workflows/actions/test-vue-e2e/action.yml +++ b/.github/workflows/actions/test-vue-e2e/action.yml @@ -6,7 +6,7 @@ inputs: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - uses: ./.github/workflows/actions/download-archive diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml index 52ac254169f..d33c5e55cee 100644 --- a/.github/workflows/actions/update-reference-screenshots/action.yml +++ b/.github/workflows/actions/update-reference-screenshots/action.yml @@ -7,10 +7,10 @@ on: runs: using: 'composite' steps: - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 18.x - - uses: actions/download-artifact@v3 + - uses: actions/download-artifact@v4 with: path: ./artifacts - name: Extract Archives diff --git a/.github/workflows/actions/upload-archive/action.yml b/.github/workflows/actions/upload-archive/action.yml index 45b272b2618..966b80e3a00 100644 --- a/.github/workflows/actions/upload-archive/action.yml +++ b/.github/workflows/actions/upload-archive/action.yml @@ -13,7 +13,7 @@ runs: - name: Create Archive run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }} shell: bash - - uses: actions/upload-artifact@v3 + - uses: actions/upload-artifact@v4 with: name: ${{ inputs.name }} path: ${{ inputs.output }} diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 46a2780e789..fbb39d4d5d6 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -15,7 +15,7 @@ jobs: security-events: write steps: - uses: actions/checkout@v4 - - uses: github/codeql-action/init@v2 + - uses: github/codeql-action/init@v3 with: languages: javascript - - uses: github/codeql-action/analyze@v2 + - uses: github/codeql-action/analyze@v3 diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d37b81de9f..256e5098bde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -71,9 +71,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline -## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + + +### Bug Fixes + +* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd)) + + + +## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) + ### Bug Fixes * **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033) @@ -1387,7 +1397,7 @@ Developers can add the following CSS to their global stylesheet if they need the display: none !important; } ``` -* **overlays:** Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. +* **overlays:** Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 9a60a3693ba..0ddc94eddfc 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -73,6 +73,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + + +### Bug Fixes + +* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd)) + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) @@ -943,7 +954,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # [7.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.2...v7.0.0-rc.3) (2023-03-22) - + **Note:** Version bump only for package @ionic/core @@ -1358,7 +1369,7 @@ Developers can add the following CSS to their global stylesheet if they need the display: none !important; } ``` -* **overlays:** Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. +* **overlays:** Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. diff --git a/core/package-lock.json b/core/package-lock.json index db2a2297707..622b5d32197 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -633,9 +633,9 @@ "dev": true }, "node_modules/@capacitor/core": { - "version": "5.7.0", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.0.tgz", - "integrity": "sha512-wa9Fao+Axa1t2ZERMyQD9r0xyfglQyC4DHQKintzKaIqcRuVe9J31TmfD3IxROYi9LGpY4X8cq4m4bjb0W94Qg==", + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.1.tgz", + "integrity": "sha512-bwmka6FdvyXOpc5U6bOyx58S/Yl6r5lO2TK561f//KnjyXjxav25HWwhV4hthq3ZxJBMiAEucl9RK5vzgkP4Lw==", "dev": true, "dependencies": { "tslib": "^2.1.0" @@ -1664,12 +1664,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.39.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", - "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", + "version": "1.41.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz", + "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==", "dev": true, "dependencies": { - "playwright": "1.39.0" + "playwright": "1.41.2" }, "bin": { "playwright": "cli.js" @@ -1759,9 +1759,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz", - "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w==", + "version": "4.12.4", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.4.tgz", + "integrity": "sha512-KrwoXu9J1loWSvQQReilGPkt6/dCH/x5eTBDecCBPclz7vxUM13Iw9almBIffEpurk/kaMAglH0G7sAF/A2y1A==", "bin": { "stencil": "bin/stencil" }, @@ -7986,12 +7986,12 @@ } }, "node_modules/playwright": { - "version": "1.39.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", - "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "version": "1.41.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz", + "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==", "dev": true, "dependencies": { - "playwright-core": "1.39.0" + "playwright-core": "1.41.2" }, "bin": { "playwright": "cli.js" @@ -8004,9 +8004,9 @@ } }, "node_modules/playwright-core": { - "version": "1.39.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", - "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", + "version": "1.41.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz", + "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -10416,9 +10416,9 @@ "dev": true }, "@capacitor/core": { - "version": "5.7.0", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.0.tgz", - "integrity": "sha512-wa9Fao+Axa1t2ZERMyQD9r0xyfglQyC4DHQKintzKaIqcRuVe9J31TmfD3IxROYi9LGpY4X8cq4m4bjb0W94Qg==", + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.1.tgz", + "integrity": "sha512-bwmka6FdvyXOpc5U6bOyx58S/Yl6r5lO2TK561f//KnjyXjxav25HWwhV4hthq3ZxJBMiAEucl9RK5vzgkP4Lw==", "dev": true, "requires": { "tslib": "^2.1.0" @@ -11156,12 +11156,12 @@ } }, "@playwright/test": { - "version": "1.39.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", - "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", + "version": "1.41.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz", + "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==", "dev": true, "requires": { - "playwright": "1.39.0" + "playwright": "1.41.2" } }, "@rollup/plugin-node-resolve": { @@ -11229,9 +11229,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz", - "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w==" + "version": "4.12.4", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.4.tgz", + "integrity": "sha512-KrwoXu9J1loWSvQQReilGPkt6/dCH/x5eTBDecCBPclz7vxUM13Iw9almBIffEpurk/kaMAglH0G7sAF/A2y1A==" }, "@stencil/react-output-target": { "version": "0.5.3", @@ -15756,19 +15756,19 @@ } }, "playwright": { - "version": "1.39.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", - "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "version": "1.41.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz", + "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.39.0" + "playwright-core": "1.41.2" } }, "playwright-core": { - "version": "1.39.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", - "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", + "version": "1.41.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz", + "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==", "dev": true }, "postcss": { diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png index 95446725892..88c0d8e8f60 100644 Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png index 3c1976d9e7e..68bb022b38b 100644 Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 8581fe385bb..5ed94a527ad 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -323,7 +323,12 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { test.describe(title('datetime: visibility'), () => { - test('should reset month/year interface when hiding datetime', async ({ page }) => { + // TODO FW-6015 re-enable on webkit when bug is fixed + test('should reset month/year interface when hiding datetime', async ({ page, skip }) => { + skip.browser( + 'webkit', + 'This is buggy in a headless Linux environment: https://bugs.webkit.org/show_bug.cgi?id=270358' + ); await page.setContent( ` diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png index 8e4dd4ba610..4895c84603a 100644 Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png index fa36ad983a8..6609bcf4ec7 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png index 54d8e8257af..6c3651845f4 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png index a761b547a59..961f0c57aeb 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png index a87b26e86fd..56a47c4ab29 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png index 56100f0b8f8..a0002ea2a08 100644 Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png index 6172e3e187c..c0ee6d8519b 100644 Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index a02552727eb..2d84e42c964 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -345,10 +345,47 @@ export class Modal implements ComponentInterface, OverlayInterface { } componentWillLoad() { - const { breakpoints, initialBreakpoint, el } = this; + const { breakpoints, initialBreakpoint, el, htmlAttributes } = this; const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined); - this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']); + const attributesToInherit = ['aria-label', 'role']; + this.inheritedAttributes = inheritAttributes(el, attributesToInherit); + + /** + * When using a controller modal you can set attributes + * using the htmlAttributes property. Since the above attributes + * need to be inherited inside of the modal, we need to look + * and see if these attributes are being set via htmlAttributes. + * + * We could alternatively move this to componentDidLoad to simplify the work + * here, but we'd then need to make inheritedAttributes a State variable, + * thus causing another render to always happen after the first render. + */ + if (htmlAttributes !== undefined) { + attributesToInherit.forEach((attribute) => { + const attributeValue = htmlAttributes[attribute]; + if (attributeValue) { + /** + * If an attribute we need to inherit was + * set using htmlAttributes then add it to + * inheritedAttributes and remove it from htmlAttributes. + * This ensures the attribute is inherited and not + * set on the host. + * + * In this case, if an inherited attribute is set + * on the host element and using htmlAttributes then + * htmlAttributes wins, but that's not a pattern that we recommend. + * The only time you'd need htmlAttributes is when using modalController. + */ + this.inheritedAttributes = { + ...this.inheritedAttributes, + [attribute]: htmlAttributes[attribute], + }; + + delete htmlAttributes[attribute]; + } + }); + } if (isSheetModal) { this.currentBreakpoint = this.initialBreakpoint; diff --git a/core/src/components/modal/test/a11y/modal.spec.ts b/core/src/components/modal/test/a11y/modal.spec.ts deleted file mode 100644 index a80c33e0b82..00000000000 --- a/core/src/components/modal/test/a11y/modal.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { newSpecPage } from '@stencil/core/testing'; - -import { Modal } from '../../modal'; - -describe('modal: a11y', () => { - it('should allow for custom role', async () => { - /** - * Note: This example should not be used in production. - * This only serves to check that `role` can be customized. - */ - const page = await newSpecPage({ - components: [Modal], - html: ` - - `, - }); - - const modal = page.body.querySelector('ion-modal')!; - const modalWrapper = modal.shadowRoot!.querySelector('.modal-wrapper')!; - - await expect(modalWrapper.getAttribute('role')).toBe('alertdialog'); - }); -}); diff --git a/core/src/components/modal/test/modal-attributes.spec.tsx b/core/src/components/modal/test/modal-attributes.spec.tsx new file mode 100644 index 00000000000..76d9b0aafd3 --- /dev/null +++ b/core/src/components/modal/test/modal-attributes.spec.tsx @@ -0,0 +1,39 @@ +import { h } from '@stencil/core'; +import { newSpecPage } from '@stencil/core/testing'; + +import { Modal } from '../modal'; + +it('should inherit attributes', async () => { + /** + * Note: This example should not be used in production. + * This only serves to check that `role` can be customized. + */ + const page = await newSpecPage({ + components: [Modal], + template: () => , + }); + + const modal = page.body.querySelector('ion-modal')!; + const contentWrapper = modal.shadowRoot!.querySelector('[part="content"]')!; + + expect(contentWrapper.getAttribute('aria-label')).toBe('my label'); + expect(contentWrapper.getAttribute('role')).toBe('presentation'); +}); + +it('should inherit attributes when set via htmlAttributes', async () => { + const page = await newSpecPage({ + components: [Modal], + template: () => ( + + ), + }); + + const modal = page.body.querySelector('ion-modal')!; + const contentWrapper = modal.shadowRoot!.querySelector('[part="content"]')!; + + expect(contentWrapper.getAttribute('aria-label')).toBe('my label'); + expect(contentWrapper.getAttribute('role')).toBe('presentation'); + + expect(modal.hasAttribute('aria-label')).toBe(false); + expect(modal.hasAttribute('role')).toBe(false); +}); diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png index 890aab635e9..8bdeaa57816 100644 Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png index b3e932b4c03..5548ea0ac72 100644 Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/reorder-group/test/nested/index.html b/core/src/components/reorder-group/test/nested/index.html index bbbe0818132..0f425dc8812 100644 --- a/core/src/components/reorder-group/test/nested/index.html +++ b/core/src/components/reorder-group/test/nested/index.html @@ -12,6 +12,12 @@ + + diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png index 4ba8dfd503b..bfdb0c0b455 100644 Binary files a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/tsconfig.json b/core/tsconfig.json index 1dabfc83b50..2874f056cc9 100644 --- a/core/tsconfig.json +++ b/core/tsconfig.json @@ -15,7 +15,8 @@ "dom.iterable", "es2017", "es2020", - "es2021" + "es2021", + "esnext" ], "module": "esnext", "moduleResolution": "node", diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 8a4d1e28429..a789916cd6f 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -11,6 +11,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/docs diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 7b9afd6b06b..238756f6caa 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -14,6 +14,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 82ba6076dd2..d1e5c5b1152 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -44,6 +44,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/angular @@ -690,7 +698,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27) -### Features +### Features * **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic/commit/1dee16f3a25dedf831afc09f9c400a42e861beea)) * **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic/issues/26828) diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 728b0aa7b13..97cf3ffd897 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -11,6 +11,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 40d039ca1b7..436be6fc591 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -14,6 +14,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/react + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/react diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 0af13dd05af..43783c6ffce 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -11,6 +11,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 811f82fbd33..8a9feb2c0ea 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -33,6 +33,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) **Note:** Version bump only for package @ionic/vue