Merge branch 'main' into 918-mobile-menu

cfpb · Oct 29, 2024 · ce47e54 · ce47e54
2 parents 51364bb + 7cfc2c1
commit ce47e54
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -70,7 +70,9 @@ export const Alert = ({
 
   return (
     <div className={classes} data-testid='notification' {...properties}>
-      {showIcon ? <Icon {...iconByType[status]} /> : null}
+      {showIcon ? (
+        <Icon ariaLabel={`${status} icon`} {...iconByType[status]} />
+      ) : null}
       <div className='m-notification_content'>
         {message ? (
           <p

diff --git a/src/components/Alert/AlertFieldLevel.tsx b/src/components/Alert/AlertFieldLevel.tsx
@@ -44,7 +44,11 @@ export const AlertFieldLevel = ({
       className={`a-form-alert a-form-alert${AlertFieldLevelClass[status]}`}
       {...properties}
     >
-      <Icon name={MapTypeToIconName[status]} alt={status} withBg />
+      <Icon
+        ariaLabel={`${status} icon`}
+        name={MapTypeToIconName[status]}
+        withBg
+      />
       <span className='a-form-alert_text' data-testid='message'>
         {message}
       </span>

diff --git a/src/components/Alert/AlertLink.tsx b/src/components/Alert/AlertLink.tsx
@@ -13,7 +13,10 @@ export const AlertLink = ({
 }: AlertLinkProperties): JSX.Element => (
   <li className='m-list_item'>
     <a className='m-list_link' href={href}>
-      {label} {isExternal ? <Icon name='external-link' /> : null}
+      {label}{' '}
+      {isExternal ? (
+        <Icon ariaLabel='external link' name='external-link' />
+      ) : null}
     </a>
   </li>
 );
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { Ref } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef, type ReactNode } from 'react';
 import type { TextInputStatusType } from './TextInputStatus';
 import { getTextInputStatusClass } from './TextInputStatus';
@@ -20,7 +20,7 @@ interface RequiredTextInputProperties {
   name: string;
 }
 
-interface CustomTextInputProperties {
+interface CustomTextInputProperties extends ComponentPropsWithoutRef<'input'> {
   className?: string;
   inputProps?: JSX.IntrinsicElements['input'];
   inputRef?: TextInputReference;
@@ -30,16 +30,15 @@ interface CustomTextInputProperties {
   isFullWidth?: boolean;
 }
 
-export type OptionalTextInputProperties = CustomTextInputProperties &
-  JSX.IntrinsicElements['input'];
+export type OptionalTextInputProperties = CustomTextInputProperties;
 
 export type TextInputProperties = OptionalTextInputProperties &
   RequiredTextInputProperties;
 
 /**
  * Source: <a href='https://cfpb.github.io/design-system/components/text-inputs' target='_blank'> https://cfpb.github.io/design-system/components/text-inputs</a>
  */
-export const TextInput = forwardRef(
+export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
   (
     {
       className,
@@ -51,8 +50,8 @@ export const TextInput = forwardRef(
       type = 'text',
       isFullWidth = false,
       ...otherInputProperties
-    }: JSX.IntrinsicElements['input'] & TextInputProperties,
-    reference: Ref<HTMLInputElement>
+    },
+    reference
   ) => {
     const classes = [
       'a-text-input',