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
instructure · Nov 22, 2024 · 3180a02 · 3180a02
1 parent 35a2e76
commit 3180a02
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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 />