Validation error "Element div not allowed as child of element button in this context" in Menu

[BeeMargarida]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

Creating this issue so that it's not forgotten.

Raised in https://discord.com/channels/954790377754337280/1082395387446427789/1082434208972152892

All Menu Items (and also Tab) contain a button with a div inside. Buttons can only have inline elements inside.

In which browser(s) did the problem occur?

No response

Steps To Reproduce

-

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Relevant Assets

No response

[schindld]

If it helps, here is the patch I created to get rid of the validation errors for the subset of components I've used so far (for @svelteuidev/core 0.10.0) (I know some issues have been fixed in the next-minor branch already):

diff --git a/node_modules/@svelteuidev/core/components/ActionIcon/ActionIcon.svelte b/node_modules/@svelteuidev/core/components/ActionIcon/ActionIcon.svelte
index d800517..480a5e2 100644
--- a/node_modules/@svelteuidev/core/components/ActionIcon/ActionIcon.svelte
+++ b/node_modules/@svelteuidev/core/components/ActionIcon/ActionIcon.svelte
@@ -50,7 +50,6 @@ Icon button to indicate secondary action.
    target={external ? '_blank' : null}
    rel={external ? 'noreferrer noopener' : null}
    {root}
-   {href}
    {...$$restProps}
 >
    {#if loading}
diff --git a/node_modules/@svelteuidev/core/components/ActionIcon/CloseButton/CloseButton.svelte b/node_modules/@svelteuidev/core/components/ActionIcon/CloseButton/CloseButton.svelte
index 65ca509..387ce5e 100644
--- a/node_modules/@svelteuidev/core/components/ActionIcon/CloseButton/CloseButton.svelte
+++ b/node_modules/@svelteuidev/core/components/ActionIcon/CloseButton/CloseButton.svelte
@@ -44,7 +44,6 @@ CloseButton is a premade ActionIcon with close icon
    {loaderProps}
    {loading}
    {disabled}
-   {href}
    {external}
    {...$$restProps}
 >
diff --git a/node_modules/@svelteuidev/core/components/Burger/Burger.svelte b/node_modules/@svelteuidev/core/components/Burger/Burger.svelte
index b568247..f94f014 100644
--- a/node_modules/@svelteuidev/core/components/Burger/Burger.svelte
+++ b/node_modules/@svelteuidev/core/components/Burger/Burger.svelte
@@ -18,5 +18,5 @@ $: ({ classes, getStyles, cx } = useStyles({ color: _color, size, opened }, { na
    class={cx(className, getStyles({ css: override }))}
    {...$$restProps}
 >
-   <div class={cx(classes.burger, { opened: opened })} />
+   <span class={cx(classes.burger, { opened: opened })} />
 </UnstyledButton>
diff --git a/node_modules/@svelteuidev/core/components/Button/Ripple.svelte b/node_modules/@svelteuidev/core/components/Button/Ripple.svelte
index 24b8d4d..51f340e 100644
--- a/node_modules/@svelteuidev/core/components/Button/Ripple.svelte
+++ b/node_modules/@svelteuidev/core/components/Button/Ripple.svelte
@@ -148,7 +148,7 @@
    });
 </script>

-<div class="ripple" bind:this={el} />
+<span class="ripple" bind:this={el} />

 <style>
    .ripple {
diff --git a/node_modules/@svelteuidev/core/components/Input/Input.svelte b/node_modules/@svelteuidev/core/components/Input/Input.svelte
index 98b732f..29967b6 100644
--- a/node_modules/@svelteuidev/core/components/Input/Input.svelte
+++ b/node_modules/@svelteuidev/core/components/Input/Input.svelte
@@ -70,7 +70,7 @@ Base component to create custom inputs

-->

-<Box {...wrapperProps} class={getStyles({ css: override })} {...$$restProps}> +<Box {...wrapperProps} class={getStyles({ css: override })}> {#if icon} <IconRenderer {icon} className={classes.icon} {...iconProps} iconSize={16} /> {/if} @@ -111,7 +111,6 @@ Base component to create custom inputs {disabled} {id} {autocomplete}

• {type} aria-invalid={invalid} class:disabled class:invalid diff --git a/node_modules/@svelteuidev/core/components/Menu/Menu.svelte b/node_modules/@svelteuidev/core/components/Menu/Menu.svelte index 2c82c24..2e52262 100644 --- a/node_modules/@svelteuidev/core/components/Menu/Menu.svelte +++ b/node_modules/@svelteuidev/core/components/Menu/Menu.svelte @@ -45,7 +45,6 @@ onMount(() => { control.setAttribute('role', 'button'); control.setAttribute('aria-haspopup', 'menu'); control.setAttribute('aria-expanded', String(_opened));
• control.setAttribute('aria-controls', uuid); if (menuButtonLabel) control.setAttribute('aria-label', menuButtonLabel); control.addEventListener('click', (event) => { @@ -59,12 +58,14 @@ const handleClose = () => { if (_opened) { _opened = false; opened = false;
• if ($$slots.control) control.removeAttribute('aria-controls'); dispatch('close'); } }; const handleOpen = () => { _opened = true; opened = true;
• if ($$slots.control) control.setAttribute('aria-controls', uuid); dispatch('open'); }; const toggleMenu = () => { @@ -85,7 +86,7 @@ const handleMouseEnter = () => { }; const handleKeyDown = (event) => { if (_opened) {
• const elements = Array.from(dropdownElement.querySelectorAll('.svelteui-Menu-item'));
• const elements = Array.from(dropdownElement.querySelectorAll('.svelteui-MenuItem-root')); if (event.code === 'Tab' && trapFocus) { event.preventDefault(); } @@ -150,7 +151,7 @@ setContext(ctx, contextStore); role="button" aria-haspopup="menu" aria-expanded={_opened}
• aria-controls={uuid}
• aria-controls={_opened ? uuid : ''} aria-label={menuButtonLabel} title={menuButtonLabel} on:click!stopPropagation={toggleMenu} diff --git a/node_modules/@svelteuidev/core/components/Menu/MenuItem/MenuItem.svelte b/node_modules/@svelteuidev/core/components/Menu/MenuItem/MenuItem.svelte index f062698..408bf48 100644 --- a/node_modules/@svelteuidev/core/components/Menu/MenuItem/MenuItem.svelte +++ b/node_modules/@svelteuidev/core/components/Menu/MenuItem/MenuItem.svelte @@ -31,15 +31,15 @@ $: ({ hovered, radius, onItemClick, onItemHover, onItemKeyDown } = $state); on:click={onItemClick} {...$$restProps}

• {#if icon} <IconRenderer {icon} className={classes.itemIcon} {...iconProps} /> {/if}