fix: hide uploads manager progress bar for screen-readers if not visi…

…ble (#3383) * fix: skip uploadsManager in voiceover if not visible * fix: props order * fix: add test for isVisible true
box · Aug 16, 2023 · 5592a48 · 5592a48
1 parent e151c87
commit 5592a48
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/src/elements/content-uploader/OverallUploadsProgressBar.js b/src/elements/content-uploader/OverallUploadsProgressBar.js
@@ -88,6 +88,7 @@ const OverallUploadsProgressBar = ({
 
     return (
         <div
+            aria-hidden={!isVisible}
             className="bcu-overall-progress-bar"
             data-resin-target={isExpanded ? 'uploadcollapse' : 'uploadexpand'}
             onClick={onClick}

diff --git a/src/elements/content-uploader/__tests__/OverallUploadsProgressBar.test.js b/src/elements/content-uploader/__tests__/OverallUploadsProgressBar.test.js
@@ -92,4 +92,20 @@ describe('elements/content-uploader/OverallUploadsProgressBar', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('should be invisible for assistive technologies when hidden', () => {
+        const wrapper = getWrapper({
+            isVisible: false,
+        });
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should be visible for assistive technologies when displayed', () => {
+        const wrapper = getWrapper({
+            isVisible: true,
+        });
+
+        expect(wrapper).toMatchSnapshot();
+    });
 });
diff --git a/src/elements/content-uploader/__tests__/__snapshots__/OverallUploadsProgressBar.test.js.snap b/src/elements/content-uploader/__tests__/__snapshots__/OverallUploadsProgressBar.test.js.snap
@@ -1,7 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`elements/content-uploader/OverallUploadsProgressBar should be invisible for assistive technologies when hidden 1`] = `
+<div
+  aria-hidden={true}
+  className="bcu-overall-progress-bar"
+  data-resin-target="uploadcollapse"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="button"
+  tabIndex="-1"
+>
+  <span
+    className="bcu-upload-status"
+  >
+    <FormattedMessage
+      defaultMessage="Drop files on this page to upload them into this folder."
+      id="be.uploadsManagerUploadPrompt"
+    />
+  </span>
+  <ProgressBar
+    percent={0}
+  />
+  <span
+    className="bcu-uploads-manager-toggle"
+  />
+</div>
+`;
+
+exports[`elements/content-uploader/OverallUploadsProgressBar should be visible for assistive technologies when displayed 1`] = `
+<div
+  aria-hidden={false}
+  className="bcu-overall-progress-bar"
+  data-resin-target="uploadcollapse"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="button"
+  tabIndex="0"
+>
+  <span
+    className="bcu-upload-status"
+  >
+    <FormattedMessage
+      defaultMessage="Drop files on this page to upload them into this folder."
+      id="be.uploadsManagerUploadPrompt"
+    />
+  </span>
+  <ProgressBar
+    percent={0}
+  />
+  <span
+    className="bcu-uploads-manager-toggle"
+  />
+</div>
+`;
+
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when isDragging is true 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -28,6 +83,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when isResumeVisible is false 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -54,6 +110,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when isResumeVisible is true and hasMultipleFailedUploads is false 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -83,6 +140,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when isResumeVisible is true and hasMultipleFailedUploads is true 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -112,6 +170,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when isVisible is false 1`] = `
 <div
+  aria-hidden={true}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -138,6 +197,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when view is VIEW_ERROR 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -164,6 +224,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when view is VIEW_UPLOAD_EMPTY 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -190,6 +251,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when view is VIEW_UPLOAD_IN_PROGRESS 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}
@@ -216,6 +278,7 @@ exports[`elements/content-uploader/OverallUploadsProgressBar should render corre
 
 exports[`elements/content-uploader/OverallUploadsProgressBar should render correctly when view is VIEW_UPLOAD_SUCCESS 1`] = `
 <div
+  aria-hidden={false}
   className="bcu-overall-progress-bar"
   data-resin-target="uploadcollapse"
   onClick={[Function]}