search

FreedomScientific / standards-support

Contains documentation for Vispero software support of Web standards
https://freedomscientific.github.io/standards-support/
GNU General Public License v3.0
108 stars 11 forks source link

Invisible contents and nodes in Live Region lead to reading pause (IE 11, Chrome) #270

Open JAWS-test opened 4 years ago

JAWS-test commented 4 years ago

Summary

Invisible contents in Live Region lead to reading pause (IE 11, Chrome)

  1. Save as HTML file: 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>live region</title>
</head>
<body>
    <div role=status id=1></div>
    <button onClick="document.getElementById('1').innerHTML='live region';">regular</button>
    <button onClick="document.getElementById('1').innerHTML='li<!--test -->ve <!--test -->region';">with comment</button>
    <button onClick="document.getElementById('1').innerHTML='li<span hidden>hidden</span>ve <span hidden>hidden</span>region';">with hidden content</button>
</body>
</html>
  2. Activate the buttons one after the other (reload the page in Chrome between the buttons)

Expected result

Invisible content (like HTML comments or hidden content) has no effect on the output of the Live Region (the output does not differ from the output when the content is read with the arrow keys)

Actual result

See also https://github.com/w3c/aria-practices/issues/78 and many other problems with live regions: https://github.com/FreedomScientific/VFO-standards-support/issues?q=live+region

Additional Information

JAWS version and build number

JAWS 2019.1907.42

Operating System and version

Windows 8

Browser and version:

Chrome 76.0.3809.100 Firefox 68.0.2 Internet Explorer 11.0.9600.19431

JAWS-test commented 4 years ago

Also without invisible content, each node is output individually in Chrome and IE 11, even if it would be output as contiguous when read with arrow keys (e.g. spanelements without spaces):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>live region</title>
    </head>
    <body>
        <div role=status id=1></div>
        <button onClick="document.getElementById('1').innerHTML='<span>1</span><span>2</span><span>3</span>';">span</button>
    </body>
</html>