demo-app: Fix A11y warnings

[ptmkenny]

How to reproduce

1. cd demo-app
2. npm run check

123 warnings, it seems all of which are A11y-related.

For example:

/Users/private/d/svelte-ionic-app/demo-app/src/routes/components/Toolbar/+page.svelte:89:5
Warn: A11y: <ion-button> with click handler must have an ARIA role (svelte)
			<ion-buttons slot="primary">
				<ion-button on:click={clickAction}>
					<ion-icon slot="icon-only" icon={ellipsisVertical} />
				</ion-button>
			</ion-buttons>

And:

/Users/private/d/svelte-ionic-app/demo-app/src/routes/components/Toolbar/+page.svelte:89:5
Warn: A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details. (svelte)
			<ion-buttons slot="primary">
				<ion-button on:click={clickAction}>
					<ion-icon slot="icon-only" icon={ellipsisVertical} />
				</ion-button>
			</ion-buttons>

When I inspected the demo app at https://ionic-svelte.firebaseapp.com/components/Toolbar, the ion-buttons don't have the role.

It's easy enough to add role="button" or similar to each ion-button. However, it's a bit tedious to add the role every time we add an on:click. So maybe this should be solved at the component level instead-- if a user sets on:click for a button, we automatically add role="button"?

[Tommertom]

Hi yes, this is known. I have a11y warnings supressed in my editor. We don't control the component level as they are ionic native thingies. I don't know how many ionic-svelte developers handle a11y warnings. And as you say, tedious.

I would mark this issue as - will not solve.

[ptmkenny]

Actually, as suggested in this Stack Overflow answer, these warnings may be incorrect. I asked in the Svelte discord and I'll try to figure out if there is a good way to turn off invalid a11y warnings for Ionic components only, so please give me a little time to look into this before closing it.

If I can find a good way to do it, I'll submit a PR.

[ptmkenny]

Quoting from Slack:

Enrico (@theetrain) — Today at 4:47 AM
There's an onwarn function for svelte.config.js, but I can't seem to find documentation for it. ⁠unknown

Note this may change with Svelte 5: sveltejs/language-tools#855 (comment)
You may be able to filter by a particular path in node_modules with this

So it looks like this will be easy to implement in Svelte 5; suggestion: postpone this issue until the Svelte 5 upgrade?

[Tommertom]

Fine with me - thx for researching