Skip to content

Commit f8f2cd1

Browse files
committed
feat(MultipleFileUpload): add aria live region to internal Progress
1 parent b0280dc commit f8f2cd1

File tree

3 files changed

+49
-2
lines changed

3 files changed

+49
-2
lines changed

packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
5050
progressAriaLabel?: string;
5151
/** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
5252
progressAriaLabelledBy?: string;
53+
/** Adds an accessible aria live region to indicate updates to the progress bar. */
54+
progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
5355
/** Unique identifier for progress. Generated if not specified. */
5456
progressId?: string;
5557
}
@@ -71,6 +73,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
7173
progressAriaLabel,
7274
progressAriaLabelledBy,
7375
progressId,
76+
progressAriaLiveMessage,
7477
buttonAriaLabel = 'Remove from list',
7578
...props
7679
}: MultipleFileUploadStatusItemProps) => {
@@ -139,6 +142,13 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
139142
<li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
140143
<div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
141144
<div className={styles.multipleFileUploadStatusItemMain}>
145+
<div className="pf-screen-reader" aria-live="polite">
146+
{progressAriaLiveMessage &&
147+
typeof progressAriaLiveMessage === 'function' &&
148+
progressAriaLiveMessage(loadPercentage)}
149+
{progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage}
150+
{!progressAriaLiveMessage && `Progress value is ${progressValue || loadPercentage}%.`}
151+
</div>
142152
<Progress
143153
title={title}
144154
value={progressValue || loadPercentage}

packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('MultipleFileUploadStatusItem', () => {
2323
expect(asFragment()).toMatchSnapshot();
2424
});
2525

26-
test('renders custom file name/size/icon when passed', () => {
26+
test('renders custom file name/size/icon/ariaLiveMessage when passed', () => {
2727
const testFile = new File(['foo'], 'testFile.txt');
2828
const { asFragment } = render(
2929
<MultipleFileUploadStatusItem
@@ -32,6 +32,7 @@ describe('MultipleFileUploadStatusItem', () => {
3232
fileName="testCustomFileName.txt"
3333
fileSize={42}
3434
progressId="test-progress-id"
35+
progressAriaLiveMessage="test message"
3536
/>
3637
);
3738

packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
2525
<div
2626
class="pf-c-multiple-file-upload__status-item-main"
2727
>
28+
<div
29+
aria-live="polite"
30+
class="pf-screen-reader"
31+
>
32+
Progress value is 0%.
33+
</div>
2834
<div
2935
class="pf-c-progress"
3036
id="test-progress-id"
@@ -135,6 +141,12 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
135141
<div
136142
class="pf-c-multiple-file-upload__status-item-main"
137143
>
144+
<div
145+
aria-live="polite"
146+
class="pf-screen-reader"
147+
>
148+
Progress value is 0%.
149+
</div>
138150
<div
139151
class="pf-c-progress"
140152
id="test-progress-id"
@@ -217,7 +229,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
217229
</DocumentFragment>
218230
`;
219231

220-
exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when passed 1`] = `
232+
exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/ariaLiveMessage when passed 1`] = `
221233
<DocumentFragment>
222234
<li
223235
class="pf-c-multiple-file-upload__status-item"
@@ -242,6 +254,12 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when pa
242254
<div
243255
class="pf-c-multiple-file-upload__status-item-main"
244256
>
257+
<div
258+
aria-live="polite"
259+
class="pf-screen-reader"
260+
>
261+
test message
262+
</div>
245263
<div
246264
class="pf-c-progress"
247265
id="test-progress-id"
@@ -351,6 +369,12 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
351369
<div
352370
class="pf-c-multiple-file-upload__status-item-main"
353371
>
372+
<div
373+
aria-live="polite"
374+
class="pf-screen-reader"
375+
>
376+
Progress value is 42%.
377+
</div>
354378
<div
355379
class="pf-c-progress pf-m-warning"
356380
id="test-progress-id"
@@ -477,6 +501,12 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
477501
<div
478502
class="pf-c-multiple-file-upload__status-item-main"
479503
>
504+
<div
505+
aria-live="polite"
506+
class="pf-screen-reader"
507+
>
508+
Progress value is 0%.
509+
</div>
480510
<div
481511
class="pf-c-progress"
482512
id="test-progress-id"
@@ -586,6 +616,12 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
586616
<div
587617
class="pf-c-multiple-file-upload__status-item-main"
588618
>
619+
<div
620+
aria-live="polite"
621+
class="pf-screen-reader"
622+
>
623+
Progress value is 0%.
624+
</div>
589625
<div
590626
class="pf-c-progress"
591627
id="test-progress-id"

0 commit comments

Comments
 (0)