Chrom + ChromeVox - Accessibility - Live-region- not announcing the updated table
Reported by
hardik.s...@gmail.com,
Jul 4 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36 Steps to reproduce the problem: 1. Go to W3Schools: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide 2. Type this code in it: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function loadTable() { $('.ui-loader .ui-anchor').focus(); $('.ui-data').html($('.container').html()); } </script> <style> .hidden-text, .ui-anchor { border: 0; color: transparent; font-size: 0.01px; height: 0; margin: 0; padding: 0; position: absolute; width: 0; } </style> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <a href="#" onkeydown="javascript:loadTable();">Click me fill data</a> <div class="ui-loader" aria-live="assertive"><!----> <div class="ui-anchor" tabindex="-1">Content loaded</div> <div class="ui-data"> </div> </div> <div class="container hidden-text"> <table> <thead> <tr> <th scope="col"> <div class="ui-sorting ui-desc" tabindex="0" role="button" title="Sort oldest first" aria-label="Col1: sort oldest first.">Col1</div> </th> <th scope="col"> <div class="ui-sorting" tabindex="0" role="button" title="Sort in reverse alphabetical order." aria-label="Heading: sort in reverse alphabetical order.">Heading </div> </th> <th scope="col"> <div class="ui-sorting" tabindex="0" role="button" title="Sort lowest amount first" aria-label="Amount: sort lowest amount first.">Amount </div> </th> <th scope="col"> <div class="ui-sorting" tabindex="0" role="button" title="Sort lowest amount first" aria-label="Amount2: sort lowest amount first.">Amount2 </div> </th> <th scope="col">Running Amount </th> </tr> </thead> <tbody> <tr> <td>Row1</td> <td>A</td> <td>$3.50</td> <td><!----></td> <td> $-41.68 </td> </tr> <tr> <td>Row2</td> <td>B</td> <td>$3.50</td> <td><!----></td> <td> $-38.68 </td> </tr> </tbody> </table> </div> </body> </html> 3. Try hitting the link using enter key, the table works fine and is loaded in the ui-data div. What is the expected behavior? As there is aria-live="assertive" on the parent div, it should announce the table details once the table is loaded in ui-data. Also, the focus should be transferred from link to the ui-anchor. What went wrong? 1. The focus remains on the link after hitting enter. 2. The table details gets filled up but the chromeVox do not announce the modified data within aria-live=assertive. Note: The focus works fine when the chromevox is turned off. Did this work before? N/A Chrome version: 59.0.3071.109 Channel: stable OS Version: OS X 10.12.5 Flash Version: Same issue on Chrome + ChromeVox on Windows machine and even tried on Canary build - 61.0.3148.0 and same issue there as well.
,
Jul 6 2017
ellyjones@ - can you take a peek?
,
Jul 7 2017
If this is also present with Chrome + Chromevox on Windows, this isn't a Mac issue, so I'm going to kick this over to blink a11y folks. +cc dmazzoni@ and dtseng@
,
Jul 27 2017
,
Aug 9 2017
Appears to be working correctly now. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by nyerramilli@chromium.org
, Jul 5 2017