Upgrade to Svelte 4, fix accessibility and linting warnings

[atjn]

Hello and thank you for making this awesome component!

When bundling it in my project, I receive 23 a11y warnings:

Click to see all warnings

``` transforming (76) node_modules/esm-env/prod-browser.js18.48.12 [vite-plugin-svelte] /node_modules/svelte-jsoneditor/plugins/value/components/BooleanToggle.svelte:27:0 A11y:

with mousedown handler must have an ARIA role 25: 26: 27:

with click, dblclick handlers must have an ARIA role 30: 31: 32:

with keydown handler must have an ARIA role 107: 108: 109:

with mousedown, keydown handlers must have an ARIA role 81: /> 82: 83:

with keydown, mousedown, contextmenu handlers must have an ARIA role 1593: 1594: 1595:

with mousedown, keydown, contextmenu handlers must have an ARIA role 1289: 1290: 1291:

with click handler must have an ARIA role 21:

22: 23:

^ 24:

25: {#if icon} 18.48.17 [vite-plugin-svelte] /node_modules/svelte-jsoneditor/components/modes/treemode/JSONNode.svelte:491:8 A11y:

with click handler must have an ARIA role 489: {#if expanded} 490: 491:

with click handler must have an ARIA role 496: {:else} 497: 498:

with click handler must have an ARIA role 558: {#if !root} 559: 560:

with click handler must have an ARIA role 610: {#if expanded} 611: 612:

with click handler must have an ARIA role 617: {:else if !root} 618: 619:

with click handler must have an ARIA role 674: {#if !root} 675: 676:

with click handler must have an ARIA role 708: {#if !root} 709: 710:

with mousedown, mousemove, mouseover, mouseout handlers must have an ARIA role 420: 421: 422:

should not be assigned mouse or keyboard event listeners. 99: {#if show} 100:

101:

^ 102: {#if !readOnly} 103: with mouseover, click, keydown handlers must have an ARIA role 692: {:else if filteredItems.length > 0} 693: {#each filteredItems as item, i} 694:

handleHover(i)} 696: on:focus={() => handleHover(i)} 18.48.18 [vite-plugin-svelte] /node_modules/svelte-select/Select.svelte:743:20 A11y:

with click, keydown handlers must have an ARIA role 741: {#if multiple} 742: {#each value as item, i} 743:

with mousedown handler must have an ARIA role 667: 668: 669:

with keydown handler must have an ARIA role 51: 52: 53:

^ 54: {#each items as item} 55: {#if isMenuButton(item)} transforming (1359) node_modules/svelte-jsoneditor/utils/jsonPointer.js18.48.19 [vite-plugin-svelte] /node_modules/svelte-jsoneditor/components/modes/treemode/CollapsedItems.svelte:31:0 A11y:

with mousemove handler must have an ARIA role 29: 30: 31:

with dblclick handler must have an ARIA role 58: /> 59: {:else} 60:

^ 61: {#if searchResultItems} 62: transforming (1539) node_modules/lodash-es/_metaMap.js18.48.20 [vite-plugin-svelte] /node_modules/svelte-jsoneditor/components/controls/DropdownButton.svelte:38:0 A11y:

with click handler must have an ARIA role 36: 37: 38:

^ 39: ```

I try my best to make my apps accessible, and this amount of warnings makes me think that there are some issues in jsoneditor. I also would prefer it if my build output could be less filled with these warnings, as it is hard to find warnings for my own code now.

Is this something you are aware of? Is there an explanation for the warnings? I might be able to help resolve them if you want me to :)

[josdejong]

Thanks for reporting Anton. Those warnings are new since Svelte 4, which came out a couple of weeks ago I think. Upgrading to Svelte 4 requires some work. I made a start with it a few days ago but hit some issues like eslint breaking and requiring changing the config, and the generation of the TS types breaking. It wil require some effort to figure it all out and not all of the issues are under my control.

[atjn]

That makes sense, I was not aware the update added more warnings. Thanks for your work, I will look forward to the Svelte 4 update :)

[josdejong]

I'm working on the Svelte 4 upgrade in the following branch: https://github.com/josdejong/svelte-jsoneditor/tree/chore/svelte4

Most issues and warnings are fixed, and the biggest open issue is the following: https://github.com/Swatinem/rollup-plugin-dts/issues/162#issuecomment-1677556479. If anyone knows a solution please let me know.

[josdejong]

I think I've everything sorted now, see PR #303 (not yet merged).

[josdejong]

Published now in v0.18.0