Bug 204734
| Summary: | AX: Screen reader reads out role="log" messages twice in iframes | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | arobinson |
| Component: | Accessibility | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED MOVED | ||
| Severity: | Normal | CC: | cfleizach, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Mac | ||
| OS: | macOS 10.14 | ||
arobinson
- 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
<rdar://problem/57546793>
chris fleizach
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