fix(many): hide required asterisks from screenreaders

instructure · Dec 3, 2024 · 78aec71 · 78aec71
1 parent dd1e12c
commit 78aec71
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
     ) : (