From 324d481f4c7d33f16ce7856eadcdcffd9a19b8b7 Mon Sep 17 00:00:00 2001
From: Gaute Rauboti <gaute.rauboti@knowit.no>
Date: Tue, 13 Aug 2024 10:02:01 +0200
Subject: [PATCH 1/2] Add aria attributes

---
 packages/primitives/src/Spinner.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/primitives/src/Spinner.tsx b/packages/primitives/src/Spinner.tsx
index 4586e33d61..5db87add5e 100644
--- a/packages/primitives/src/Spinner.tsx
+++ b/packages/primitives/src/Spinner.tsx
@@ -21,6 +21,9 @@ export const spinnerRecipe = cva({
     borderBlockColor: "background.subtle",
     borderInlineStartColor: "background.subtle",
     borderInlineEndColor: "stroke.default",
+    "& [data-name='text']": {
+      display: "none",
+    },
     _motionReduce: {
       animationDuration: "2s",
     },
@@ -56,5 +59,13 @@ export type SpinnerProps = HTMLArkProps<"div"> & JsxStyleProps & SpinnerVariantP
 const StyledSpinner = styled(ark.div, {}, { baseComponent: true });
 
 export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({ size, css: cssProp, ...props }, ref) => (
-  <StyledSpinner css={css.raw(spinnerRecipe.raw({ size }), cssProp)} {...props} ref={ref} />
+  <StyledSpinner
+    aria-busy="true"
+    aria-live="polite"
+    aria-valuetext="Loading"
+    role="progressbar"
+    css={css.raw(spinnerRecipe.raw({ size }), cssProp)}
+    {...props}
+    ref={ref}
+  />
 ));

From 6dbf49fec98097384a39094da3f7fc8b349f03eb Mon Sep 17 00:00:00 2001
From: Gaute Rauboti <gaute.rauboti@knowit.no>
Date: Wed, 14 Aug 2024 08:16:14 +0200
Subject: [PATCH 2/2] Make aria-valuetext required

---
 packages/primitives/src/Button.tsx  | 9 +++++----
 packages/primitives/src/Spinner.tsx | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/primitives/src/Button.tsx b/packages/primitives/src/Button.tsx
index 69ab80f551..f7e2353b10 100644
--- a/packages/primitives/src/Button.tsx
+++ b/packages/primitives/src/Button.tsx
@@ -201,6 +201,7 @@ export type ButtonVariantProps = { variant?: ButtonVariant } & RecipeVariantProp
 interface BaseButtonProps extends HTMLArkProps<"button">, JsxStyleProps {
   loading?: boolean;
   loadingContent?: ReactNode;
+  loadingContentText?: string;
   replaceContent?: boolean;
 }
 
@@ -229,10 +230,10 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
 );
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant, loadingContent, size, css: cssProp, ...props }, ref) => (
+  ({ variant, loadingContent, loadingContentText, size, css: cssProp, ...props }, ref) => (
     <BaseButton
       {...props}
-      loadingContent={loadingContent ?? <Spinner size="small" />}
+      loadingContent={loadingContent ?? <Spinner size="small" aria-valuetext={loadingContentText ?? ""} />}
       css={css.raw(buttonBaseRecipe.raw({ variant }), buttonRecipe.raw({ size }), cssProp)}
       ref={ref}
     />
@@ -246,11 +247,11 @@ export type IconButtonVariantProps = { variant?: IconButtonVariant };
 export type IconButtonProps = BaseButtonProps & IconButtonVariantProps;
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ variant, css: cssProp, loadingContent, replaceContent = true, ...props }, ref) => (
+  ({ variant, css: cssProp, loadingContent, loadingContentText, replaceContent = true, ...props }, ref) => (
     <BaseButton
       {...props}
       css={css.raw(buttonBaseRecipe.raw({ variant }), iconButtonRecipe.raw(), cssProp)}
-      loadingContent={loadingContent ?? <Spinner size="small" />}
+      loadingContent={loadingContent ?? <Spinner size="small" aria-valuetext={loadingContentText ?? ""} />}
       replaceContent={replaceContent}
       ref={ref}
     />
diff --git a/packages/primitives/src/Spinner.tsx b/packages/primitives/src/Spinner.tsx
index 5db87add5e..aacb3866b7 100644
--- a/packages/primitives/src/Spinner.tsx
+++ b/packages/primitives/src/Spinner.tsx
@@ -54,7 +54,7 @@ export const spinnerRecipe = cva({
 
 export type SpinnerVariantProps = RecipeVariantProps<typeof spinnerRecipe>;
 
-export type SpinnerProps = HTMLArkProps<"div"> & JsxStyleProps & SpinnerVariantProps;
+export type SpinnerProps = HTMLArkProps<"div"> & JsxStyleProps & SpinnerVariantProps & { "aria-valuetext": string };
 
 const StyledSpinner = styled(ark.div, {}, { baseComponent: true });
 
@@ -62,7 +62,6 @@ export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({ size, css: cs
   <StyledSpinner
     aria-busy="true"
     aria-live="polite"
-    aria-valuetext="Loading"
     role="progressbar"
     css={css.raw(spinnerRecipe.raw({ size }), cssProp)}
     {...props}