diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index d06871ffd97..24f437facf9 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx @@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps string); /** Unique identifier for progress. Generated if not specified. */ progressId?: string; } @@ -71,6 +73,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent { @@ -139,6 +142,13 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent
{fileIcon || }
+
+ {progressAriaLiveMessage && + typeof progressAriaLiveMessage === 'function' && + progressAriaLiveMessage(+loadPercentage.toFixed(2))} + {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage} + {!progressAriaLiveMessage && `Progress value is ${progressValue || Math.floor(loadPercentage)}%.`} +
{ expect(asFragment()).toMatchSnapshot(); }); - test('renders custom file name/size/icon when passed', () => { + test('renders custom file name/size/icon/progressAriaLiveMessage when passed', () => { + const testFile = new File(['foo'], 'testFile.txt'); + const { asFragment } = render( + } + fileName="testCustomFileName.txt" + fileSize={42} + progressId="test-progress-id" + progressAriaLiveMessage="test message" + /> + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + test('renders custom function progressAriaLiveMessage when passed', () => { + const testFile = new File(['foo'], 'testFile.txt'); + const { asFragment } = render( + } + fileName="testCustomFileName.txt" + fileSize={42} + progressId="test-progress-id" + progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`} + /> + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + test('rendersdefault progressAriaLiveMessage when nothing is passed', () => { const testFile = new File(['foo'], 'testFile.txt'); const { asFragment } = render( +
+ Progress value is 0%. +
+
+ Progress value is 0%. +
`; -exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when passed 1`] = ` +exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progressAriaLiveMessage when passed 1`] = `
  • +
    + test message +
    `; +exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMessage when passed 1`] = ` + +
  • +
    + +
    +
    +
    + test message 0 +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    • +     +`; + exports[`MultipleFileUploadStatusItem renders custom progress value/variant when passed 1`] = `
  • +
    + Progress value is 42%. +
    +
    + Progress value is 0%. +
    +
    + Progress value is 0%. +
    `; + +exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage when nothing is passed 1`] = ` + +
  • +
    + +
    +
    +
    + Progress value is 0%. +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    • +     +`;