From 78aec71d1056df3a43ffd226d993c451a8fe9c1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= <balazs.saros@instructure.com>
Date: Fri, 29 Nov 2024 15:46:49 +0100
Subject: [PATCH] fix(many): hide required asterisks from screenreaders

---
 .../src/Checkbox/CheckboxFacade/theme.ts         |  2 +-
 .../src/Checkbox/ToggleFacade/theme.ts           |  2 +-
 packages/ui-checkbox/src/Checkbox/index.tsx      | 16 ++++++++++++++--
 .../ui-number-input/src/NumberInput/index.tsx    |  8 +++++++-
 .../ui-radio-input/src/RadioInputGroup/index.tsx |  8 +++++++-
 packages/ui-text-area/src/TextArea/index.tsx     |  8 +++++++-
 packages/ui-text-input/src/TextInput/index.tsx   |  8 +++++++-
 7 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts
index 86bee88894..1984071fe8 100644
--- a/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts
+++ b/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts
@@ -48,7 +48,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
     color: colors?.contrasts?.white1010,
     borderWidth: borders?.widthSmall,
     borderColor: colors?.contrasts?.grey3045,
-    errorBorderColor: colors?.ui?.textError,
+    errorBorderColor: colors?.contrasts?.red5782,
     borderRadius: borders?.radiusMedium,
     background: colors?.contrasts?.white1010,
     marginRight: spacing?.xSmall,
diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts
index cee3ff31f9..69a27d11dd 100644
--- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts
+++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts
@@ -54,7 +54,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
 
   const componentVariables: ToggleFacadeTheme = {
     color: colors?.contrasts?.white1010,
-    errorBorderColor: colors?.ui?.textError,
+    errorBorderColor: colors?.contrasts?.red5782,
     background: colors?.contrasts?.grey1111,
     borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
diff --git a/packages/ui-checkbox/src/Checkbox/index.tsx b/packages/ui-checkbox/src/Checkbox/index.tsx
index 5ed5431c16..18782cd6b6 100644
--- a/packages/ui-checkbox/src/Checkbox/index.tsx
+++ b/packages/ui-checkbox/src/Checkbox/index.tsx
@@ -231,7 +231,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         >
           {label}
           {isRequired && label && (
-            <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+            <span
+              css={this.invalid ? styles?.requiredInvalid : {}}
+              aria-hidden={true}
+            >
+              {' '}
+              *
+            </span>
           )}
         </ToggleFacade>
       )
@@ -248,7 +254,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         >
           {label}
           {isRequired && label && (
-            <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+            <span
+              css={this.invalid ? styles?.requiredInvalid : {}}
+              aria-hidden={true}
+            >
+              {' '}
+              *
+            </span>
           )}
         </CheckboxFacade>
       )
diff --git a/packages/ui-number-input/src/NumberInput/index.tsx b/packages/ui-number-input/src/NumberInput/index.tsx
index a50f1a6491..4c40a1e2f6 100644
--- a/packages/ui-number-input/src/NumberInput/index.tsx
+++ b/packages/ui-number-input/src/NumberInput/index.tsx
@@ -248,7 +248,13 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       <React.Fragment>
         {rawLabel}
         {isRequired && (
-          <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+          <span
+            css={this.invalid ? styles?.requiredInvalid : {}}
+            aria-hidden={true}
+          >
+            {' '}
+            *
+          </span>
         )}
       </React.Fragment>
     ) : (
diff --git a/packages/ui-radio-input/src/RadioInputGroup/index.tsx b/packages/ui-radio-input/src/RadioInputGroup/index.tsx
index 340a76dda7..f4cd235aa8 100644
--- a/packages/ui-radio-input/src/RadioInputGroup/index.tsx
+++ b/packages/ui-radio-input/src/RadioInputGroup/index.tsx
@@ -165,7 +165,13 @@ class RadioInputGroup extends Component<
       <React.Fragment>
         {description}
         {isRequired && description && (
-          <span css={this.invalid ? styles?.invalidAsterisk : {}}> *</span>
+          <span
+            css={this.invalid ? styles?.invalidAsterisk : {}}
+            aria-hidden={true}
+          >
+            {' '}
+            *
+          </span>
         )}
       </React.Fragment>
     ) : (
diff --git a/packages/ui-text-area/src/TextArea/index.tsx b/packages/ui-text-area/src/TextArea/index.tsx
index f4905dd56f..942b5c0319 100644
--- a/packages/ui-text-area/src/TextArea/index.tsx
+++ b/packages/ui-text-area/src/TextArea/index.tsx
@@ -358,7 +358,13 @@ class TextArea extends Component<TextAreaProps> {
       <React.Fragment>
         {this.props.label}
         {required && (
-          <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+          <span
+            css={this.invalid ? styles?.requiredInvalid : {}}
+            aria-hidden={true}
+          >
+            {' '}
+            *
+          </span>
         )}
       </React.Fragment>
     ) : (
diff --git a/packages/ui-text-input/src/TextInput/index.tsx b/packages/ui-text-input/src/TextInput/index.tsx
index 3bd879497f..137484dc0a 100644
--- a/packages/ui-text-input/src/TextInput/index.tsx
+++ b/packages/ui-text-input/src/TextInput/index.tsx
@@ -333,7 +333,13 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       <React.Fragment>
         {rawLabel}
         {isRequired && (
-          <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+          <span
+            css={this.invalid ? styles?.requiredInvalid : {}}
+            aria-hidden={true}
+          >
+            {' '}
+            *
+          </span>
         )}
       </React.Fragment>
     ) : (