Fix a11y issues with Badge component (#2721)

* fix: a11y issues in badge component

* fix: spacing issues with button element
This commit is contained in:
Kenny 2023-10-12 04:33:36 +01:00 committed by GitHub
parent d261d1e467
commit 73eab9280d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}); });
</script> </script>
<span <button
bind:this={spanRef} bind:this={spanRef}
title={tooltip} title={tooltip}
class="badge {className}" class="badge {className}"
@ -35,11 +35,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconConstrain {iconSize} {widthMultiplier} {flipX}> <IconConstrain {iconSize} {widthMultiplier} {flipX}>
<slot /> <slot />
</IconConstrain> </IconConstrain>
</span> </button>
<style> <style>
.badge { .badge {
color: var(--badge-color, inherit); color: var(--badge-color, inherit);
border: none;
background: transparent;
padding: 0;
}
.badge:hover,
.badge:active {
border: none;
background: transparent;
box-shadow: none;
} }
.dropdown-toggle::after { .dropdown-toggle::after {