Not all svg attributes exist when using typescript

[sorig]

Describe the bug
When using typescript, role and tabIndex do not exist on svg elements. This leads me to believe that the jsx type declaration file is outdated.

To Reproduce

1. Set up a fresh typescript svelte project

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

2. Replace the contents of src/App.svelte with:

<script lang="ts">
</script>

<main tabindex={0}>
	<svg tabIndex={0} viewBox="0 0 10 10" width="10" height="10">
		<g tabindex={0}></g>
		<g role="button"></g>
		<g xlink:role="button"></g>
		<g aria-roledescription="asdf"></g>
	</svg>
</main>

3. npm run validate returns the following errors:

/████/svelte-typescript-app/src/App.svelte:5:7
Error: Type '{ tabindex: number; viewBox: string; width: string; height: string; }' is not assignable to type 'SVGProps<SVGSVGElement>'.
  Property 'tabindex' does not exist on type 'SVGProps<SVGSVGElement>'. (ts)
0}>
        <svg tabIndex={0} viewB

/████/svelte-typescript-app/src/App.svelte:6:6
Error: Type '{ tabindex: number; }' is not assignable to type 'SVGProps<SVGGElement>'.
  Property 'tabindex' does not exist on type 'SVGProps<SVGGElement>'. (ts)
10">
                <g tabindex={0}></g>


/████/svelte-typescript-app/src/App.svelte:7:6
Error: Type '{ role: string; }' is not assignable to type 'SVGProps<SVGGElement>'.
  Property 'role' does not exist on type 'SVGProps<SVGGElement>'. (ts)
</g>
                <g role="button">

Expected behavior
I would expect svelte with typescript to have out-of-the-box support for standard SVG attributes. Note that xlink:role works, but it seems to me that the svg standard prefers role instead of xlink:role.

I added aria-roledescription in my example just to check whether this applies to all aria attributes. That is not the case.

System (please complete the following information):

• OS: macOS 10.13.6
• IDE: VSCode
• Plugin/Package: "Svelte for VSCode" and "svelte-check"

[sorig]

Thanks for sorting this @dummdidumm ! role works now but I still get the error for tabIndex and crossOrigin. Could it have something to do with the camelCase? Note, the error occurs with both camelcase and all lower case spellings.

To reproduce: same steps as above.

[dummdidumm]

Thanks for the info, it's because it's written in camel case in the svelte-jsx.d.ts file, we must change it to all-lowercase. Doing this now.

[BrancuAlexandru]

Same thing applies for the isolation and dataname attributes.