Modal Screen Reader Issue

[mkmoisen]

Describe the bug

The experience while using a screen reading and navigating to a modal has some issues.

Here is the example modal from the docs:

<script>
  import { Button, Modal } from 'flowbite-svelte';
  let defaultModal = false;
</script>

<Button on:click={() => (defaultModal = true)}>Default modal</Button>
<Modal title="Terms of Service" bind:open={defaultModal} autoclose>
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p>
  <svelte:fragment slot="footer">
    <Button on:click={() => alert('Handle "success"')}>I accept</Button>
    <Button color="alternative">Decline</Button>
  </svelte:fragment>
</Modal>

Using down or right arrow keys

Upon clicking the button, the screen reader focuses on the top right exit X, says "Dialog, close modal, button".

The it seems to focus on the entire page. If you click the down arrow, it again focuses on the top right exit X, says "Dialog, close modal, button" a second time. It then proceeds to read the first paragraph.

If you click the down arrow key again, or the right arrow key, it starts jumping around to different places.

After some time you can finally navigate down to the buttons.

Using tab

If instead you use tab, it is much better but still has an issue:

Upon clicking the button, the screen reader focuses on the top right exit X, says "Dialog, close modal, button".

The it seems to focus on the entire page. Clicking tab again results in a second focus on the top right exit, and the screen reader says "Dialog, close modal, button" a second time.

Clicking tab again goes to the first paragraph. Clicking tab again goes to the buttons.

---

I'm not sure what the best experience ought to be for screen readers. For example should it focus on the title and start reading?

That it focuses on the top right exit icon, says "Dialog close modal button", and then focuses away, is probably not the best behavior.

Reproduction

<script>
  import { Button, Modal } from 'flowbite-svelte';
  let defaultModal = false;
</script>

<Button on:click={() => (defaultModal = true)}>Default modal</Button>
<Modal title="Terms of Service" bind:open={defaultModal} autoclose>
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p>
  <svelte:fragment slot="footer">
    <Button on:click={() => alert('Handle "success"')}>I accept</Button>
    <Button color="alternative">Decline</Button>
  </svelte:fragment>
</Modal>

Flowbite version and System Info

latest