diff --git a/.changeset/fluffy-pandas-heal.md b/.changeset/fluffy-pandas-heal.md new file mode 100644 index 00000000000..cca7d813d24 --- /dev/null +++ b/.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 diff --git a/packages/react-storage/src/components/FileUploader/utils/displayText.ts b/packages/react-storage/src/components/FileUploader/utils/displayText.ts index 403cb3420e9..cb56f3c25a9 100644 --- a/packages/react-storage/src/components/FileUploader/utils/displayText.ts +++ b/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', diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx index 3baba83b2ba..365f3396b8f 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx +++ b/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} diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx index 9fcb634e10b..72df09a041f 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx +++ b/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 ( - - {getUploadingText(percentage)} - - ); - } - case FileStatus.PAUSED: - return ( - - {getPausedText(percentage)} - - ); - case FileStatus.UPLOADED: - return ( - { + switch (status) { + case FileStatus.UPLOADING: { + return ( + + {getUploadingText(percentage)} + + ); + } + case FileStatus.PAUSED: + return ( + + {getPausedText(percentage)} + + ); + case FileStatus.UPLOADED: + return ( + - - {icons?.success ?? } - - {uploadSuccessfulText} - - ); - case FileStatus.ERROR: - return ( - + + {icons?.success ?? } + + {uploadSuccessfulText} + + ); + case FileStatus.ERROR: + return ( + - - {icons?.error ?? } - - {errorMessage} - - ); - default: - return null; - } + classNameModifier( + ComponentClassName.StorageManagerFileStatus, + 'error' + ) + )} + > + + {icons?.error ?? } + + {errorMessage} + + ); + default: + return null; + } + }; + + return ( + <> + + {getStatusAnnouncementText(status, percentage)} + + {renderStatusMessage()} + + ); }; diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/FileStatusMessage.test.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/FileStatusMessage.test.tsx index b90660460c5..c3b6b66b532 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/FileStatusMessage.test.tsx +++ b/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/FileStatusMessage.test.tsx @@ -16,6 +16,22 @@ const defaultProps: Omit = { 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( + + ); + + const announcement = screen.getByRole('status'); + expect(announcement).toHaveTextContent( + 'File upload status changed: Uploading 50%' + ); + }); + + it('announces paused status with progress', () => { + render(); + + const announcement = screen.getByRole('status'); + expect(announcement).toHaveTextContent( + 'File upload status changed: Paused at 50%' + ); + }); + + it('announces successful upload completion', () => { + render( + + ); + + const announcement = screen.getByRole('status'); + expect(announcement).toHaveTextContent( + 'File upload status changed: Upload completed successfully' + ); + }); + + it('announces error status', () => { + render(); + + const announcement = screen.getByRole('status'); + expect(announcement).toHaveTextContent('File upload status changed: Error'); + }); + + it('announces queued status', () => { + render(); + + const announcement = screen.getByRole('status'); + expect(announcement).toHaveTextContent( + 'File upload status changed: Queued' + ); + }); }); diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileControl.test.tsx.snap b/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileControl.test.tsx.snap index 770a0cc8379..269e0cfd907 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileControl.test.tsx.snap +++ b/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`] = ` + + File upload status changed: Uploading 0% +

@@ -137,6 +143,12 @@ exports[`FileControl renders as expected when uploading is paused 1`] = ` + + File upload status changed: Paused at 0% +

@@ -242,6 +254,12 @@ exports[`FileControl renders thumbnails 1`] = ` + + File upload status changed: Uploading 0% +

@@ -347,6 +365,12 @@ exports[`FileControl should default to showThumbnails being true 1`] = ` + + File upload status changed: Uploading 0% +

diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileList.test.tsx.snap b/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileList.test.tsx.snap index 9915ae68c79..9199ef6c7c8 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileList.test.tsx.snap +++ b/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`] = ` + + File upload status changed: Uploading 0% +

@@ -221,6 +227,12 @@ exports[`FileList renders as expected 1`] = ` + + File upload status changed: Uploading 0% +

@@ -313,6 +325,12 @@ exports[`FileList renders as expected when upload is resumable 1`] = ` + + File upload status changed: Uploading 0% +

diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileStatusMessage.test.tsx.snap b/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileStatusMessage.test.tsx.snap index 676c3ab42b7..df2462dc359 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileStatusMessage.test.tsx.snap +++ b/packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileStatusMessage.test.tsx.snap @@ -2,6 +2,12 @@ exports[`FileStatusMessage renders as expected when file is uploaded 1`] = `

+ + File upload status changed: Upload completed successfully +

@@ -31,6 +37,12 @@ exports[`FileStatusMessage renders as expected when file is uploaded 1`] = ` exports[`FileStatusMessage renders as expected when file is uploading 1`] = `

+ + File upload status changed: Uploading 50% +

@@ -41,6 +53,12 @@ exports[`FileStatusMessage renders as expected when file is uploading 1`] = ` exports[`FileStatusMessage renders as expected when file uploading is paused 1`] = `

+ + File upload status changed: Paused at 50% +

@@ -51,6 +69,12 @@ exports[`FileStatusMessage renders as expected when file uploading is paused 1`] exports[`FileStatusMessage renders as expected when there is an error uploading 1`] = `

+ + File upload status changed: Error +

@@ -80,6 +104,12 @@ exports[`FileStatusMessage renders as expected when there is an error uploading exports[`FileStatusMessage renders custom icons from IconProvider 1`] = `

+ + File upload status changed: Error +

@@ -90,6 +120,12 @@ exports[`FileStatusMessage renders custom icons from IconProvider 1`] = ` Error

+ + File upload status changed: Upload completed successfully +

@@ -103,4 +139,13 @@ exports[`FileStatusMessage renders custom icons from IconProvider 1`] = `

`; -exports[`FileStatusMessage renders nothing when status is queued 1`] = `
`; +exports[`FileStatusMessage renders nothing when status is queued 1`] = ` +
+ + File upload status changed: Queued + +
+`; diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/types.ts b/packages/react-storage/src/components/StorageManager/ui/FileList/types.ts index 265317f32d5..147a117ff10 100644 --- a/packages/react-storage/src/components/StorageManager/ui/FileList/types.ts +++ b/packages/react-storage/src/components/StorageManager/ui/FileList/types.ts @@ -38,7 +38,10 @@ export interface FileControlProps { export interface FileStatusMessageProps extends Pick< StorageManagerDisplayTextDefault, - 'getUploadingText' | 'getPausedText' | 'uploadSuccessfulText' + | 'getUploadingText' + | 'getPausedText' + | 'uploadSuccessfulText' + | 'getStatusAnnouncementText' > { status: FileStatus; errorMessage: string;