From efa4d1c439e7995827e25123f3b956e649d0ba44 Mon Sep 17 00:00:00 2001 From: Simon Bates Date: Thu, 22 May 2025 10:19:09 -0400 Subject: [PATCH] GH-548: Clear existing content when mounting CharacterAriaLive --- src/CharacterAriaLive.js | 4 +++- src/CharacterAriaLive.test.js | 11 +++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) 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('');