diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d3a4be57e..21322dbc8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.5.2](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v6.5.2) (2023-02-01) + +### Bug Fixes + +* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic-framework/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic-framework/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic-framework/issues/26538) +* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic-framework/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic-framework/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic-framework/issues/26643) +* **popover:** resolve import warning in stencil apps ([#26705](https://github.com/ionic-team/ionic-framework/issues/26705)) ([95f65a5](https://github.com/ionic-team/ionic-framework/commit/95f65a5a390eb600de8998c8be9dfd7c023d1eeb)), closes [#26704](https://github.com/ionic-team/ionic-framework/issues/26704) +* **select:** setting options async updates rendered text ([#26667](https://github.com/ionic-team/ionic-framework/issues/26667)) ([a687457](https://github.com/ionic-team/ionic-framework/commit/a6874579361db548d961fdee83299d664dd6541b)), closes [#19324](https://github.com/ionic-team/ionic-framework/issues/19324) +* **vue:** cache attached view reference ([#26694](https://github.com/ionic-team/ionic-framework/issues/26694)) ([7c00897](https://github.com/ionic-team/ionic-framework/commit/7c0089718afbbe3e19fecee4abbea00a6e618d95)), closes [#26695](https://github.com/ionic-team/ionic-framework/issues/26695) + # [7.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index 704606123c..c9be57c751 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -3,8 +3,7 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) - +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) ### Bug Fixes @@ -69,6 +68,12 @@ Angular: * **checkbox:** `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox. * **accordion:** `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header. +# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) + +### Bug Fixes + +* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic/issues/26643) + diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts index 7e5dca413d..77ed39d6e7 100644 --- a/angular/src/providers/angular-delegate.ts +++ b/angular/src/providers/angular-delegate.ts @@ -30,9 +30,17 @@ export class AngularDelegate { create( resolverOrInjector: ComponentFactoryResolver, injector: Injector, - location?: ViewContainerRef + location?: ViewContainerRef, + elementReferenceKey?: string ): AngularFrameworkDelegate { - return new AngularFrameworkDelegate(resolverOrInjector, injector, location, this.appRef, this.zone); + return new AngularFrameworkDelegate( + resolverOrInjector, + injector, + location, + this.appRef, + this.zone, + elementReferenceKey + ); } } @@ -45,12 +53,29 @@ export class AngularFrameworkDelegate implements FrameworkDelegate { private injector: Injector, private location: ViewContainerRef | undefined, private appRef: ApplicationRef, - private zone: NgZone + private zone: NgZone, + private elementReferenceKey?: string ) {} attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise { return this.zone.run(() => { return new Promise((resolve) => { + const componentProps = { + ...params, + }; + + /** + * Ionic Angular passes a reference to a modal + * or popover that can be accessed using a + * variable in the overlay component. If + * elementReferenceKey is defined, then we should + * pass a reference to the component using + * elementReferenceKey as the key. + */ + if (this.elementReferenceKey !== undefined) { + componentProps[this.elementReferenceKey] = container; + } + const el = attachView( this.zone, this.resolverOrInjector, @@ -61,7 +86,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate { this.elEventsMap, container, component, - params, + componentProps, cssClasses ); resolve(el); diff --git a/angular/src/providers/modal-controller.ts b/angular/src/providers/modal-controller.ts index 6d91fe78b3..63a24ca8f3 100644 --- a/angular/src/providers/modal-controller.ts +++ b/angular/src/providers/modal-controller.ts @@ -21,7 +21,12 @@ export class ModalController extends OverlayBaseController { return super.create({ ...opts, - delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector), + delegate: this.angularDelegate.create( + this.resolver ?? this.environmentInjector, + this.injector, + undefined, + 'modal' + ), }); } } diff --git a/angular/src/providers/popover-controller.ts b/angular/src/providers/popover-controller.ts index 5a5857c9a3..9cfdebc47f 100644 --- a/angular/src/providers/popover-controller.ts +++ b/angular/src/providers/popover-controller.ts @@ -21,7 +21,12 @@ export class PopoverController extends OverlayBaseController { return super.create({ ...opts, - delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector), + delegate: this.angularDelegate.create( + this.resolver ?? this.environmentInjector, + this.injector, + undefined, + 'popover' + ), }); } } diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 9a262e4c8a..72ac1477dc 100644 --- a/core/CHANGELOG.md +++ b/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. +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) + + +### Bug Fixes + +* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic/issues/26538) +* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic/issues/26643) +* **popover:** resolve import warning in stencil apps ([#26705](https://github.com/ionic-team/ionic/issues/26705)) ([95f65a5](https://github.com/ionic-team/ionic/commit/95f65a5a390eb600de8998c8be9dfd7c023d1eeb)), closes [#26704](https://github.com/ionic-team/ionic/issues/26704) +* **select:** setting options async updates rendered text ([#26667](https://github.com/ionic-team/ionic/issues/26667)) ([a687457](https://github.com/ionic-team/ionic/commit/a6874579361db548d961fdee83299d664dd6541b)), closes [#19324](https://github.com/ionic-team/ionic/issues/19324) + + # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 1efd79c7cc..7b523ddaa7 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -209,6 +209,10 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac this.hasStartEl(); } + componentWillLoad() { + this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']); + } + componentDidLoad() { const { el, counter, counterFormatter, fill, shape } = this; const hasHelperSlot = el.querySelector('[slot="helper"]') !== null; @@ -256,7 +260,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac } raf(() => { - this.inheritedAriaAttributes = inheritAttributes(el, ['aria-label']); this.setMultipleInputs(); this.focusable = this.isFocusable(); }); diff --git a/core/src/components/item/test/a11y/item.e2e.ts b/core/src/components/item/test/a11y/item.e2e.ts index ff85a14d75..e958af90d5 100644 --- a/core/src/components/item/test/a11y/item.e2e.ts +++ b/core/src/components/item/test/a11y/item.e2e.ts @@ -12,4 +12,17 @@ test.describe('item: axe', () => { .analyze(); expect(results.violations).toEqual([]); }); + + test('should reflect aria-label', async ({ page }) => { + await page.setContent(` + + + `); + + const item1 = await page.locator('#item-1 .item-native'); + const item2 = await page.locator('#item-2 .item-native'); + + expect(await item1.getAttribute('aria-label')).toEqual('test'); + expect(await item2.getAttribute('aria-label')).toEqual('test'); + }); }); diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 56bc92b8c3..7bd53f1efe 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -441,13 +441,8 @@ export class Modal implements ComponentInterface, OverlayInterface { */ this.currentBreakpoint = this.initialBreakpoint; - const data = { - ...this.componentProps, - modal: this.el, - }; - const { inline, delegate } = this.getDelegate(true); - this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], data, inline); + this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline); hasLazyBuild(el) && (await deepReady(this.usersElement)); writeTask(() => this.el.classList.add('show-modal')); diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 1f67ad6341..7aa701c452 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -1,11 +1,11 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core'; -import { printIonWarning } from '@utils/logging'; import { getIonMode } from '../../global/ionic-global'; import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface'; import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate'; import { addEventListener, raf, hasLazyBuild } from '../../utils/helpers'; +import { printIonWarning } from '../../utils/logging'; import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present } from '../../utils/overlays'; import type { OverlayEventDetail } from '../../utils/overlays-interface'; import { isPlatform } from '../../utils/platform'; @@ -446,13 +446,15 @@ export class Popover implements ComponentInterface, PopoverInterface { const { el } = this; - const data = { - ...this.componentProps, - popover: this.el, - }; - const { inline, delegate } = this.getDelegate(true); - this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], data, inline); + this.usersElement = await attachComponent( + delegate, + el, + this.component, + ['popover-viewport'], + this.componentProps, + inline + ); hasLazyBuild(el) && (await deepReady(this.usersElement)); if (!this.keyboardEvents) { diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 5a17d14222..ff965b3a1a 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,8 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.5.2](https://github.com/ionic-team/ionic-docs/compare/v6.5.1...v6.5.2) (2023-02-01) + +**Note:** Version bump only for package @ionic/docs + + + + + # [7.0.0-beta.0](https://github.com/ionic-team/ionic-docs/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) + **Note:** Version bump only for package @ionic/docs diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index d7eef65a29..e1ef1f20fc 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,9 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) + +**Note:** Version bump only for package @ionic/angular-server + # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) + + ### Features * **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc)) diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index e3ed10d2f7..868b4d462f 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) + +**Note:** Version bump only for package @ionic/react-router + + + + # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 642a1ceee1..8db3ba1642 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) + +**Note:** Version bump only for package @ionic/react + + + + # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) @@ -33,6 +40,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline + ## [6.5.1](https://github.com/ionic-team/ionic/compare/v6.5.0...v6.5.1) (2023-01-25) diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 688d6d9611..c8b2f9728a 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) + +**Note:** Version bump only for package @ionic/vue-router + + + + # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index 2d032add08..e3931e8cfb 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -6775,9 +6775,9 @@ } }, "node_modules/tslib": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", - "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -12164,9 +12164,9 @@ } }, "tslib": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", - "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, "tsutils": { "version": "3.21.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index ec73ffcf53..1e4f939184 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01) + + +### Bug Fixes + +* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic/issues/26538) +* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic/issues/26643) +* **vue:** cache attached view reference ([#26694](https://github.com/ionic-team/ionic/issues/26694)) ([7c00897](https://github.com/ionic-team/ionic/commit/7c0089718afbbe3e19fecee4abbea00a6e618d95)), closes [#26695](https://github.com/ionic-team/ionic/issues/26695) + + + + # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts index 2908cff61a..071e84a604 100644 --- a/packages/vue/src/framework-delegate.ts +++ b/packages/vue/src/framework-delegate.ts @@ -17,19 +17,10 @@ export const VueDelegate = ( // TODO(FW-2969): types const attachViewToDom = ( parentElement: HTMLElement, - component: any, + componentOrTagName: any | string, componentProps: any = {}, classes?: string[] ) => { - /** - * Ionic Framework passes in modal and popover element - * refs as props, but if these are not defined - * on the Vue component instance as props, Vue will - * warn the user. - */ - delete componentProps["modal"]; - delete componentProps["popover"]; - const div = document.createElement("div"); classes && div.classList.add(...classes); parentElement.appendChild(div); @@ -37,10 +28,17 @@ export const VueDelegate = ( const hostComponent = h( Teleport, { to: div }, - h(component, { ...componentProps }) + h(componentOrTagName, { ...componentProps }) ); - refMap.set(component, hostComponent); + /** + * Ionic Framework will use what is returned from `attachViewToDom` + * as the `component` argument in `removeViewFromDom`. + * + * We will store a reference to the div element and the host component, + * so we can later look-up and unmount the correct instance. + */ + refMap.set(div, hostComponent); addFn(hostComponent); diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts index 55c7f8d820..46c79c52c4 100644 --- a/packages/vue/test/base/src/router/index.ts +++ b/packages/vue/test/base/src/router/index.ts @@ -62,6 +62,14 @@ const routes: Array = [ path: '/navigation', component: () => import('@/views/Navigation.vue') }, + { + path: '/components', + component: () => import('@/views/Components.vue'), + }, + { + path: '/components/select', + component: () => import('@/views/Select.vue') + }, { path: '/nested', component: () => import('@/views/RouterOutlet.vue'), @@ -136,7 +144,7 @@ const routes: Array = [ component: () => import('@/views/Tab3Secondary.vue') } ] - } + }, ] const router = createRouter({ diff --git a/packages/vue/test/base/src/views/Components.vue b/packages/vue/test/base/src/views/Components.vue new file mode 100644 index 0000000000..de63bbf990 --- /dev/null +++ b/packages/vue/test/base/src/views/Components.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue index 6e4ded880f..09c35f4908 100644 --- a/packages/vue/test/base/src/views/Home.vue +++ b/packages/vue/test/base/src/views/Home.vue @@ -50,15 +50,28 @@ Delayed Redirect + + Components + - diff --git a/packages/vue/test/base/src/views/Select.vue b/packages/vue/test/base/src/views/Select.vue new file mode 100644 index 0000000000..0f48fcc612 --- /dev/null +++ b/packages/vue/test/base/src/views/Select.vue @@ -0,0 +1,52 @@ + + + diff --git a/packages/vue/test/base/tests/e2e/specs/select.cy.js b/packages/vue/test/base/tests/e2e/specs/select.cy.js new file mode 100644 index 0000000000..de8b832e67 --- /dev/null +++ b/packages/vue/test/base/tests/e2e/specs/select.cy.js @@ -0,0 +1,10 @@ +describe("Components: Select", () => { + beforeEach(() => { + cy.visit("http://localhost:8080/components/select"); + }); + + it("should open a popover overlay interface", () => { + cy.get("#select-popover").click(); + cy.get("ion-popover").should("exist").should("be.visible"); + }); +});