Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inconsistent Live Region output depending on the fade-in method #265

Open
JAWS-test opened this issue Aug 30, 2019 · 0 comments
Open

Inconsistent Live Region output depending on the fade-in method #265

JAWS-test opened this issue Aug 30, 2019 · 0 comments
Assignees
@jhartleytpgi
Labels
aria-live-region

Comments

@JAWS-test
Copy link

JAWS-test commented Aug 30, 2019 •
edited
Loading

Summary

Inconsistent Live Region output depending on the fade-in method

  1. Save as HTML file:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>live region</title>
	</head>
	<body>
		<div role=alert id=1>
			content of live region
		</div>
		<h2>visibility:hidden</h2>
		<button onClick="document.getElementById('1').setAttribute('style','visibility:hidden');">hide</button>
		<button onClick="document.getElementById('1').removeAttribute('style');">show</button>
		<h2>display:none</h2>
		<button onClick="document.getElementById('1').setAttribute('style','display:none');">hide</button>
		<button onClick="document.getElementById('1').removeAttribute('style');">show</button>	
		<h2>aria-hidden</h2>
		<button onClick="document.getElementById('1').setAttribute('aria-hidden','true');">hide</button>
		<button onClick="document.getElementById('1').removeAttribute('aria-hidden');">show</button>	
		<h2>hidden</h2>
		<button onClick="document.getElementById('1').setAttribute('hidden','');">hide</button>
		<button onClick="document.getElementById('1').removeAttribute('hidden');">show</button>	
		
	</body>
</html>
  1. Activate all 8 buttons one after the other
  2. Insert a div inside the live region with id=1, remove id=1 from the outer div
  3. Save the HTML file again
  4. Activate all 8 buttons one after the other

Expected result

  • Live region is output with each of the 4 methods
  • Output should be consistent in all browsers
  • The output is consistent, independent of the method (role=alert or aria-live)
  • The output is consistent, regardless of whether the element itself or a child element is faded in.

Actual result

Different output depending on browser and method

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

The live region is output as follows:

at the element

aria-live=polite
  • Firefox: always except aria-hidden
  • IE 11: never
  • Chrome: never
  • Edge: never
role=alert
  • Firefox: always except aria-hidden
  • IE: never
  • Chrome: always
  • Edge: never

at a child element

aria-live=polite
  • Firefox: always except aria-hidden
  • IE 11: never
  • Chrome: always
  • Edge: never
role=alert
  • Firefox: always except aria-hidden
  • IE 11: never except aria-hidden: with aria-hidden the live region is output 3x when fading out and 3x when fading in
  • Chrome: always
  • Edge: never

Additional Information

JAWS version and build number

JAWS 2019.1907.42

Operating System and version

Windows 10

Browser and version:

Chrome 76.0.3809.132
Firefox ESR 60.8.0
IE 11.1268.16299.0
Edge 16.16299
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jhartleytpgi jhartleytpgi

Labels
aria-live-region
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@stevefaulkner @JAWS-test @jhartleytpgi