From 3180a02a937e50437f58e2dbcd055845498a33d1 Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Tue, 19 Nov 2024 15:51:30 +0100
Subject: [PATCH] docs(ui-motion,ui-toggle-details): update Transition and
 ToggleDetail examples to make screenreaders announce button text changes

Closes: INSTUI-4290, INSTUI-4312, INSTUI-4295
---
 packages/ui-motion/src/Transition/README.md            | 6 +++---
 packages/ui-toggle-details/src/ToggleDetails/README.md | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/ui-motion/src/Transition/README.md b/packages/ui-motion/src/Transition/README.md
index a1973b8207..a9ba8e28eb 100644
--- a/packages/ui-motion/src/Transition/README.md
+++ b/packages/ui-motion/src/Transition/README.md
@@ -30,7 +30,7 @@ class Example extends React.Component {
       <div>
         <div>
           <Button margin="small 0" size="small" onClick={this.handleButtonClick}>
-            Fade {this.state.in ? 'Out' : 'In'}
+            <div aria-live="polite">Fade {this.state.in ? 'Out' : 'In'}</div>
           </Button>
         </div>
         <Transition
@@ -75,7 +75,7 @@ class Example extends React.Component {
       <div>
         <div>
           <Button margin="small 0" size="small" onClick={this.handleButtonClick}>
-            {this.state.in ? 'Collapse' : 'Expand'}
+            <div aria-live="polite">{this.state.in ? 'Collapse' : 'Expand'}</div>
           </Button>
         </div>
         <Transition
@@ -161,7 +161,7 @@ class Example extends React.Component {
             {directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
           </RadioInputGroup>
           <Button size="small" margin="medium none small" onClick={this.handleButtonClick}>
-            Slide {this.state.in ? 'Out' : 'In'}
+            <div aria-live="polite">Slide {this.state.in ? 'Out' : 'In'}</div>
           </Button>
         </div>
         <div style={{
diff --git a/packages/ui-toggle-details/src/ToggleDetails/README.md b/packages/ui-toggle-details/src/ToggleDetails/README.md
index 622b4ac526..a2ce407b7c 100644
--- a/packages/ui-toggle-details/src/ToggleDetails/README.md
+++ b/packages/ui-toggle-details/src/ToggleDetails/README.md
@@ -34,7 +34,9 @@ ToggleDetails can be controlled:
       return (
         <div>
           <Button onClick={this.handleToggle}>
-            This Button {this.state.expanded ? 'Collapses' : 'Expands'}
+            <div aria-live="polite">
+              This Button {this.state.expanded ? 'Collapses' : 'Expands'}
+            </div>
           </Button>
           <br />
           <br />
@@ -69,7 +71,9 @@ ToggleDetails can be controlled:
     return (
       <div>
         <Button onClick={handleToggle}>
-          This Button {expanded ? 'Collapses' : 'Expands'}
+          <div aria-live="polite">
+            This Button {expanded ? 'Collapses' : 'Expands'}
+          </div>
         </Button>
         <br />
         <br />