fix: Correct <Button> semantics by not wrapping the content (#221)

refactor: simplify <Button>
ReVanced · Mar 3, 2024 · d1363c7 · d1363c7
1 parent 662839a
commit d1363c7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -6,23 +6,21 @@
  export let label = '';
 </script>
 
-<button on:click>
- {#if href}
- <a {href} {target} {...$$restProps} class={`button-${type}`} aria-label={label}>
- {#if icon}
- <img src="../icons/{icon}.svg" alt={icon} />
- {/if}
- <slot />
- </a>
- {:else}
- <div {...$$restProps} class={`button-${type}`} aria-label={label}>
- {#if icon}
- <img src="../icons/{icon}.svg" alt={icon} />
- {/if}
- <slot />
- </div>
- {/if}
-</button>
+{#if href}
+ <a {href} {target} class={`button-${type}`} aria-label={label}>
+ {#if icon}
+ <img src="../icons/{icon}.svg" alt={icon} />
+ {/if}
+ <slot />
+ </a>
+{:else}
+ <button on:click class={`button-${type}`} aria-label={label}>
+ {#if icon}
+ <img src="../icons/{icon}.svg" alt={icon} />
+ {/if}
+ <slot />
+ </button>
+{/if}
 
 <style>
  button {
@@ -33,7 +31,7 @@
  }
 
  a,
- div {
+ button {
  min-width: max-content;
  font-size: 0.95rem;
  text-decoration: none;
@@ -72,7 +70,7 @@
  letter-spacing: 0.01rem;
  }
 
- div:hover,
+ button:hover,
  a:hover {
  filter: brightness(85%);
  }

diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
@@ -77,7 +77,6 @@
  <Button
  type="text"
  href={data.assets[0].browser_download_url}
- download
  on:click={() => (warningDialogue = false)}>Okay</Button
  >
  </Query>
@@ -100,7 +99,6 @@
  type="filled"
  icon="download"
  href={data.assets[0].browser_download_url}
- download
  >
  {data.metadata.tag_name}
  </Button>