From b9116d17cc836269d1dd6941e04f12236b027eab Mon Sep 17 00:00:00 2001
From: Matias Lera <62261539+luislera@users.noreply.github.com>
Date: Tue, 16 Nov 2021 12:43:32 -0300
Subject: [PATCH] Added support for screen reader announcement when the panel
 is collapsed/expanded

---
 .../src/layout/expandCollapse/expandCollapse.scss     |  6 ++++++
 .../layout/expandCollapse/expandCollapse.scss.d.ts    |  1 +
 .../src/layout/expandCollapse/expandCollapse.tsx      | 11 +++++++++++
 3 files changed, 18 insertions(+)

diff --git a/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss b/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss
index d8461a621..6f72857e5 100644
--- a/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss
+++ b/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss
@@ -62,3 +62,9 @@
     height: 100%;
   }
 }
+
+.aria-live-region {
+  position: absolute;
+  top: -9999px;
+  overflow: hidden;
+}
diff --git a/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss.d.ts b/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss.d.ts
index b55a7437e..569cd0f25 100644
--- a/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss.d.ts
+++ b/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.scss.d.ts
@@ -4,3 +4,4 @@ export const expanded: string;
 export const header: string;
 export const accessories: string;
 export const body: string;
+export const ariaLiveRegion: string;
diff --git a/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.tsx b/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.tsx
index 52e0085fe..37fa85df5 100644
--- a/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.tsx
+++ b/packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.tsx
@@ -80,6 +80,7 @@ export class ExpandCollapse extends React.Component<ExpandCollapseProps, ExpandC
           <div className={styles.accessories}>
             {filterChildren(children, child => hmrSafeNameComparison(child.type, ExpandCollapseControls))}
           </div>
+          {this.announcePanelState}
         </div>
         <div className={styles.body}>
           {expanded && filterChildren(children, child => hmrSafeNameComparison(child.type, ExpandCollapseContent))}
@@ -119,4 +120,14 @@ export class ExpandCollapse extends React.Component<ExpandCollapseProps, ExpandC
       this.onToggleExpandedButtonClick();
     }
   };
+
+  private get announcePanelState(): React.ReactNode {
+    const { expanded } = this.state;
+    const { title } = this.props;
+    return (
+      <span id="panelstate" aria-live={'polite'} className={styles.ariaLiveRegion}>
+        {expanded ? `${title} panel expanded` : `${title} panel collapsed`}
+      </span>
+    );
+  }
 }