diff --git a/src/CharacterAriaLive.js b/src/CharacterAriaLive.js index 782598e0..ffdf8c2b 100644 --- a/src/CharacterAriaLive.js +++ b/src/CharacterAriaLive.js @@ -103,10 +103,12 @@ class CharacterAriaLive extends React.Component { } 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 = ''; } } diff --git a/src/CharacterAriaLive.test.js b/src/CharacterAriaLive.test.js index dba2bc3f..edf730e3 100644 --- a/src/CharacterAriaLive.test.js +++ b/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('');