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

fix(region): allow role=dialog and svg elements outside regions #2586

Merged
merged 2 commits into from
Oct 23, 2020
Merged

fix(region): allow role=dialog and svg elements outside regions #2586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
898f3ea
fix(region): allow role=dialog and svg elements outside regions
straker Oct 22, 2020
3621f89
add docs
straker Oct 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions doc/check-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
- [p-as-heading](#p-as-heading)
- [avoid-inline-spacing](#avoid-inline-spacing)
- [scope-value](#scope-value)
- [region](#region)

## How Checks Work

Expand Down Expand Up @@ -366,3 +367,9 @@ h6:not([role]),
| Option | Default | Description |
| -------- | :-------------------------------------------------------- | :------------------------- |
| `values` | <pre lang=js>['row', 'col', 'rowgroup', 'colgroup']</pre> | List of valid scope values |

### region

| Option | Default | Description |
| --------------- | :--------------------------------------------- | :-------------------------------------------------------------------------- |
| `regionMatcher` | <pre lang=css>dialog, [role=dialog], svg</pre> | A matcher object or CSS selector to allow elements to be treated as regions |
3 changes: 3 additions & 0 deletions lib/checks/navigation/region.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{
"id": "region",
"evaluate": "region-evaluate",
"options": {
"regionMatcher": "dialog, [role=dialog], svg"
},
"metadata": {
"impact": "moderate",
"messages": {
Expand Down
44 changes: 25 additions & 19 deletions test/checks/navigation/region.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
// NOTE: due to how the region check works to return the top-most
// node that is outside the region, all fixture content will need
// a region node (in most cases the <div role="main">Content</div>)
// in order for the check to not give false positives/negatives.
// adding the region node forces the check to not return the #fixture
// as the top-most element but instead use the #target element.
describe('region', function() {
'use strict';

Expand Down Expand Up @@ -160,14 +166,14 @@ describe('region', function() {

it('treats <forms> with aria label as landmarks', function() {
var checkArgs = checkSetup(
'<form id="target" aria-label="foo"><p>This is random content.</p></form>'
'<form id="target" aria-label="foo"><p>This is random content.</p></form><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('treats role=forms with aria label as landmarks', function() {
var checkArgs = checkSetup(
'<div role="form" id="target" aria-label="foo"><p>This is random content.</p></div>'
'<div role="form" id="target" aria-label="foo"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});
Expand All @@ -188,14 +194,6 @@ describe('region', function() {
assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
});

it('treats forms with non empty titles as landmarks', function() {
var checkArgs = checkSetup(
'<form id="target" title="Thing"><p>This is random content.</p></form>'
);

assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('treats forms with empty titles not as landmarks', function() {
var checkArgs = checkSetup(
'<form id="target" title=""><p>This is random content.</p></form><div role="main">Content</div>'
Expand All @@ -206,22 +204,22 @@ describe('region', function() {

it('treats ARIA forms with no label or title as landmarks', function() {
var checkArgs = checkSetup(
'<div role="form" id="target"><p>This is random content.</p></div>'
'<div role="form" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);

assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('allows content in aria-live=assertive', function() {
var checkArgs = checkSetup(
'<div aria-live="assertive" id="target"><p>This is random content.</p></div>'
'<div aria-live="assertive" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('allows content in aria-live=polite', function() {
var checkArgs = checkSetup(
'<div aria-live="polite" id="target"><p>This is random content.</p></div>'
'<div aria-live="polite" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});
Expand All @@ -235,42 +233,50 @@ describe('region', function() {

it('allows content in aria-live=assertive with explicit role set', function() {
var checkArgs = checkSetup(
'<div aria-live="assertive" role="alert" id="target"><p>This is random content.</p></div>'
'<div aria-live="assertive" role="alert" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('allows content in aria-live=polite with explicit role set', function() {
var checkArgs = checkSetup(
'<div aria-live="polite" role="status" id="target"><p>This is random content.</p></div>'
'<div aria-live="polite" role="status" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('allows content in implicit aria-live role alert', function() {
var checkArgs = checkSetup(
'<div role="alert" id="target"><p>This is random content.</p></div>'
'<div role="alert" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('allows content in implicit aria-live role log', function() {
var checkArgs = checkSetup(
'<div role="log" id="target"><p>This is random content.</p></div>'
'<div role="log" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('allows content in implicit aria-live role status', function() {
var checkArgs = checkSetup(
'<div role="status" id="target"><p>This is random content.</p></div>'
'<div role="status" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);
assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('treats role=dialog elements as regions', function() {
var checkArgs = checkSetup(
'<div role="dialog" id="target"><p>This is random content.</p></div>'
'<div role="dialog" id="target"><p>This is random content.</p></div><div role="main">Content</div>'
);

assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
});

it('treats svg elements as regions', function() {
var checkArgs = checkSetup(
'<svg id="target"></svg><div role="main">Content</div>'
);

assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
Expand Down