fix(react-storage): upload status not annouced to AT users

.changeset/fluffy-pandas-heal.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+fix(react-storage): upload status not annouced to AT users

packages/react-storage/src/components/FileUploader/utils/displayText.ts

@@ -1,4 +1,5 @@
 import { DisplayTextTemplate } from '@aws-amplify/ui';
+import { FileStatus } from '../types';
 
 export type FileUploaderDisplayText = DisplayTextTemplate<{
   getFilesUploadedText?: (count: number) => string;
@@ -9,6 +10,10 @@ export type FileUploaderDisplayText = DisplayTextTemplate<{
   getUploadButtonText?: (count: number) => string;
   getMaxFilesErrorText?: (count: number) => string;
   getErrorText?: (message: string) => string;
+  getStatusAnnouncementText?: (
+    status: FileStatus,
+    percentage?: number
+  ) => string;
   doneButtonText?: string;
   clearAllButtonText?: string;
   extensionNotAllowedText?: string;
@@ -49,6 +54,22 @@ export const defaultFileUploaderDisplayText: FileUploaderDisplayTextDefault = {
   getErrorText(message: string): string {
     return message;
   },
+  getStatusAnnouncementText(status: FileStatus, percentage?: number): string {
+    switch (status) {
+      case FileStatus.UPLOADING:
+        return `File upload status changed: Uploading ${percentage}%`;
+      case FileStatus.PAUSED:
+        return `File upload status changed: Paused at ${percentage}%`;
+      case FileStatus.UPLOADED:
+        return `File upload status changed: Upload completed successfully`;
+      case FileStatus.ERROR:
+        return `File upload status changed: Error`;
+      case FileStatus.QUEUED:
+        return `File upload status changed: Queued`;
+      default:
+        return '';
+    }
+  },
   doneButtonText: 'Done',
   clearAllButtonText: 'Clear all',
   extensionNotAllowedText: 'Extension not allowed',

packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx

@@ -30,6 +30,7 @@ export function FileControl({
   const {
     getPausedText,
     getUploadingText,
+    getStatusAnnouncementText,
     uploadSuccessfulText,
     pauseButtonText,
     resumeButtonText,
@@ -76,6 +77,7 @@ export function FileControl({
         uploadSuccessfulText={uploadSuccessfulText}
         getUploadingText={getUploadingText}
         getPausedText={getPausedText}
+        getStatusAnnouncementText={getStatusAnnouncementText}
         status={status}
         errorMessage={errorMessage}
         percentage={progress}

packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { classNames } from '@aws-amplify/ui';
 
 import { ComponentClassName } from '@aws-amplify/ui';
-import { Text, View } from '@aws-amplify/ui-react';
+import { Text, View, VisuallyHidden } from '@aws-amplify/ui-react';
 import { IconCheck, IconError, useIcons } from '@aws-amplify/ui-react/internal';
 import { classNameModifier } from '@aws-amplify/ui';
 import { FileStatus } from '../../../FileUploader/types';
@@ -12,60 +12,73 @@ export const FileStatusMessage = ({
   errorMessage,
   getPausedText,
   getUploadingText,
+  getStatusAnnouncementText,
   percentage,
   status,
   uploadSuccessfulText,
 }: FileStatusMessageProps): React.JSX.Element | null => {
   const icons = useIcons('storageManager');
-  switch (status) {
-    case FileStatus.UPLOADING: {
-      return (
-        <Text className={ComponentClassName.StorageManagerFileStatus}>
-          {getUploadingText(percentage)}
-        </Text>
-      );
-    }
-    case FileStatus.PAUSED:
-      return (
-        <Text className={ComponentClassName.StorageManagerFileStatus}>
-          {getPausedText(percentage)}
-        </Text>
-      );
-    case FileStatus.UPLOADED:
-      return (
-        <Text
-          className={classNames(
-            ComponentClassName.StorageManagerFileStatus,
-            classNameModifier(
+
+  const renderStatusMessage = () => {
+    switch (status) {
+      case FileStatus.UPLOADING: {
+        return (
+          <Text className={ComponentClassName.StorageManagerFileStatus}>
+            {getUploadingText(percentage)}
+          </Text>
+        );
+      }
+      case FileStatus.PAUSED:
+        return (
+          <Text className={ComponentClassName.StorageManagerFileStatus}>
+            {getPausedText(percentage)}
+          </Text>
+        );
+      case FileStatus.UPLOADED:
+        return (
+          <Text
+            className={classNames(
               ComponentClassName.StorageManagerFileStatus,
-              'success'
-            )
-          )}
-        >
-          <View as="span" fontSize="xl">
-            {icons?.success ?? <IconCheck />}
-          </View>
-          {uploadSuccessfulText}
-        </Text>
-      );
-    case FileStatus.ERROR:
-      return (
-        <Text
-          className={classNames(
-            ComponentClassName.StorageManagerFileStatus,
-            classNameModifier(
+              classNameModifier(
+                ComponentClassName.StorageManagerFileStatus,
+                'success'
+              )
+            )}
+          >
+            <View as="span" fontSize="xl">
+              {icons?.success ?? <IconCheck />}
+            </View>
+            {uploadSuccessfulText}
+          </Text>
+        );
+      case FileStatus.ERROR:
+        return (
+          <Text
+            className={classNames(
               ComponentClassName.StorageManagerFileStatus,
-              'error'
-            )
-          )}
-        >
-          <View as="span" fontSize="xl">
-            {icons?.error ?? <IconError />}
-          </View>
-          {errorMessage}
-        </Text>
-      );
-    default:
-      return null;
-  }
+              classNameModifier(
+                ComponentClassName.StorageManagerFileStatus,
+                'error'
+              )
+            )}
+          >
+            <View as="span" fontSize="xl">
+              {icons?.error ?? <IconError />}
+            </View>
+            {errorMessage}
+          </Text>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <VisuallyHidden role="status">
+        {getStatusAnnouncementText(status, percentage)}
+      </VisuallyHidden>
+      {renderStatusMessage()}
+    </>
+  );
 };

packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/FileStatusMessage.test.tsx

@@ -16,6 +16,22 @@ const defaultProps: Omit<FileStatusMessageProps, 'status'> = {
   errorMessage: errorUploading,
   percentage: 50,
   getUploadingText: (percentage: number) => `${uploadingText} ${percentage}%`,
+  getStatusAnnouncementText: (status: FileStatus, percentage?: number) => {
+    switch (status) {
+      case FileStatus.UPLOADING:
+        return `File upload status changed: Uploading ${percentage}%`;
+      case FileStatus.PAUSED:
+        return `File upload status changed: Paused at ${percentage}%`;
+      case FileStatus.UPLOADED:
+        return 'File upload status changed: Upload completed successfully';
+      case FileStatus.ERROR:
+        return 'File upload status changed: Error';
+      case FileStatus.QUEUED:
+        return 'File upload status changed: Queued';
+      default:
+        return '';
+    }
+  },
   getPausedText: () => uploadingPausedText,
   uploadSuccessfulText: uploadSuccessful,
 };
@@ -105,4 +121,51 @@ describe('FileStatusMessage', () => {
     expect(screen.getByTestId('error')).toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
+
+  it('announces upload progress when status is uploading', () => {
+    render(
+      <FileStatusMessage {...defaultProps} status={FileStatus.UPLOADING} />
+    );
+
+    const announcement = screen.getByRole('status');
+    expect(announcement).toHaveTextContent(
+      'File upload status changed: Uploading 50%'
+    );
+  });
+
+  it('announces paused status with progress', () => {
+    render(<FileStatusMessage {...defaultProps} status={FileStatus.PAUSED} />);
+
+    const announcement = screen.getByRole('status');
+    expect(announcement).toHaveTextContent(
+      'File upload status changed: Paused at 50%'
+    );
+  });
+
+  it('announces successful upload completion', () => {
+    render(
+      <FileStatusMessage {...defaultProps} status={FileStatus.UPLOADED} />
+    );
+
+    const announcement = screen.getByRole('status');
+    expect(announcement).toHaveTextContent(
+      'File upload status changed: Upload completed successfully'
+    );
+  });
+
+  it('announces error status', () => {
+    render(<FileStatusMessage {...defaultProps} status={FileStatus.ERROR} />);
+
+    const announcement = screen.getByRole('status');
+    expect(announcement).toHaveTextContent('File upload status changed: Error');
+  });
+
+  it('announces queued status', () => {
+    render(<FileStatusMessage {...defaultProps} status={FileStatus.QUEUED} />);
+
+    const announcement = screen.getByRole('status');
+    expect(announcement).toHaveTextContent(
+      'File upload status changed: Queued'
+    );
+  });
 });

packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileControl.test.tsx.snap

@@ -75,6 +75,12 @@ exports[`FileControl renders as expected when file is uploading 1`] = `
         </span>
       </button>
     </div>
+    <span
+      class="amplify-visually-hidden"
+      role="status"
+    >
+      File upload status changed: Uploading 0%
+    </span>
     <p
       class="amplify-text amplify-storagemanager__file__status"
     >
@@ -137,6 +143,12 @@ exports[`FileControl renders as expected when uploading is paused 1`] = `
         </span>
       </button>
     </div>
+    <span
+      class="amplify-visually-hidden"
+      role="status"
+    >
+      File upload status changed: Paused at 0%
+    </span>
     <p
       class="amplify-text amplify-storagemanager__file__status"
     >
@@ -242,6 +254,12 @@ exports[`FileControl renders thumbnails 1`] = `
         </span>
       </button>
     </div>
+    <span
+      class="amplify-visually-hidden"
+      role="status"
+    >
+      File upload status changed: Uploading 0%
+    </span>
     <p
       class="amplify-text amplify-storagemanager__file__status"
     >
@@ -347,6 +365,12 @@ exports[`FileControl should default to showThumbnails being true 1`] = `
         </span>
       </button>
     </div>
+    <span
+      class="amplify-visually-hidden"
+      role="status"
+    >
+      File upload status changed: Uploading 0%
+    </span>
     <p
       class="amplify-text amplify-storagemanager__file__status"
     >

packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileList.test.tsx.snap

@@ -86,6 +86,12 @@ exports[`FileList renders an alert in case of error 1`] = `
           </span>
         </button>
       </div>
+      <span
+        class="amplify-visually-hidden"
+        role="status"
+      >
+        File upload status changed: Uploading 0%
+      </span>
       <p
         class="amplify-text amplify-storagemanager__file__status"
       >
@@ -221,6 +227,12 @@ exports[`FileList renders as expected 1`] = `
           </span>
         </button>
       </div>
+      <span
+        class="amplify-visually-hidden"
+        role="status"
+      >
+        File upload status changed: Uploading 0%
+      </span>
       <p
         class="amplify-text amplify-storagemanager__file__status"
       >
@@ -313,6 +325,12 @@ exports[`FileList renders as expected when upload is resumable 1`] = `
           </span>
         </button>
       </div>
+      <span
+        class="amplify-visually-hidden"
+        role="status"
+      >
+        File upload status changed: Uploading 0%
+      </span>
       <p
         class="amplify-text amplify-storagemanager__file__status"
       >