feat(Button): loading sets aria-disabled (#3211)

Author: Barsnes

.changeset/eleven-hounds-mix.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Button**: When setting both `aria-busy` and `aria-disabled`, we don't turn down opacity, and show a progress cursor

.changeset/fast-years-push.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Button**: `loading` now sets `aria-disabled="true"`

packages/css/src/button.css

@@ -99,6 +99,12 @@
   &:is(:disabled, [aria-disabled='true']) {
     cursor: not-allowed;
     opacity: var(--ds-disabled-opacity);
+
+    /* When both aria-disabled and aria-busy is true, opacity should be 1 and cursor should be progress */
+    &[aria-busy='true'] {
+      opacity: 1;
+      cursor: progress;
+    }
   }
 
   /* Using :where to prevent adding specificity */

packages/react/src/components/Button/Button.mdx

@@ -118,10 +118,11 @@ Ikon skalerer automatisk basert på knappestørrelse, men du endre denne ved å
 ### Last inn
 
 Når vi skal vise brukeren at knappen laster noe, kan vi kombinere knappen med en `spinner`.
+I eksempelet under bruker vi proppen `loading` for å vise at knappen laster.
 
 <Canvas of={ButtonStories.Loading} />
 
-I eksempelet over har vi brukt `aria-disabled` til å deaktivere knappene. Dette er den anbefalte måten for å vise at en knapp er deaktivert. Da kan den fortsatt få fokus når noen navigerer med tastaturet. Slik vil blant annet skjermlesere og andre hjelpemidler bli informert om at knappen finnes, men ikke er aktiv.
+I eksempelet over blir `aria-disabled` satt av `loading="true"`. Dette er den anbefalte måten for å vise at en knapp er deaktivert. Da kan den fortsatt få fokus når noen navigerer med tastaturet. Slik vil blant annet skjermlesere og andre hjelpemidler bli informert om at knappen finnes, men ikke er aktiv.
 
 Denne egenskapen stopper ikke automatisk knappen fra å utløse `onClick`.
 

packages/react/src/components/Button/Button.tsx

@@ -64,6 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Component
         aria-busy={Boolean(loading) || undefined}
+        aria-disabled={Boolean(loading) || undefined}
         className={cl('ds-button', className)}
         data-icon={icon || undefined}
         data-variant={variant}