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

aria-relevant is not output correctly in Live Region #279

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

aria-relevant is not output correctly in Live Region #279

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

Comments

@JAWS-test
Copy link

JAWS-test commented Sep 2, 2019 •
edited
Loading

Summary

aria-relevant is not output correctly in Live Region

  1. Save as HTML file:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>live region</title>
	</head>
	<body>
		<div role=status aria-live=assertive aria-relevant=text id=1 aria-atomic=false>
			<div>1</div>
			<div id=2>2</div>
			<div>3</div>
		</div>
		<button onClick="document.getElementById('1').textContent='live region 1';">textContent</button>
		<button onClick="document.getElementById('2').childNodes[0].nodeValue='live region 2';">nodeValue</button>
		<button onClick="document.getElementById('1').innerHTML='<h2>live region 3a</h2>';">innerHTML with elementNode</button>
		<button onClick="document.getElementById('2').innerHTML='live region 3b';">innerHTML with textNode</button>
		<button onClick="document.getElementById('1').appendChild(document.createTextNode('live region 4a'));">appendChild with createTextNode</button>
		<button onClick="x=document.createElement('h2');x.appendChild(document.createTextNode('live region 4b'));document.getElementById('1').appendChild(x);">appendChild with createElement</button>
		<button onClick="document.getElementById('1').replaceChild(document.createTextNode('live region 5'),document.getElementById('2'));">replaceChild</button>
		<button onClick="document.getElementById('1').insertBefore(document.createTextNode('live region 6'),document.getElementById('2'));">insertBefore</button>
		<button onClick="document.getElementById('2').remove();">remove</button>
		<button onClick="document.getElementById('1').removeChild(document.getElementById('2'));">removeChild</button>
	</body>
</html>
  1. Navigate to all buttons
  2. Activate each button several times
  3. Reload the page before navigating to the next button
  4. Replace aria-relevant=text with aria-relevant=additions
  5. Save the file
  6. Repeat steps 2 to 5
  7. Replace aria-relevant=additions with aria-relevant=removals
  8. Save the file
  9. Repeat steps 2 to 5

Expected result

Actual result

  • The output depends on the JS method used
  • Chrome, Firefox: No difference at all between aria-relevant=additions and aria-relevant=text
  • Chrome, Firefox: Wrong output at aria-relevant=removals (not the removed but the added elements are output truncated)
  • IE 11: no correct distinction between aria-relevant=additions and aria-relevant=text
  • No consistent output between browsers

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

In the following an overview, at which value of aria-relevant which JavaScript methods lead to an output of the live region:

aria-relevant=text

IE 11
  • textContent
  • innerHTML with textNode
  • appendChild with createTextNode
  • replaceChild
  • insertBefore
Chrome
  • textContent
  • nodeValue
  • innerHTML with elementNode
  • innerHTML with textNode
  • appendChild with createTextNode (The preceding element and the text in the same element are also output)
  • appendChild with createElement
  • replaceChild (the preceding and following elements are output additionally)
  • insertBefore (The preceding and following elements as well as the text in the same element are output additionally)

Note: If several elements are output (as with appendChild, replaceChild and insertBefore) the output is without spaces, i.e. all element nodes are output as a coherent word.

Firefox
  • textContent
  • nodeValue ("live region" without "2")
  • innerHTML with elementNode
  • innerHTML with textNode
  • appendChild with createTextNode (but only at first addition and without the number),
  • appendChild with createElement
  • replaceChild
  • insertBefore (but only at first addition and without the number)

aria-relevant=additions

IE 11
  • innerHTML with elementNode
  • appendChild with createElement
Chrome
  • textContent
  • nodeValue
  • innerHTML with elementNode
  • innerHTML with textNode
  • appendChild with createTextNode (The preceding element and the text in the same element are also output)
  • appendChild with createElement
  • replaceChild (the preceding and following elements are output additionally)
  • insertBefore (The preceding and following elements as well as the text in the same element are output additionally)

Note: If several elements are output (as with appendChild, replaceChild and insertBefore) the output is without spaces, i.e. all element nodes are output as a coherent word.

Firefox
  • textContent
  • nodeValue ("live region" without "2")
  • innerHTML with elementNode
  • innerHTML with textNode
  • appendChild with createTextNode (but only at first addition and without the number),
  • appendChild with createElement
  • replaceChild
  • insertBefore (but only at first addition and without the number)

aria-relevant=removals

IE 11
  • textContent ("Removed Removed 1 Removed Removed 2 Removed Removed 3 Removed")
  • innerHTML with elementNode ("Removed Removed 1 Removed Removed 2 Removed Removed 3 Removed")
  • innerHTML with textNode ("Removed 2")
  • replaceChild ("Removed 2")
  • removeChild ("Removed 2")

Note: remove doesn't work in IE 11

Chrome
  • textContent ("Removed liv")
  • nodeValue ("Removed l")
  • innerHTML with textNode ("Removed l")
  • appendChild with createTextNode ("Removed 3")
  • replaceChild ("Removed 1 li")
  • insertBefore ("Removed 1 l")
  • remove ("Removed 3")
  • removeChild ("Removed 3")
Firefox
  • textContent ("Removed 3 Removed liv")
  • innerHTML with textNode ("Removed l")

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
This was referenced Sep 3, 2019
Open
Open
Open
Open
Open
Open
@JAWS-test JAWS-test mentioned this issue Sep 10, 2019
Open
9 tasks
@JAWS-test JAWS-test mentioned this issue Nov 30, 2023
Open
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