From 1d5a93c5bfa8ead8428895e3c47f50c791497c1a Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Wed, 30 Oct 2024 17:04:30 +0100
Subject: [PATCH] fix(ui-buttons): button text changes now announced by
 screenreaders

Closes: INSTUI-4290, INSTUI-4312
---
 packages/ui-buttons/src/BaseButton/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/ui-buttons/src/BaseButton/index.tsx b/packages/ui-buttons/src/BaseButton/index.tsx
index aa684c093a..d0e4803fdf 100644
--- a/packages/ui-buttons/src/BaseButton/index.tsx
+++ b/packages/ui-buttons/src/BaseButton/index.tsx
@@ -76,6 +76,8 @@ class BaseButton extends Component<BaseButtonProps> {
     cursor: 'pointer'
   } as const
 
+  readChangingButtonText: 'off' | 'polite' = 'off'
+
   ref: Element | null = null
 
   componentDidMount() {
@@ -158,6 +160,8 @@ class BaseButton extends Component<BaseButtonProps> {
   handleClick = (event: React.MouseEvent<ViewProps & Element>) => {
     const { onClick } = this.props
     const { interaction } = this
+    //makes sure screenreader reads button text when the text changes
+    this.readChangingButtonText = 'polite'
 
     if (interaction !== 'enabled') {
       event.preventDefault()
@@ -281,7 +285,9 @@ class BaseButton extends Component<BaseButtonProps> {
         disabled={isDisabled || isReadOnly}
         css={isEnabled ? styles?.baseButton : null}
       >
-        <span css={styles?.content}>{this.renderChildren()}</span>
+        <span aria-live={this.readChangingButtonText} css={styles?.content}>
+          {this.renderChildren()}
+        </span>
       </View>
     )
   }