RESOLVED MOVED 204734
AX: Screen reader reads out role="log" messages twice in iframes 
https://bugs.webkit.org/show_bug.cgi?id=204734
Summary AX: Screen reader reads out role="log" messages twice in iframes
arobinson
Reported 2019-12-01 15:54:18 PST
- Overview When using role="log" or aria-live="polite" inside of an iframe, OSX's VoiceOver screen reader sometimes reads out messages more than once. When using aria-live="assertive" VoiceOver correctly only reads the message once for both the log outside and inside the iframe. - Steps to Reproduce 1. Create the two HTML files at the bottom of this bug report locally and open index.html 2. Turn VoiceOver on 3. Type a message into the input box outside of the iframe and hit enter to submit 4. Notice how the screen reader only reads the message once 5. Type a message into the input box inside of the iframe and hit enter to submit 6. Notice how the screen reader reads the message twice For step 6, I have noticed that VoiceOver will sometimes read the first message only once, but the following messages twice. This is not always the case though. So if VoiceOver isn't reading the message twice, try repeating steps 5-6 a few times. Alternatively, a similar example can be found here https://codesandbox.io/s/crimson-wind-krdhu For this one there is only one log. Since CodeSandbox runs everything in an iframe it wasn't possible to show with/without an iframe in this example. - Actual Results VoiceOver reads out the message twice - Expected Results VoiceOver only reads out the new message once - Additional Information This has been tested in Safari 13.0.3 (14608.3.10.10.1) and Chrome 78.0.3904.108 Although this has been reproduced in Safari, Safari has also had other bugs around this, for example, one time it just kept reading out "newline" when submitting a message. I haven't been able to reproduce that one though. // index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <body> <iframe src="./chat.html"></iframe> <div> <div role="log"></div> <form> <input /> <button>Send</button> </form> </div> <script> const chat = document.querySelector('[role="log"]') const input = document.querySelector('input') const send = document.querySelector('button') const form = document.querySelector('form') const submit = () => { const message = document.createElement('div') message.innerText = input.value chat.appendChild(message) input.value = '' } form.addEventListener('submit', e => { e.preventDefault() submit() }) send.addEventListener('click', () => { submit() }) </script> </body> </html> // chat.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <body> <div> <div role="log"></div> <form> <input /> <button>Send</button> </form> </div> <script> const chat = document.querySelector('[role="log"]') const input = document.querySelector('input') const send = document.querySelector('button') const form = document.querySelector('form') const submit = () => { const message = document.createElement('div') message.innerText = input.value chat.appendChild(message) input.value = '' } form.addEventListener('submit', e => { e.preventDefault() submit() }) send.addEventListener('click', () => { submit() }) </script> </body> </html>
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-12-01 15:54:33 PST
<rdar://problem/57546793>
chris fleizach
Comment 2 2019-12-01 22:59:29 PST
This is a VoiceOver bug that has to be solved system side. The radar has been assigned to the correct team, but the fix won't be able to be tracked here. Will try to post an update when this is resolved
Note You need to log in before you can comment on or make changes to this bug.