core/src/utils/test/overlays/index.html - main - githubmirror/ionic

core/src/utils/test/overlays/index.html
177 строк6 KB
Amanda Johnston
fix(overlays): ensure that only topmost overlay is announced by screen readers (#28997)
09 фев 2024, 18:43
09 фев 2024, 18:43ba4ba61
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Overlays</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <script type="module">
      import { modalController, toastController, createAnimation } from '../../../../../dist/ionic/index.esm.js';
      window.modalController = modalController;
      window.toastController = toastController;
    </script>
  </head>

  <body>
    <ion-app>
      <ion-menu content-id="main-content">
        <ion-content>
          <ion-button onclick="openModal(event)">Open Modal</ion-button>
        </ion-content>
      </ion-menu>
      <div class="ion-page" id="main-content">
        <ion-header>
          <ion-toolbar>
            <ion-title>Modal - Inline</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content class="ion-padding">
          <ion-item>
            <ion-input label="Text Input" id="root-input"></ion-input>
          </ion-item>

          <ion-button id="create" onclick="createModal()">Create a Modal</ion-button>
          <ion-button id="create-nested" onclick="createNestedOverlayModal()">Create Nested Overlay Modal</ion-button>
          <ion-button id="present" onclick="presentHiddenModal()">Present a Hidden Modal</ion-button>
          <ion-button id="create-and-present" onclick="createAndPresentModal()">Create and Present a Modal</ion-button>
          <ion-button id="simulate" onclick="backButton()">Simulate Hardware Back Button</ion-button>
          <ion-button id="create-and-present-toast" onclick="createAndPresentToast()"
            >Create and Present Toast</ion-button
          >
        </ion-content>
      </div>
    </ion-app>

    <script>
      let modals = 0;
      const createModal = async () => {
        const div = document.createElement('div');
        const id = modals++;
        div.classList.add(`modal-${id}`);
        div.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Modal</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            Modal ${id}

            <ion-item>
              <ion-input label="Text Input" class="modal-input modal-input-${id}"></ion-input>
            </ion-item>

            <ion-button id="modal-create">Create a Modal</ion-button>
            <ion-button id="modal-create-and-present">Create and Present a Modal</ion-button>
            <ion-button id="modal-simulate">Simulate Hardware Back Button</ion-button>
            <ion-button id="modal-toast">Present a Toast</ion-button>

          </ion-content>
        `;

        const createButton = div.querySelector('ion-button#modal-create');
        createButton.onclick = () => {
          createModal();
        };

        const createAndPresentButton = div.querySelector('ion-button#modal-create-and-present');
        createAndPresentButton.onclick = () => {
          createAndPresentModal();
        };

        const simulateButton = div.querySelector('ion-button#modal-simulate');
        simulateButton.onclick = () => {
          backButton();
        };

        const presentToast = div.querySelector('ion-button#modal-toast');
        presentToast.onclick = () => {
          createAndPresentToast();
        };

        const modal = await modalController.create({
          component: div,
        });

        return modal;
      };

      const createAndPresentModal = async () => {
        const modal = await createModal();
        await modal.present();
      };

      const backButton = () => {
        const ev = new CustomEvent('backbutton');
        document.dispatchEvent(ev);
      };

      const presentHiddenModal = () => {
        const modal = document.querySelector('ion-modal.overlay-hidden');
        if (modal) {
          modal.present();
        }
      };

      const createAndPresentToast = async () => {
        const toast = await toastController.create({
          message: 'This is a toast!',
        });

        await toast.present();
      };

      const createNestedOverlayModal = async () => {
        const div = document.createElement('div');
        div.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Modal</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            Modal Content

            <ion-button id="modal-nested-overlay">Datetime inline modal</ion-button>
            <ion-button id="dismiss-modal-nested-overlay">Dismiss nested overlay</ion-button>

            <ion-modal trigger="modal-nested-overlay">
              <ion-content>
                <ion-datetime show-default-buttons></ion-datetime>
              </ion-content>
            </ion-modal>

          </ion-content>
        `;

        const dismissModalNestedOverlay = div.querySelector('ion-button#dismiss-modal-nested-overlay');
        dismissModalNestedOverlay.onclick = () => {
          window.modalController.getTop().then((top) => {
            top.dismiss();
          });
        };

        const modal = await modalController.create({
          component: div,
        });

        await modal.present();

        return modal;
      };

      window.Ionic = {
        config: {
          hardwareBackButton: true,
        },
      };
    </script>
  </body>
</html>