Open
Description
How to reproduce
cd demo-appnpm 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"?
Metadata
Metadata
Assignees
Labels
No labels