From 4893daad5f36cb06f7d0450a7fefeb053d2e2910 Mon Sep 17 00:00:00 2001
From: SudoSaysWhat <razvan.brinzoi@kaltura.com>
Date: Mon, 9 Dec 2024 13:02:05 +0200
Subject: [PATCH] fix(ADA-1742): When errors pops up they will also be
 announced by SR

---
 src/components/overlay/overlay.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/overlay/overlay.tsx b/src/components/overlay/overlay.tsx
index b5d1dcd1..bb94f99f 100644
--- a/src/components/overlay/overlay.tsx
+++ b/src/components/overlay/overlay.tsx
@@ -174,7 +174,9 @@ class Overlay extends Component<OverlayProps, any> {
    * @memberof Overlay
    */
   render({type, open, ariaLabel, ariaLabelledBy}: any): VNode<any> {
-    const ariaProps = ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {'aria-label': ariaLabel};
+    const role = type === 'error' ? 'alert' : 'dialog';
+    const ariaLive = type === 'error' ? 'polite' : undefined;
+    const ariaProps = ariaLabelledBy ? { 'aria-labelledby': ariaLabelledBy, 'aria-live': ariaLive } : { 'aria-label': ariaLabel, 'aria-live': ariaLive }
     const overlayClass = [style.overlay];
     if (type) {
       const classType = style[type + '-overlay'] ? style[type + '-overlay'] : type + '-overlay';
@@ -187,7 +189,7 @@ class Overlay extends Component<OverlayProps, any> {
     }
 
     return (
-      <div tabIndex={-1} className={overlayClass.join(' ')} role="dialog" onKeyDown={this.onKeyDown} {...ariaProps}>
+      <div tabIndex={-1} className={overlayClass.join(' ')} role={role} onKeyDown={this.onKeyDown} {...ariaProps}>
         <div className={style.overlayContents}>{this.props.children}</div>
         {this.renderCloseButton(this.props)}
       </div>