[Webkit-unassigned] [Bug 204734] New: AX: Screen reader reads out role="log" messages twice in iframes

Sun Dec 1 15:54:18 PST 2019

https://bugs.webkit.org/show_bug.cgi?id=204734

            Bug ID: 204734
           Summary: AX: Screen reader reads out role="log" messages twice
                    in iframes
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: arobinson at zendesk.com
                CC: webkit-bug-importer at group.apple.com

- 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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191201/d3c942f9/attachment.htm>