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

badAriaAttribute errors for ids containing colons in aria-labeledby, aria-controls etc. #12

Open
brennanyoung opened this issue Sep 30, 2021 · 1 comment
Open

badAriaAttribute errors for ids containing colons in aria-labeledby, aria-controls etc. #12

brennanyoung opened this issue Sep 30, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@brennanyoung
Copy link

Summary

When I run ARC Toolkit, using the Send DOM to ARIA Checker feature, I am getting badAriaAtrribute errors for ids containing colons in aria-labeledby, aria-controls etc.

Expected result

The HTML spec is very liberal about ids - they must contain at least one non-whitespace character, and must be unique. "in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.", therefore, ARC Toolkit (or the ARIA Checker it uses) should accept ids that contain colons, or indeed any other punctuation character.

Actual result

Here's some example output for this snippet of code

	<div id="dialog" role="dialog" hidden aria-labeledby="dialog:heading">
		<h2 id="dialog:heading">This is the open dialog</h2>
		<p>The dialog HTML element represents a dialog box.</p>
		<button id="close">Close</button>
	</div>

aria-labeledby=dialog:headingtag: DIV[dialog]
badAriaAttribute
Error: invalid aria state or property specified
WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (A)
Recommend: use a valid aria property or state name

Test Case

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test case for ids containing colons, referred to by ARIA attributes</title>

<style type="text/css" media="screen">
/* useful boilerplate stuff */
* {
    box-sizing:border-box;
}
html {
    background:gray;
}
body {
    background:white;
    font-family:sans-serif;
}
main[role='main'] {
    max-width: 38rem;
    padding: 1.5rem;
    margin: auto;
    background:silver;
}

div[role='dialog'] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 36rem;
    padding: 1.5rem;
    margin: auto;
    background:lightblue;
	border:1px solid black;
}

</style>

</head>

<body>
<main role="main">
	<h1>Test case</h1>
	<p>...for ids containing colons, referred to by ARIA attributes</p>
	<p>The dialog element has aria-labeledby pointing at the id of the heading within. This contains a colon character, which should be a valid id value.</p>
	<button id="b">Open Dialog</button>
	<div id="dialog" role="dialog" hidden aria-labeledby="dialog:heading">
		<h2 id="dialog:heading" tabindex="-1">This is the open dialog</h2>
		<p>The dialog HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.</p>
		<button id="close">Close</button>
	</div>
</main>
<script>
    
window.onload = function() {
	var b = document.getElementById("b");
	var d = document.getElementById("dialog");
	var c = document.getElementById("close");
	var h = document.getElementById("dialog:heading");
	c.onclick = function() {
		d.setAttribute("hidden", "");
	};
	//
	b.onclick = function () {
		d.removeAttribute("hidden");
		h.focus();
	};
	d.onkeydown = function (e) {
		if (e.keyCode === 27) { // ESC key
			d.setAttribute("hidden", "");
		}
	};
}
</script>
</body>
</html>

Additional Information

ARC Toolkit version

4.3.2.1

Operating System and version

Windows 10

Browser and version:

Chrome Version 94.0.4606.61 (Official Build) (64-bit)
@brennanyoung brennanyoung added the bug Something isn't working label Sep 30, 2021
@brennanyoung brennanyoung changed the title badAriaAtrribute errors for ids containing colons in aria-labeledby, aria-controls etc. badAriaAttribute errors for ids containing colons in aria-labeledby, aria-controls etc. Sep 30, 2021
@brennanyoung
Copy link
Author

There are (of course) caveats about using Ids containing non-alphanumerical characters when using CSS selectors, but these are still valid - they just need to be escaped properly. Also, not everybody uses CSS selectors. It is not unusual to use style attributes exclusively.

If ARC should do anything at all about these cases, a warning is more than enough. Preferably it should be suppressible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@brennanyoung