I have a live region on my page. The whole page is in dutch (lang="nl" on <html> is applied), and for most text, it all works fine. However, if I use a live region with aria-live, the text is announced in the system language, even if I put lang="nl" on the live region itself.
Is this a bug in VoiceOver? Or do I do something wrong?
I made a codepen to demonstrate: https://codepen.io/petergoes/pen/LYbagMw
The code:
<div lang="nl">
<span id="output" aria-live="polite"></span>
</div>
<button id="fill-en">Add English text</button>
<button id="fill-nl">Add Dutch text</button>
const enText = "This is some text in English"
const nlText = "Dit is wat tekst in het Nederlands"
const $enButton = document.querySelector('#fill-en')
const $nlButton = document.querySelector('#fill-nl')
const $output = document.querySelector('#output')
$enButton.addEventListener('click', () => {
$output.lang = 'en'
$output.innerText = enText
})
$nlButton.addEventListener('click', () => {
$output.lang = 'nl'
$output.innerText = nlText
})
