Improve a11y on the cart and sidebar (#411)

* Improve a11y on the cart

* Fix button style

* Remove extra space

* Move cart item count to the right position

Co-authored-by: Luis Alvarez D <luis@vercel.com>

components/ui/Button/Button.module.css

@@ -35,6 +35,15 @@
   @apply border-accent-9 bg-accent-9 text-accent-0;
 }
 
+.naked {
+  @apply bg-transparent font-semibold border-none shadow-none outline-none py-0 px-0;
+}
+
+.naked:hover,
+.naked:focus {
+  @apply bg-transparent border-none;
+}
+
 .disabled,
 .disabled:hover {
   @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;

components/ui/Button/Button.tsx

@@ -12,7 +12,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'flat' | 'slim' | 'ghost'
+  variant?: 'flat' | 'slim' | 'ghost' | 'naked'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -41,6 +41,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.ghost]: variant === 'ghost',
       [s.slim]: variant === 'slim',
+      [s.naked]: variant === 'naked',
       [s.loading]: loading,
       [s.disabled]: disabled,
     },