Skip to content

Update to ARIA 1.2; fix test failures #696

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

Merged
merged 7 commits into from
Jun 18, 2020
Merged

Update to ARIA 1.2; fix test failures #696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
835b89e
Fix test failures in role-supports-aria-props-test due to ARIA 1.2 up…
jessebeach Jun 12, 2020
74cec6e
Fix test failures in no-noninteractive-element-interactions due to AR…
jessebeach Jun 12, 2020
b1f412a
Fix test failures in role-has-required-aria-props due to ARIA 1.2 upd…
jessebeach Jun 12, 2020
8059f51
Fix test failures raised by the upgrade to ARIA 1.2
jessebeach Jun 17, 2020
f87561d
Merge branch 'master' of github.com:evcohen/eslint-plugin-jsx-a11y in…
jessebeach Jun 17, 2020
121e8a4
Add two test cases found while upgrading to ARIA 1.2
jessebeach Jun 17, 2020
cce838a
Update aria-query to 4.2.0
jessebeach Jun 17, 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
2 changes: 1 addition & 1 deletion __tests__/src/rules/control-has-associated-label-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,6 @@ const alwaysValid = [
{ code: '<div role="presentation" />' },
{ code: '<div role="region" />' },
{ code: '<div role="rowgroup" />' },
{ code: '<div role="scrollbar" />' },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this a breaking change? or would you consider it a bugfix?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ljharb Breaking change in behavior, but not API. This will be a Minor release. Some new violations will probably pop up for folks when they run their linter. Does this sound right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

semver for eslint rules is tricky; “more errors” is definitely at least a minor, but the real question is whether they have a reasonable expectation that the code shouldn’t be warned on. If this code getting a new warning will help them catch a bug instead of surprising them, then that seems nonmajor?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this code getting a new warning will help them catch a bug instead of surprising them, then that seems nonmajor?

Thinking on this more, Authors will most likely be removing overrides put in place because scrollbar wasn't considered an interactive element before now, so putting a click handler on one would have raised a lint warning. That'll be good to note in the release notes.

{ code: '<div role="search" />' },
{ code: '<div role="separator" />' },
{ code: '<div role="status" />' },
Expand Down Expand Up @@ -271,6 +270,7 @@ const neverValid = [
{ code: '<div role="progressbar" />', errors: [expectedError] },
{ code: '<div role="radio" />', errors: [expectedError] },
{ code: '<div role="rowheader" />', errors: [expectedError] },
{ code: '<div role="scrollbar" />', errors: [expectedError] },
{ code: '<div role="searchbox" />', errors: [expectedError] },
{ code: '<div role="slider" />', errors: [expectedError] },
{ code: '<div role="spinbutton" />', errors: [expectedError] },
Expand Down
2 changes: 1 addition & 1 deletion __tests__/src/rules/no-noninteractive-element-interactions-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ const alwaysValid = [
{ code: '<div role="radiogroup" onClick={() => {}} />;' },
{ code: '<div role="row" onClick={() => {}} />;' },
{ code: '<div role="rowheader" onClick={() => {}} />;' },
{ code: '<div role="scrollbar" onClick={() => {}} />;' },
{ code: '<div role="searchbox" onClick={() => {}} />;' },
{ code: '<div role="slider" onClick={() => {}} />;' },
{ code: '<div role="spinbutton" onClick={() => {}} />;' },
Expand Down Expand Up @@ -340,7 +341,6 @@ const neverValid = [
{ code: '<div role="rowgroup" onClick={() => {}} />;', errors: [expectedError] },
{ code: '<div role="search" onClick={() => {}} />;', errors: [expectedError] },
{ code: '<div role="separator" onClick={() => {}} />;', errors: [expectedError] },
{ code: '<div role="scrollbar" onClick={() => {}} />;', errors: [expectedError] },
{ code: '<div role="status" onClick={() => {}} />;', errors: [expectedError] },
{ code: '<div role="table" onClick={() => {}} />;', errors: [expectedError] },
{ code: '<div role="tabpanel" onClick={() => {}} />;', errors: [expectedError] },
Expand Down
35 changes: 8 additions & 27 deletions __tests__/src/rules/role-has-required-aria-props-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,33 +69,6 @@ ruleTester.run('role-has-required-aria-props', rule, {
code: '<div role="slider" aria-valuemax aria-valuemin />',
errors: [errorMessage('slider')],
},
{
code: '<div role="slider" aria-valuemax aria-valuenow />',
errors: [errorMessage('slider')],
},
{
code: '<div role="slider" aria-valuemin aria-valuenow />',
errors: [errorMessage('slider')],
},

// SPINBUTTON
{ code: '<div role="spinbutton" />', errors: [errorMessage('spinbutton')] },
{
code: '<div role="spinbutton" aria-valuemax />',
errors: [errorMessage('spinbutton')],
},
{
code: '<div role="spinbutton" aria-valuemax aria-valuemin />',
errors: [errorMessage('spinbutton')],
},
{
code: '<div role="spinbutton" aria-valuemax aria-valuenow />',
errors: [errorMessage('spinbutton')],
},
{
code: '<div role="spinbutton" aria-valuemin aria-valuenow />',
errors: [errorMessage('spinbutton')],
},

// CHECKBOX
{ code: '<div role="checkbox" />', errors: [errorMessage('checkbox')] },
Expand Down Expand Up @@ -135,5 +108,13 @@ ruleTester.run('role-has-required-aria-props', rule, {
code: '<div role="scrollbar" aria-valuemin aria-valuenow />',
errors: [errorMessage('scrollbar')],
},
{
code: '<div role="heading" />',
errors: [errorMessage('heading')],
},
{
code: '<div role="option" />',
errors: [errorMessage('option')],
},
].map(parserOptionsMapper),
});
178 changes: 140 additions & 38 deletions __tests__/src/rules/role-supports-aria-props-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<a href="#" aria-dropeffect />' },
{ code: '<a href="#" aria-flowto />' },
{ code: '<a href="#" aria-grabbed />' },
{ code: '<a href="#" aria-haspopup />' },
{ code: '<a href="#" aria-hidden />' },
{ code: '<a href="#" aria-invalid />' },
{ code: '<a href="#" aria-label />' },
{ code: '<a href="#" aria-labelledby />' },
{ code: '<a href="#" aria-live />' },
Expand All @@ -107,9 +105,7 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<area href="#" aria-dropeffect />' },
{ code: '<area href="#" aria-flowto />' },
{ code: '<area href="#" aria-grabbed />' },
{ code: '<area href="#" aria-haspopup />' },
{ code: '<area href="#" aria-hidden />' },
{ code: '<area href="#" aria-invalid />' },
{ code: '<area href="#" aria-label />' },
{ code: '<area href="#" aria-labelledby />' },
{ code: '<area href="#" aria-live />' },
Expand All @@ -129,9 +125,7 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<link href="#" aria-dropeffect />' },
{ code: '<link href="#" aria-flowto />' },
{ code: '<link href="#" aria-grabbed />' },
{ code: '<link href="#" aria-haspopup />' },
{ code: '<link href="#" aria-hidden />' },
{ code: '<link href="#" aria-invalid />' },
{ code: '<link href="#" aria-label />' },
{ code: '<link href="#" aria-labelledby />' },
{ code: '<link href="#" aria-live />' },
Expand All @@ -149,7 +143,6 @@ ruleTester.run('role-supports-aria-props', rule, {

// MENU TESTS - implicit role is `toolbar` when `type="toolbar"`
{ code: '<menu type="toolbar" aria-activedescendant />' },
{ code: '<menu type="toolbar" aria-expanded />' },
{ code: '<menu type="toolbar" aria-atomic />' },
{ code: '<menu type="toolbar" aria-busy />' },
{ code: '<menu type="toolbar" aria-controls />' },
Expand All @@ -158,9 +151,7 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<menu type="toolbar" aria-dropeffect />' },
{ code: '<menu type="toolbar" aria-flowto />' },
{ code: '<menu type="toolbar" aria-grabbed />' },
{ code: '<menu type="toolbar" aria-haspopup />' },
{ code: '<menu type="toolbar" aria-hidden />' },
{ code: '<menu type="toolbar" aria-invalid />' },
{ code: '<menu type="toolbar" aria-label />' },
{ code: '<menu type="toolbar" aria-labelledby />' },
{ code: '<menu type="toolbar" aria-live />' },
Expand All @@ -182,7 +173,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<menuitem type="command" aria-grabbed />' },
{ code: '<menuitem type="command" aria-haspopup />' },
{ code: '<menuitem type="command" aria-hidden />' },
{ code: '<menuitem type="command" aria-invalid />' },
{ code: '<menuitem type="command" aria-label />' },
{ code: '<menuitem type="command" aria-labelledby />' },
{ code: '<menuitem type="command" aria-live />' },
Expand Down Expand Up @@ -225,7 +215,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<menuitem type="radio" aria-owns />' },
{ code: '<menuitem type="radio" aria-relevant />' },
{ code: '<menuitem type="radio" aria-posinset />' },
{ code: '<menuitem type="radio" aria-selected />' },
{ code: '<menuitem type="radio" aria-setsize />' },

// these will have global
Expand All @@ -246,7 +235,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<input type="button" aria-grabbed />' },
{ code: '<input type="button" aria-haspopup />' },
{ code: '<input type="button" aria-hidden />' },
{ code: '<input type="button" aria-invalid />' },
{ code: '<input type="button" aria-label />' },
{ code: '<input type="button" aria-labelledby />' },
{ code: '<input type="button" aria-live />' },
Expand All @@ -265,7 +253,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<input type="image" aria-grabbed />' },
{ code: '<input type="image" aria-haspopup />' },
{ code: '<input type="image" aria-hidden />' },
{ code: '<input type="image" aria-invalid />' },
{ code: '<input type="image" aria-label />' },
{ code: '<input type="image" aria-labelledby />' },
{ code: '<input type="image" aria-live />' },
Expand All @@ -284,7 +271,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<input type="reset" aria-grabbed />' },
{ code: '<input type="reset" aria-haspopup />' },
{ code: '<input type="reset" aria-hidden />' },
{ code: '<input type="reset" aria-invalid />' },
{ code: '<input type="reset" aria-label />' },
{ code: '<input type="reset" aria-labelledby />' },
{ code: '<input type="reset" aria-live />' },
Expand All @@ -303,23 +289,21 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<input type="submit" aria-grabbed />' },
{ code: '<input type="submit" aria-haspopup />' },
{ code: '<input type="submit" aria-hidden />' },
{ code: '<input type="submit" aria-invalid />' },
{ code: '<input type="submit" aria-label />' },
{ code: '<input type="submit" aria-labelledby />' },
{ code: '<input type="submit" aria-live />' },
{ code: '<input type="submit" aria-owns />' },
{ code: '<input type="submit" aria-relevant />' },
// when `type="checkbox"`, the implicit role is `checkbox`
{ code: '<input type="checkbox" aria-checked />' },
{ code: '<input type="checkbox" aria-atomic />' },
{ code: '<input type="checkbox" aria-busy />' },
{ code: '<input type="checkbox" aria-checked />' },
{ code: '<input type="checkbox" aria-controls />' },
{ code: '<input type="checkbox" aria-describedby />' },
{ code: '<input type="checkbox" aria-disabled />' },
{ code: '<input type="checkbox" aria-dropeffect />' },
{ code: '<input type="checkbox" aria-flowto />' },
{ code: '<input type="checkbox" aria-grabbed />' },
{ code: '<input type="checkbox" aria-haspopup />' },
{ code: '<input type="checkbox" aria-hidden />' },
{ code: '<input type="checkbox" aria-invalid />' },
{ code: '<input type="checkbox" aria-label />' },
Expand All @@ -328,25 +312,22 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<input type="checkbox" aria-owns />' },
{ code: '<input type="checkbox" aria-relevant />' },
// when `type="radio"`, the implicit role is `radio`
{ code: '<input type="radio" aria-checked />' },
{ code: '<input type="radio" aria-atomic />' },
{ code: '<input type="radio" aria-busy />' },
{ code: '<input type="radio" aria-checked />' },
{ code: '<input type="radio" aria-controls />' },
{ code: '<input type="radio" aria-describedby />' },
{ code: '<input type="radio" aria-disabled />' },
{ code: '<input type="radio" aria-dropeffect />' },
{ code: '<input type="radio" aria-flowto />' },
{ code: '<input type="radio" aria-grabbed />' },
{ code: '<input type="radio" aria-haspopup />' },
{ code: '<input type="radio" aria-hidden />' },
{ code: '<input type="radio" aria-invalid />' },
{ code: '<input type="radio" aria-label />' },
{ code: '<input type="radio" aria-labelledby />' },
{ code: '<input type="radio" aria-live />' },
{ code: '<input type="radio" aria-owns />' },
{ code: '<input type="radio" aria-relevant />' },
{ code: '<input type="radio" aria-posinset />' },
{ code: '<input type="radio" aria-selected />' },
{ code: '<input type="radio" aria-setsize />' },
// when `type="range"`, the implicit role is `slider`
{ code: '<input type="range" aria-valuemax />' },
Expand Down Expand Up @@ -384,14 +365,7 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<h2 role="presentation" aria-level={undefined} />' },

// OTHER TESTS
{ code: '<aside aria-expanded />' },
{ code: '<article aria-expanded />' },
{ code: '<body aria-expanded />' },
{ code: '<button aria-pressed />' },
{ code: '<datalist aria-expanded />' },
{ code: '<details aria-expanded />' },
{ code: '<dialog aria-expanded />' },
{ code: '<dl aria-expanded />' },
{ code: '<form aria-hidden />' },
{ code: '<h1 aria-hidden />' },
{ code: '<h2 aria-hidden />' },
Expand All @@ -401,20 +375,12 @@ ruleTester.run('role-supports-aria-props', rule, {
{ code: '<h6 aria-hidden />' },
{ code: '<hr aria-hidden />' },
{ code: '<li aria-current />' },
{ code: '<li aria-expanded />' },
{ code: '<meter aria-atomic />' },
{ code: '<nav aria-expanded />' },
{ code: '<ol aria-expanded />' },
{ code: '<option aria-atomic />' },
{ code: '<output aria-expanded />' },
{ code: '<progress aria-atomic />' },
{ code: '<section aria-expanded />' },
{ code: '<select aria-expanded />' },
{ code: '<tbody aria-expanded />' },
{ code: '<textarea aria-hidden />' },
{ code: '<tfoot aria-expanded />' },
{ code: '<thead aria-expanded />' },
{ code: '<ul aria-expanded />' },
{ code: '<select aria-expanded />' },
{ code: '<datalist aria-expanded />' },

].concat(validTests).map(parserOptionsMapper),

Expand Down Expand Up @@ -444,5 +410,141 @@ ruleTester.run('role-supports-aria-props', rule, {
code: '<aside aria-checked />',
errors: [errorMessage('aria-checked', 'complementary', 'aside', true)],
},
{
code: '<ul aria-expanded />',
errors: [errorMessage('aria-expanded', 'list', 'ul', true)],
},
{
code: '<details aria-expanded />',
errors: [errorMessage('aria-expanded', 'group', 'details', true)],
},
{
code: '<dialog aria-expanded />',
errors: [errorMessage('aria-expanded', 'dialog', 'dialog', true)],
},
{
code: '<dl aria-expanded />',
errors: [errorMessage('aria-expanded', 'list', 'dl', true)],
},
{
code: '<aside aria-expanded />',
errors: [errorMessage('aria-expanded', 'complementary', 'aside', true)],
},
{
code: '<article aria-expanded />',
errors: [errorMessage('aria-expanded', 'article', 'article', true)],
},
{
code: '<body aria-expanded />',
errors: [errorMessage('aria-expanded', 'document', 'body', true)],
},
{
code: '<li aria-expanded />',
errors: [errorMessage('aria-expanded', 'listitem', 'li', true)],
},
{
code: '<nav aria-expanded />',
errors: [errorMessage('aria-expanded', 'navigation', 'nav', true)],
},
{
code: '<ol aria-expanded />',
errors: [errorMessage('aria-expanded', 'list', 'ol', true)],
},
{
code: '<output aria-expanded />',
errors: [errorMessage('aria-expanded', 'status', 'output', true)],
},
{
code: '<section aria-expanded />',
errors: [errorMessage('aria-expanded', 'region', 'section', true)],
},
{
code: '<tbody aria-expanded />',
errors: [errorMessage('aria-expanded', 'rowgroup', 'tbody', true)],
},
{
code: '<tfoot aria-expanded />',
errors: [errorMessage('aria-expanded', 'rowgroup', 'tfoot', true)],
},
{
code: '<thead aria-expanded />',
errors: [errorMessage('aria-expanded', 'rowgroup', 'thead', true)],
},
{
code: '<input type="radio" aria-invalid />',
errors: [errorMessage('aria-invalid', 'radio', 'input', true)],
},
{
code: '<input type="radio" aria-selected />',
errors: [errorMessage('aria-selected', 'radio', 'input', true)],
},
{
code: '<input type="radio" aria-haspopup />',
errors: [errorMessage('aria-haspopup', 'radio', 'input', true)],
},
{
code: '<input type="checkbox" aria-haspopup />',
errors: [errorMessage('aria-haspopup', 'checkbox', 'input', true)],
},
{
code: '<input type="reset" aria-invalid />',
errors: [errorMessage('aria-invalid', 'button', 'input', true)],
},
{
code: '<input type="submit" aria-invalid />',
errors: [errorMessage('aria-invalid', 'button', 'input', true)],
},
{
code: '<input type="image" aria-invalid />',
errors: [errorMessage('aria-invalid', 'button', 'input', true)],
},
{
code: '<input type="button" aria-invalid />',
errors: [errorMessage('aria-invalid', 'button', 'input', true)],
},
{
code: '<menuitem type="command" aria-invalid />',
errors: [errorMessage('aria-invalid', 'menuitem', 'menuitem', true)],
},
{
code: '<menuitem type="radio" aria-selected />',
errors: [errorMessage('aria-selected', 'menuitemradio', 'menuitem', true)],
},
{
code: '<menu type="toolbar" aria-haspopup />',
errors: [errorMessage('aria-haspopup', 'toolbar', 'menu', true)],
},
{
code: '<menu type="toolbar" aria-invalid />',
errors: [errorMessage('aria-invalid', 'toolbar', 'menu', true)],
},
{
code: '<menu type="toolbar" aria-expanded />',
errors: [errorMessage('aria-expanded', 'toolbar', 'menu', true)],
},
{
code: '<link href="#" aria-invalid />',
errors: [errorMessage('aria-invalid', 'link', 'link', true)],
},
{
code: '<link href="#" aria-haspopup />',
errors: [errorMessage('aria-haspopup', 'link', 'link', true)],
},
{
code: '<area href="#" aria-invalid />',
errors: [errorMessage('aria-invalid', 'link', 'area', true)],
},
{
code: '<area href="#" aria-haspopup />',
errors: [errorMessage('aria-haspopup', 'link', 'area', true)],
},
{
code: '<a href="#" aria-haspopup />',
errors: [errorMessage('aria-haspopup', 'link', 'a', true)],
},
{
code: '<a href="#" aria-invalid />',
errors: [errorMessage('aria-invalid', 'link', 'a', true)],
},
].concat(invalidTests).map(parserOptionsMapper),
});
Loading