[Upload] alerts accessibility, Twitter icon ---> X icon (#587)

closes #588 
closes #567 

## Changes
- enhancement(Upload) - error alerts receive `aria-live` polite
- enhancement(Footer) - Twitter icon ---> X icon

Relies on cfpb/design-system-react#361 being
merged in to receive the cfpb icon update

src/components/AlertApiUnavailable.tsx

@@ -21,6 +21,8 @@ export function AlertApiUnavailable({
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={message}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
       {...others}
     >
       <Paragraph>

src/pages/Filing/FilingApp/FileSubmission.data.tsx

@@ -28,6 +28,8 @@ export function UploadErrorGeneralAlert(): JSX.Element {
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={uploadErrorSubheading}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
     >
       <Paragraph>
         An unknown error occurred during file upload. If this issue persists,{' '}
@@ -43,6 +45,8 @@ export function ValidationErrorGeneralAlert(): JSX.Element {
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={validationErrorSubheading}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
     >
       <Paragraph>
         An unknown error occurred while performing validation checks on your
@@ -59,6 +63,8 @@ function ValidationErrorTimeoutAlert(): JSX.Element {
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={validationErrorSubheading}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
     >
       <Paragraph>
         Our system was not able to process your file within the allotted
@@ -75,6 +81,8 @@ export function UploadMaxSizeAlert(): JSX.Element {
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={uploadErrorSubheading}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
     >
       <Paragraph>
         The file you tried to upload exceeds the file size requirement or
@@ -91,6 +99,8 @@ export function IncorrectFileTypeAlert(): JSX.Element {
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={uploadErrorSubheading}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
     >
       <Paragraph>
         The file you uploaded is an unsupported media type. Check your file and
@@ -104,8 +114,10 @@ export function IncorrectFileTypeAlert(): JSX.Element {
 export const fileSubmissionStateAlert: Record<
   Exclude<
     FileSubmissionState,
+    | FileSubmissionState.START_A_FILING
     | FileSubmissionState.SUBMISSION_STARTED
     | FileSubmissionState.SUBMISSION_UPLOADED
+    | FileSubmissionState.TYPES_OF_INSTITUTION
     | FileSubmissionState.VALIDATION_IN_PROGRESS
   >,
   JSX.Element
@@ -124,6 +136,8 @@ export const fileSubmissionStateAlert: Record<
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={validationErrorSubheading}
       status='error'
+      aria-live='polite'
+      aria-atomic='true'
     >
       <Paragraph>
         There may be an issue with the formatting of your file. Make sure your
@@ -139,9 +153,11 @@ export const fileSubmissionStateAlert: Record<
 export const fileSubmissionValidationStatus: Record<
   Exclude<
     FileSubmissionState,
+    | FileSubmissionState.START_A_FILING
     | FileSubmissionState.SUBMISSION_STARTED
     | FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED
     | FileSubmissionState.SUBMISSION_UPLOADED
+    | FileSubmissionState.TYPES_OF_INSTITUTION
     | FileSubmissionState.UPLOAD_FAILED
     | FileSubmissionState.VALIDATION_ERROR
     | FileSubmissionState.VALIDATION_EXPIRED

yarn.lock

@@ -1594,6 +1594,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cfpb/cfpb-icons@npm:^1.2.0":
+  version: 1.3.0
+  resolution: "@cfpb/cfpb-icons@npm:1.3.0"
+  checksum: 94bb51449b9f76e1b84fbc1a57b35ee73e2fb804bde95caa049bcb6bff287b3ff62036a3ffeb333fae536e4c3c374a6f8cbaecfcf49289c1a97efd1240aaa8ba
+  languageName: node
+  linkType: hard
+
 "@cfpb/cfpb-layout@npm:^0.35.0":
   version: 0.35.0
   resolution: "@cfpb/cfpb-layout@npm:0.35.0"
@@ -5651,19 +5658,20 @@ __metadata:
 
 "design-system-react@https://github.com/cfpb/design-system-react":
   version: 0.0.0
-  resolution: "design-system-react@https://github.com/cfpb/design-system-react.git#commit=c04021288110c5d15f06b2c33c4a8de27c23eb76"
+  resolution: "design-system-react@https://github.com/cfpb/design-system-react.git#commit=5498b4238491ad3476042a4f4c763e6252bed926"
   dependencies:
     "@cfpb/cfpb-design-system": ^0.35.0
     "@cfpb/cfpb-expandables": ^0.35.0
     "@cfpb/cfpb-forms": ^0.35.0
+    "@cfpb/cfpb-icons": ^1.2.0
     "@tanstack/react-query": 4.13.5
     classnames: ^2.3.2
     display-element-css: cfpb/storybook-addon-display-element-css
     react: 18.2.0
     react-dom: 18.2.0
     react-router-dom: 6.3.0
     react-select: ^5.7.2
-  checksum: e3f22b32ccd03b3a80396fd4769dce9cc085fd02d938fb5f6d9e1e1608f1b60d56e40cd3746e3c5b569595ec12417ee743ca431f64de97b5e31d9e794325229e
+  checksum: 605a69a8e0c63a999d2f802a1e05293824b083b757d55a1ffcdbe4f1da51bb1285a67476733abc1acb3ef603b53701a961aa357911e0ba847d64a4527517620a
   languageName: node
   linkType: hard