From 69d321f17caab792ba956f1ce4061d5c536f93e3 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 17 Oct 2022 10:20:49 -0400 Subject: [PATCH 1/4] feat(MultipleFileUpload): add aria live region to internal Progress --- .../MultipleFileUploadStatusItem.tsx | 10 +++++ .../MultipleFileUploadStatusItem.test.tsx | 3 +- ...MultipleFileUploadStatusItem.test.tsx.snap | 38 ++++++++++++++++++- 3 files changed, 49 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index d06871ffd97..a610cd038fd 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)} + {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage} + {!progressAriaLiveMessage && `Progress value is ${progressValue || loadPercentage}%.`} +
{ expect(asFragment()).toMatchSnapshot(); }); - test('renders custom file name/size/icon when passed', () => { + test('renders custom file name/size/icon/ariaLiveMessage when passed', () => { const testFile = new File(['foo'], 'testFile.txt'); const { asFragment } = render( { fileName="testCustomFileName.txt" fileSize={42} progressId="test-progress-id" + progressAriaLiveMessage="test message" /> ); diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap index e3d94183464..2d7d1eb95e0 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap @@ -25,6 +25,12 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
+
+ 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/ariaLiveMessage when passed 1`] = `
  • +
    + test message +
    +
    + Progress value is 42%. +
    +
    + Progress value is 0%. +
    +
    + Progress value is 0%. +
    Date: Wed, 19 Oct 2022 10:13:26 -0400 Subject: [PATCH 2/4] add floor/cap load percentage --- .../MultipleFileUpload/MultipleFileUploadStatusItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index a610cd038fd..b1008df97ac 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx @@ -145,9 +145,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'function' && - progressAriaLiveMessage(loadPercentage)} + progressAriaLiveMessage(+loadPercentage.toFixed(2))} {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage} - {!progressAriaLiveMessage && `Progress value is ${progressValue || loadPercentage}%.`} + {!progressAriaLiveMessage && `Progress value is ${progressValue || Math.floor(loadPercentage)}%.`}
    Date: Fri, 21 Oct 2022 11:09:06 -0400 Subject: [PATCH 3/4] update description --- .../MultipleFileUpload/MultipleFileUploadStatusItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index b1008df97ac..24f437facf9 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx @@ -50,7 +50,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps string); /** Unique identifier for progress. Generated if not specified. */ progressId?: string; From 5d952999491d11315ec6654d5f9662cffd462165 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 24 Oct 2022 10:52:16 -0400 Subject: [PATCH 4/4] update and add tests --- .../MultipleFileUploadStatusItem.test.tsx | 33 ++- ...MultipleFileUploadStatusItem.test.tsx.snap | 236 +++++++++++++++++- 2 files changed, 265 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx index 15815afbbf3..2b7b0a947c6 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx @@ -23,7 +23,7 @@ describe('MultipleFileUploadStatusItem', () => { expect(asFragment()).toMatchSnapshot(); }); - test('renders custom file name/size/icon/ariaLiveMessage when passed', () => { + test('renders custom file name/size/icon/progressAriaLiveMessage when passed', () => { const testFile = new File(['foo'], 'testFile.txt'); const { asFragment } = render( { 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( + } + fileName="testCustomFileName.txt" + fileSize={42} + progressId="test-progress-id" + /> + ); + + expect(asFragment()).toMatchSnapshot(); + }); + test('renders custom progress value/variant when passed', () => { const testFile = new File(['foo'], 'testFile.txt'); const { asFragment } = render( diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap index 2d7d1eb95e0..c1b1a3fce8c 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap @@ -92,7 +92,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = ` aria-disabled="false" aria-label="buttonAriaLabel" class="pf-c-button pf-m-plain" - data-ouia-component-id="OUIA-Generated-Button-plain-6" + data-ouia-component-id="OUIA-Generated-Button-plain-8" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -229,7 +229,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = ` `; -exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/ariaLiveMessage when passed 1`] = ` +exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progressAriaLiveMessage when passed 1`] = `
  • `; +exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMessage when passed 1`] = ` + +
  • +
    + +
    +
    +
    + test message 0 +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    • +     +`; + exports[`MultipleFileUploadStatusItem renders custom progress value/variant when passed 1`] = `
  • `; + +exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage when nothing is passed 1`] = ` + +
  • +
    + +
    +
    +
    + Progress value is 0%. +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    • +     +`;