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

Author: ToMESSKa

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={{

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 />