[Accessibility] [Screen Reader] Enable the screen reader to announce …

…when nodes are expanded and collapsed in the JSON tree view (#2299) * Added screen reader announcements when nodes are expanded and collapsed. * Added a new line at the end of the file * Added a comment
microsoft · Oct 27, 2021 · ed0b611 · ed0b611
1 parent 15c552c
commit ed0b611
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 40 deletions.
diff --git a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.scss b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.scss
@@ -23,3 +23,9 @@
     width: calc(100% - 10px);
   }
 }
+
+.aria-region {
+  position: absolute;
+  top: -9999px;
+  overflow: hidden;
+}
diff --git a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.spec.tsx b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.spec.tsx
@@ -67,48 +67,51 @@ const mockData = {
 };
 
 const mockTreeHTMLText = `
-<ul id="rootGroup">
-  <li>
-    <div>
-      <div>▶</div>
-    </div>
-    <label><span>root:</span></label>
-    <span>
-      <span> 
-        <span>{}</span> 2 keys
-        </span></span>
-    <ul id="group1">
-      <li>
-        <div>
-          <div>▶</div>
-        </div>
-        <label><span>membersAdded:</span></label>
-        <span><span><span>[]</span> 1 item</span></span>
-        <ul id="group2">
-          <li>
-            <div role="button" id="actuator">
-              <div>▶</div>
-            </div>
-            <label><span>0:</span></label>
-            <span>
+<div>
+  <ul id="rootGroup">
+    <li>
+      <div>
+        <div>▶</div>
+      </div>
+      <label><span>root:</span></label>
+      <span>
+        <span>
+          <span>{}</span> 2 keys
+          </span></span>
+      <ul id="group1">
+        <li>
+          <div>
+            <div>▶</div>
+          </div>
+          <label><span>membersAdded:</span></label>
+          <span><span><span>[]</span> 1 item</span></span>
+          <ul id="group2">
+            <li>
+              <div role="button" id="actuator">
+                <div>▶</div>
+              </div>
+              <label><span>0:</span></label>
               <span>
-                <span>{}</span> 
-                2 keys
+                <span>
+                  <span>{}</span>
+                  2 keys
+                </span>
               </span>
-            </span>
-            <ul id="group3">
-              <li><label><span>id:</span></label><span>"1"</span></li>
-              <li><label><span>name:</span></label><span>"Bot"</span>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-      <li><label><span>type:</span></label><span>"conversationUpdate"</span>
-      </li>
-    </ul>
-  </li>
-</ul>`;
+              <ul id="group3">
+                <li><label><span>id:</span></label><span>"1"</span></li>
+                <li><label><span>name:</span></label><span>"Bot"</span>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li><label><span>type:</span></label><span>"conversationUpdate"</span>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <div id="ariaRegion" role="region" aria-live="polite" className={styles.ariaRegion}>text content</div>
+</div>`;
 
 let jsonViewerWrapper;
 let jsonViewer;
@@ -117,6 +120,7 @@ describe('The JsonViewer', () => {
   beforeAll(() => {
     jsonViewerWrapper = mount(<CollapsibleJsonViewer data={mockData} themeName={'high-contrast'} />);
     jsonViewer = jsonViewerWrapper.find(CollapsibleJsonViewer).instance();
+    document.body.innerHTML = mockTreeHTMLText;
   });
 
   it('should render with data and a theme', () => {

diff --git a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.tsx b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.tsx
@@ -115,6 +115,7 @@ export class CollapsibleJsonViewer extends Component<CollapsibleJsonViewerProps,
     return (
       <div ref={this.jsonTreeContainerRef} className={styles.collapsibleJsonViewer}>
         <JSONTree data={data} theme={themeNameToViewerThemeName[themeName]} invertTheme={false} {...jsonTreeProps} />
+        <div id="ariaRegion" role="region" aria-live="polite" className={styles.ariaRegion} />
       </div>
     );
   }
@@ -186,6 +187,12 @@ export class CollapsibleJsonViewer extends Component<CollapsibleJsonViewerProps,
     const proposedAriaExpandedValue = !(ul.getAttribute('aria-expanded') === 'true');
     ul.setAttribute('aria-expanded', proposedAriaExpandedValue.toString());
     target.setAttribute('aria-expanded', proposedAriaExpandedValue.toString());
+    // Announce the expanded/collapsed state
+    const ariaRegion = document.getElementById('ariaRegion');
+    const newState = proposedAriaExpandedValue ? 'Node expanded' : 'Node collapsed';
+    // Concatenate the '.' in case it's not present in the textContent property
+    // to announce that the node was expanded or collapsed
+    ariaRegion.textContent = ariaRegion.textContent.indexOf('.') > -1 ? newState : newState.concat('.');
   };
 
   private focusNext(event: KeyboardEvent): void {