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 output of multiple live regions #285

Open
JAWS-test opened this issue Sep 4, 2019 · 0 comments
Open

Inconsistent output of multiple live regions #285

JAWS-test opened this issue Sep 4, 2019 · 0 comments
Labels
aria-live-region

Comments

@JAWS-test
Copy link

JAWS-test commented Sep 4, 2019 •
edited
Loading

Summary

Inconsistent output of multiple live regions

  1. Save as HTML file:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>live region</title>
	</head>
	<body>
		<div aria-live=polite id=1></div>
		<div aria-live=polite id=2></div>
		<div aria-live=assertive id=3></div>
		<div aria-live=assertive id=4></div>
		
		<button onClick="document.getElementById('2').innerHTML='region2';document.getElementById('1').innerHTML='region1';">2,1</button>
		<button onClick="document.getElementById('1').innerHTML='region1';document.getElementById('3').innerHTML='region3';">1,3</button>
		<button onClick="document.getElementById('4').innerHTML='region4';document.getElementById('3').innerHTML='region3';">4,3</button>
		<button onClick="document.getElementById('2').innerHTML='region2';document.getElementById('1').innerHTML='region1';document.getElementById('4').innerHTML='region4';document.getElementById('3').innerHTML='region3';">2,1,4,3</button>
	</body>
</html>
  1. Activate all buttons (the page must be reloaded after each activation), repeat this for each button to hear the different order of the output
  2. Replace the 4 div with live region with
		<div aria-live=assertive id=1></div>
		<div aria-live=assertive id=2></div>
		<div role=alert id=3></div>
		<div role=alert id=4></div>
  1. and save the HTML file again
  2. Repeat step 2
  3. Replace the 4 div with live region with
		<div aria-live=polite id=1></div>
		<div aria-live=polite id=2></div>
		<div role=alert id=3></div>
		<div role=alert id=4></div>
  1. and save the HTML file again
  2. Repeat step 2

Expected result

  • Consistent output between browsers
  • Output of the live region in the order of its invocation
  • Output of assertive and alert before polite, where no distinction is made between alert and assertive.
  • Output of all Live Regions

Actual result

  • Different output from browser to browser
  • Different output order (Chrome, Firefox)
  • ok: output of assertive/alert before polite
  • alert prevents the output of further live regions even if these themselves are alerts (Firefox, IE 11)

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 following overview shows the corresponding Live Regions for each button. After that it is shown for each browser which of the live regions was output in which order after activating the buttons.

polite and assertive

  • 2,1: polite, polite
  • 1,3: polite, assertive
  • 4,3: assertive, assertive
  • 2,1,4,3: polite, polite, assertive, assertive
IE:
  • 2,1: 2, 1
  • 1,3: 3, 1
  • 4,3: 4, 3
  • 2,1,4,3: 4, 3, 2, 1
Chrome:
  • 2,1: different order
  • 1,3: 3, 1
  • 4,3: different order
  • 2,1,4,3: different order (first 3 and 4, after 1 and 2)
Firefox:
  • 2,1: different order
  • 1,3: 3, 1
  • 4,3: different order
  • 2,1,4,3: different order (first 3 and 4, after 1 and 2)

assertive and alert

  • 2,1: assertive, assertive
  • 1,3: assertive, alert
  • 4,3: alert, alert
  • 2,1,4,3: assertive, assertive, alert, alert
IE:
  • 2,1: 2, 1
  • 1,3: 3
  • 4,3: 3
  • 2,1,4,3: 3
Chrome:
  • 2,1: different order
  • 1,3: different order
  • 4,3: different order
  • 2,1,4,3: all in different order
Firefox:
  • 2,1: different order
  • 1,3: 3
  • 4,3: 3 or 4 (only one of both)
  • 2,1,4,3: 3 or 4 (only one of both)

polite and alert

  • 2,1: polite, polite
  • 1,3: polite, alert
  • 4,3: alert, alert
  • 2,1,4,3: polite, polite, alert, alert
IE:
  • 2,1: 2, 1
  • 1,3: 3
  • 4,3: 3
  • 2,1,4,3: 3
Chrome:
  • 2,1: different order
  • 1,3: 3, 1
  • 4,3: different order
  • 2,1,4,3: different order (first 3 and 4, after 1 and 2)
Firefox:
  • 2,1: different order
  • 1,3: 3
  • 4,3: 3 or 4 (only one of both)
  • 2,1,4,3: 3 or 4 (only one of both)

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
aria-live-region
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stevefaulkner @JAWS-test