fix: make dialog element and role interactive

[arty-name]

Fixes #8283

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

Motivation

I want to use native dialog elements. A common pattern for modal dialogs is dismissing them by clicking on the backdrop pseudo-element. This is achieved by assigning a click event handler to the dialog itself. Svelte is perfect for this task. Except Svelte raises a warning (a11y_no_noninteractive_element_interactions) about adding a click event handler to the dialog element, because Svelte treats it as non-interactive. This is what I want to change.

Solution

Svelte considers elements non-interactive if they don’t have a widget superclass and their roles are not toolbar, tabpanel, cell, or generic. The dialog-related roles are dialog and alertdialog, both of them having a superclass window. Instead of adding the two roles to the exceptions list, I think it makes more sense to also treat the window subclasses as interactive. After all, windows are interactive. If you prefer, however, I could modify the exceptions instead.

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-svelte-15429-svelte.vercel.app/

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@15429

[dummdidumm]

Judging from the discussion in jsx-eslint/eslint-plugin-jsx-a11y#932 this is the right fix - thank you!

[arty-name]

Thank you for a swift but thorough review! 🏆