Accessible Modal

<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<style>
  [x-cloak] {
    display: none;
  }
</style>

<div class="py-12 px-12">

  <h1 class="text-2xl">
    Accessible Modal, by Caleb Porzio (creator of Alpine JS)
  </h1>
  <p class="mt-2">
    source: <a href="https://vimeo.com/653784397/dc251a82dc">https://vimeo.com/653784397/dc251a82dc</a>
  </p>

  <div
          x-data="{ open: false }"
          class="mt-12"
  >

    {{!--  Button --}}
    <button
            @click="open = true" type="button"
            class="bg-white border border-black px-4 py-2 focus:outline-none focus:ring-4 focus:ring-aqua-400"
    >
      Open dialog
    </button>

    <template x-teleport="body">
      {{!--  Modal --}}
      <div
              x-show="open"
              x-cloak
              @keydown.escape.window.prevent="open = false"
              role="dialog"
              aria-modal="true"
              x-id="['modal-title']"
              :aria-labelledby="$id('modal-title')"
              class="fixed inset-0"
      >

        {{!--    Overlay --}}
        <div x-show="open" x-transition.opacity
             class="fixed inset-0 bg-black bg-opacity-50"
        ></div>

        {{!--    Panel --}}
        <div
                x-show="open" x-transition
                @click="open = false"
                class="relative h-full w-full flex items-center justify-center"
        >

          <div
                  @click.stop
                  x-trap.noscroll.inert="open"
                  style="max-height: 80vh" class="max-w-2xl w-full bg-white border border-black p-8 overflow-y-auto"
          >
            {{!--        Title --}}
            <h2 class="text-3xl font-medium" :id="$id('modal-title')">
              Confirm
            </h2>


            {{!--        Content --}}
            <p class="mt-2 text-gray-600">
              Are you sure you want to learn how to create an awesome modal?
            </p>

            {{!--        Buttons --}}
            <div class="mt-8 flex space-x-2">
              <button class="bg-white border border-black px-4 py-2 focus:outline-none focus:ring-4 focus:ring-aqua-400">
                Confirm
              </button>
              <button @click="open = false"
                      class="bg-white border border-black px-4 py-2 focus:outline-none focus:ring-4 focus:ring-aqua-400">
                Cancel
              </button>
            </div>

          </div>

        </div>

      </div>

    </template>
  </div>

</div>

<p style="margin-top:1500px;">
  Something far down the page
</p>