fix(overlays): assign incremental id to overlay host (#27278)

Issue number: Internal

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The counter for incrementing the `id` and `z-index` of an overlay is
incremented whenever the `connectedCallback` is fired for an overlay.

When an overlay is presented and/or conditionally rendered, the overlay
`id` can increment by `n+2` instead of `n+1`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Increments all overlay ids consistently
- Removes legacy `ion-modal-{id}` and `ion-popover-{id}` logic
- Adds unit tests for the id behavior
- Tests are split up into separate files so that the counter is always
starting from `0`
- Adds an integration test with the Angular test app to verify
conditional rendering behavior

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/modal/modal.tsx

@@ -28,6 +28,7 @@ import {
   prepareOverlay,
   present,
   createTriggerController,
+  setOverlayId,
 } from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import { getClassMap } from '../../utils/theme';
@@ -65,8 +66,6 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
 export class Modal implements ComponentInterface, OverlayInterface {
   private readonly triggerController = createTriggerController();
   private gesture?: Gesture;
-  private modalIndex = modalIds++;
-  private modalId?: string;
   private coreDelegate: FrameworkDelegate = CoreDelegate();
   private currentTransition?: Promise<any>;
   private sheetTransition?: Promise<any>;
@@ -344,16 +343,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
   componentWillLoad() {
     const { breakpoints, initialBreakpoint, el } = this;
+    const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
 
     this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
 
-    /**
-     * If user has custom ID set then we should
-     * not assign the default incrementing ID.
-     */
-    this.modalId = this.el.hasAttribute('id') ? this.el.getAttribute('id')! : `ion-modal-${this.modalIndex}`;
-    const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
-
     if (isSheetModal) {
       this.currentBreakpoint = this.initialBreakpoint;
     }
@@ -361,6 +354,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
     if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
       printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
     }
+
+    setOverlayId(el);
   }
 
   componentDidLoad() {
@@ -861,7 +856,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
-    const { modalId } = this;
     const isCardModal = presentingElement !== undefined && mode === 'ios';
     const isHandleCycle = handleBehavior === 'cycle';
 
@@ -881,7 +875,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
           'overlay-hidden': true,
           ...getClassMap(this.cssClass),
         }}
-        id={modalId}
         onIonBackdropTap={this.onBackdropTap}
         onIonModalDidPresent={this.onLifecycle}
         onIonModalWillPresent={this.onLifecycle}
@@ -935,8 +928,6 @@ const LIFECYCLE_MAP: any = {
   ionModalDidDismiss: 'ionViewDidLeave',
 };
 
-let modalIds = 0;
-
 interface ModalOverlayOptions {
   /**
    * The element that presented the modal.