feat(MultipleFileUpload): add aria live region to internal Progress (#…

…8242) * feat(MultipleFileUpload): add aria live region to internal Progress * add floor/cap load percentage * update description * update and add tests
patternfly · Oct 24, 2022 · dbeb72b · dbeb72b
1 parent 0cf2f93
commit dbeb72b
Show file tree

Hide file tree

Showing 3 changed files with 312 additions and 4 deletions.
diff --git 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<HTMLL
   progressAriaLabel?: string;
   /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Modifies the text announced by assistive technologies when the progress bar updates. */
+  progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
 }
@@ -71,6 +73,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressAriaLabel,
   progressAriaLabelledBy,
   progressId,
+  progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
   ...props
 }: MultipleFileUploadStatusItemProps) => {
@@ -139,6 +142,13 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
       <div className={styles.multipleFileUploadStatusItemMain}>
+        <div className="pf-screen-reader" aria-live="polite">
+          {progressAriaLiveMessage &&
+            typeof progressAriaLiveMessage === 'function' &&
+            progressAriaLiveMessage(+loadPercentage.toFixed(2))}
+          {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage}
+          {!progressAriaLiveMessage && `Progress value is ${progressValue || Math.floor(loadPercentage)}%.`}
+        </div>
         <Progress
           title={title}
           value={progressValue || loadPercentage}

diff --git a/...ct-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx b/...ct-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx
@@ -23,7 +23,39 @@ describe('MultipleFileUploadStatusItem', () => {
     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(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        fileIcon={<FileImageIcon />}
+        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(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        fileIcon={<FileImageIcon />}
+        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(
       <MultipleFileUploadStatusItem