GH-548: Clear existing content when mounting CharacterAriaLive

Author: sbates-idrc

src/CharacterAriaLive.js

@@ -103,10 +103,12 @@ class CharacterAriaLive extends React.Component<CharacterAriaLiveProps, {}> {
     }
 
     componentDidMount() {
-        // Set aria-hidden
         const ariaLiveRegion = document.getElementById(this.props.ariaLiveRegionId);
         if (ariaLiveRegion) {
+            // Set aria-hidden
             ariaLiveRegion.setAttribute('aria-hidden', this.props.ariaHidden.toString());
+            // Clear any existing content (such as when we change language)
+            ariaLiveRegion.textContent = '';
         }
     }
 

src/CharacterAriaLive.test.js

@@ -71,10 +71,21 @@ function getLiveRegionText() {
     return ((document.getElementById('someAriaLiveRegionId'): any): HTMLElement).textContent;
 }
 
+function setLiveRegionText(text: string) {
+    ((document.getElementById('someAriaLiveRegionId'): any): HTMLElement).textContent = text;
+}
+
 function getLiveRegionAriaHidden() {
     return ((document.getElementById('someAriaLiveRegionId'): any): HTMLElement).getAttribute('aria-hidden');
 }
 
+test('Existing live region content is cleared when the component is mounted', () => {
+    setLiveRegionText('content before');
+    expect(getLiveRegionText()).toBe('content before');
+    createMountCharacterAriaLive();
+    expect(getLiveRegionText()).toBe('');
+});
+
 test('The live region is updated when the characterState prop is changed', () => {
     const wrapper = createMountCharacterAriaLive();
     expect(getLiveRegionText()).toBe('');