-
Notifications
You must be signed in to change notification settings - Fork 750
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.
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
feat: Add aria-dialog-name #2609
Merged
Merged
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
e235e90
feat: Add aria-dialog-name
eps1lon ec69185
fix: no self closing and add heading ids
eps1lon c81d26f
Merge remote-tracking branch 'upstream/develop' into feat/aria-dialog…
eps1lon 8d8d14e
Remove implicit dialogs
eps1lon 66bfc79
Include <dialog> in tests
eps1lon 4a8e597
Use best-practice instead
eps1lon File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"id": "aria-dialog-name", | ||
"selector": "[role=\"dialog\"], [role=\"alertdialog\"]", | ||
"matches": "no-naming-method-matches", | ||
"tags": ["cat.aria", "wcag2a", "wcag412"], | ||
"metadata": { | ||
"description": "Ensures every ARIA dialog and alertdialog node has an accessible name", | ||
"help": "ARIA dialog and alertdialog nodes must have an accessible name" | ||
}, | ||
"all": [], | ||
"any": ["aria-label", "aria-labelledby", "non-empty-title"], | ||
"none": [] | ||
} |
24 changes: 24 additions & 0 deletions
24
test/integration/rules/aria-dialog-name/aria-dialog-name.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<!-- PASS --> | ||
<div id="pass1" role="dialog" aria-label="Cookies"></div> | ||
<div id="pass2" role="dialog" title="Cookies"></div> | ||
<div id="pass3" role="dialog" aria-labelledby="dialog-div-heading"> | ||
<h2 id="dialog-div-heading">Cookies</h2> | ||
</div> | ||
<dialog id="pass4" open role="alertdialog" aria-label="Cookies"></dialog> | ||
<dialog id="pass5" open role="alertdialog" title="Cookies"></dialog> | ||
<dialog id="pass6" open role="alertdialog" aria-labelledby="alertdialog-heading"> | ||
<h2 id="alertdialog-heading">Cookies</h2> | ||
</dialog> | ||
<div id="pass7" role="alertdialog" aria-label="Cookies"></div> | ||
<div id="pass8" role="alertdialog" title="Cookies"></div> | ||
<div id="pass9" role="alertdialog" aria-labelledby="alertdialog-div-heading"> | ||
<h2 id="alertdialog-div-heading">Cookies</h2> | ||
</div> | ||
|
||
<!-- FAIL --> | ||
<div id="fail1" role="dialog"></div> | ||
<div id="fail2" role="dialog" aria-labelledby="non-existent"></div> | ||
<dialog id="fail3" open role="alertdialog"></dialog> | ||
<dialog id="fail4" open role="alertdialog" aria-labelledby="non-existent"></dialog> | ||
<div id="fail5" role="alertdialog"></div> | ||
<div id="fail6" role="alertdialog" aria-labelledby="non-existent"></div> |
23 changes: 23 additions & 0 deletions
23
test/integration/rules/aria-dialog-name/aria-dialog-name.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{ | ||
"description": "aria-dialog-name test", | ||
"rule": "aria-dialog-name", | ||
"passes": [ | ||
["#pass1"], | ||
["#pass2"], | ||
["#pass3"], | ||
["#pass4"], | ||
["#pass5"], | ||
["#pass6"], | ||
["#pass7"], | ||
["#pass8"], | ||
["#pass9"] | ||
], | ||
"violations": [ | ||
["#fail1"], | ||
["#fail2"], | ||
["#fail3"], | ||
["#fail4"], | ||
["#fail5"], | ||
["#fail6"] | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
describe('aria-dialog-name', function() { | ||
it('should pass for aria-label', function() { | ||
var node = new axe.SerialVirtualNode({ | ||
nodeName: 'div', | ||
attributes: { | ||
role: 'dialog', | ||
'aria-label': 'foobar' | ||
} | ||
}); | ||
node.parent = null; | ||
|
||
var results = axe.runVirtualRule('aria-dialog-name', node); | ||
|
||
assert.lengthOf(results.passes, 1); | ||
assert.lengthOf(results.violations, 0); | ||
assert.lengthOf(results.incomplete, 0); | ||
}); | ||
|
||
it('should incomplete for aria-labelledby', function() { | ||
var node = new axe.SerialVirtualNode({ | ||
nodeName: 'div', | ||
attributes: { | ||
role: 'dialog', | ||
'aria-labelledby': 'foobar' | ||
} | ||
}); | ||
node.parent = null; | ||
|
||
var results = axe.runVirtualRule('aria-dialog-name', node); | ||
|
||
assert.lengthOf(results.passes, 0); | ||
assert.lengthOf(results.violations, 0); | ||
assert.lengthOf(results.incomplete, 1); | ||
}); | ||
|
||
it('should pass for title', function() { | ||
var node = new axe.SerialVirtualNode({ | ||
nodeName: 'div', | ||
attributes: { | ||
role: 'alertdialog', | ||
title: 'foobar' | ||
} | ||
}); | ||
// children are required since titleText comes after subtree text | ||
// in accessible name calculation | ||
node.children = []; | ||
node.parent = null; | ||
|
||
var results = axe.runVirtualRule('aria-dialog-name', node); | ||
|
||
assert.lengthOf(results.passes, 1); | ||
assert.lengthOf(results.violations, 0); | ||
assert.lengthOf(results.incomplete, 0); | ||
}); | ||
|
||
it('should fail when aria-label contains only whitespace', function() { | ||
var node = new axe.SerialVirtualNode({ | ||
nodeName: 'div', | ||
attributes: { | ||
role: 'alertdialog', | ||
'aria-label': ' \t \n ' | ||
} | ||
}); | ||
node.children = []; | ||
|
||
var results = axe.runVirtualRule('aria-dialog-name', node); | ||
|
||
assert.lengthOf(results.passes, 0); | ||
assert.lengthOf(results.violations, 1); | ||
assert.lengthOf(results.incomplete, 0); | ||
}); | ||
|
||
it('should fail when title is empty', function() { | ||
var node = new axe.SerialVirtualNode({ | ||
nodeName: 'div', | ||
attributes: { | ||
role: 'dialog', | ||
title: '' | ||
} | ||
}); | ||
node.children = []; | ||
|
||
var results = axe.runVirtualRule('aria-dialog-name', node); | ||
|
||
assert.lengthOf(results.passes, 0); | ||
assert.lengthOf(results.violations, 1); | ||
assert.lengthOf(results.incomplete, 0); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good, glad all the tests are passing now. Just one more thing before we can merge. The rule should be a best practice rule and not linked to wcag success criterion
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right, I've been meaning to ask how this is decided. @WilcoFiers added tags in the umbrella issue but some of the newly implemented rules don't match those tags (or just partially):
Specifically here: Why is not naming a dialog not a 4.12 failure and "just" best practice?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is based on our interpretation of WCAG 2. Every rule needs a category tag. That's the "cat.*" stuff. Additionally, a rule is either a WCAG success criterion, which are those "wcag123" type tags or a "best-practice". If it's a wcag tag, it'll also include a level, which is just the level of that success criterion (SC) in WCAG. So SC 1.1.1 has the tag "cat.aria", "wcag2a", "wcag111". This best practice would get "cat.aria", "best-practice".
As for why I made tooltip a WCAG rule and think dialog should be a best practice, that is based on some discussions I've had internally at Deque. A tooltip doesn't make much sense when it is empty, but more importantly a tooltip is a piece of a user interface that users will understand to be a single "thing". Success criterion 4.1.2 applies only to "user interface components". It's a little more difficult to argue that a dialog is a user interface component, since it is just a region of the screen with other content in it. User interface components are the smallest things users will understand as its own control. For example a select is a user interface component, but a list of radio buttons is not, each radio button would be though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can see how this makes sense.
Slightly going off-topic here: why does a
tree
not fall under "user interface components"? It was was scratched due toaria-structure-name
being scratched but I would consider this more of a widget and not just some region. Happy to continue this in #2421 (comment)