Skip to content

Bump aria-query and update to fix tests #448

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

Merged
merged 19 commits into from
Jul 13, 2023
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
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
48 changes: 4 additions & 44 deletions lib/rules/role-supports-aria-props.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,7 @@
// @ts-check
const {aria, elementRoles, roles} = require('aria-query')
const {getProp, getPropValue, propName} = require('jsx-ast-utils')
const {getElementType} = require('../utils/get-element-type')
const ObjectMap = require('../utils/object-map')

// Clean-up `elementRoles` from `aria-query`
const elementRolesMap = new ObjectMap()
for (const [key, value] of elementRoles.entries()) {
// - Remove unused `constraints` key
delete key.constraints
key.attributes = key.attributes?.filter(attribute => !('constraints' in attribute))
// - Remove empty `attributes` key
if (!key.attributes || key.attributes?.length === 0) {
delete key.attributes
}
elementRolesMap.set(key, value)
}
// - Remove insufficiently-disambiguated `menuitem` entry
elementRolesMap.delete({name: 'menuitem'})
// - Disambiguate `menuitem` and `menu` roles by `type`
elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'command'}]}, ['menuitem'])
elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'radio'}]}, ['menuitemradio'])
elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'toolbar'}]}, ['toolbar'])
elementRolesMap.set({name: 'menu', attributes: [{name: 'type', value: 'toolbar'}]}, ['toolbar'])
const {aria, roles} = require('aria-query')
const {getPropValue, propName} = require('jsx-ast-utils')
const {getRole} = require('../utils/get-role')

module.exports = {
meta: {
Expand All @@ -37,27 +16,8 @@ module.exports = {
create(context) {
return {
JSXOpeningElement(node) {
// Assemble a key for looking-up the element’s role in the `elementRolesMap`
Copy link
Contributor Author

@khiga8 khiga8 Jul 11, 2023

Choose a reason for hiding this comment

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

I'm extracting this entire section a new helper called getRole, with tests.

// - Get the element’s name
const key = {name: getElementType(context, node)}
// - Get the element’s disambiguating attributes
for (const prop of ['aria-expanded', 'type', 'size', 'role', 'href', 'multiple', 'scope']) {
// - Only provide `aria-expanded` when it’s required for disambiguation
if (prop === 'aria-expanded' && key.name !== 'summary') continue
const value = getPropValue(getProp(node.attributes, prop))
if (value) {
if (!('attributes' in key)) {
key.attributes = []
}
if (prop === 'href') {
key.attributes.push({name: prop})
} else {
key.attributes.push({name: prop, value})
}
}
}
// Get the element’s explicit or implicit role
const role = getPropValue(getProp(node.attributes, 'role')) ?? elementRolesMap.get(key)?.[0]
const role = getRole(context, node)

// Return early if role could not be determined
if (!role) return
Expand Down
93 changes: 93 additions & 0 deletions lib/utils/get-role.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
const {getProp, getPropValue} = require('jsx-ast-utils')
Copy link
Contributor Author

@khiga8 khiga8 Jul 11, 2023

Choose a reason for hiding this comment

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

I would appreciate @smockle eyes on this! I extracted the code into this helper, and made updates to fix the bug.

const {elementRoles} = require('aria-query')
const {getElementType} = require('./get-element-type')
const ObjectMap = require('./object-map')

// Clean-up `elementRoles` from `aria-query`
const elementRolesMap = new ObjectMap()
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This code is constructing a cleaned up version of elementRoles. Below, we'll be constructing a key and grabbing the value from elementRoles.

for (const [key, value] of elementRoles.entries()) {
// - Remove unused `constraints` key
delete key.constraints
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this line still necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oooh nice catch! It looks like removing this constraints can result in incorrect mappings in some scenarios...

For example, elementRoles includes:

[{"constraints": ["ancestor table element has table role"], "name": "td"}, ["cell"]]
[{"constraints": ["ancestor table element has grid role", "ancestor table element has treegrid role"], "name": "td"}, ["gridcell"]]

If we remove the constraints key, we're left with:

[{"name": "td"}, ["cell"]]
[{"name": "td"}, ["gridcell"]]

Since we cannot always accurately parse out the role of an ancestor in a linter context, I think we'd want to return undefined instead of potentially returning a false positive role.

I will follow-up!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I deleted this line in 8fb6419!

However, there were two scenarios where it seemed appropriate to assume the role despite the constraints defined in aria-query. I opted to hard-code those with a comment on why! You can see the commit for more information.

I've added additional tests in aaca700#diff-a6b7fa0d4a2be411ccfcc6e6db5466c135100a1a045599f5c211bb91c37b839dR180-R190.

// - Remove empty `attributes` key
if (!key.attributes || key.attributes?.length === 0) {
delete key.attributes
}
elementRolesMap.set(key, value)
}
// - Remove insufficiently-disambiguated `menuitem` entry
elementRolesMap.delete({name: 'menuitem'})
// - Disambiguate `menuitem` and `menu` roles by `type`
elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'command'}]}, ['menuitem'])
elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'radio'}]}, ['menuitemradio'])
elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'toolbar'}]}, ['toolbar'])
elementRolesMap.set({name: 'menu', attributes: [{name: 'type', value: 'toolbar'}]}, ['toolbar'])

/*
Determine role of an element, based on its name and attributes.
*/
function getRole(context, node) {
// Early return if role is explicitly set
const explicitRole = getPropValue(getProp(node.attributes, 'role'))
if (explicitRole) {
return explicitRole
}

// Assemble a key for looking-up the element’s role in the `elementRolesMap`
// - Get the element’s name
const key = {name: getElementType(context, node)}

for (const prop of [
'aria-label',
'aria-labelledby',
'alt',
'type',
'size',
'role',
'href',
'multiple',
'scope',
'name',
]) {
if ((prop === 'aria-labelledby' || prop === 'aria-label') && !['section', 'aside', 'form'].includes(key.name))
continue
if (prop === 'name' && key.name !== 'form') continue
if (prop === 'href' && key.name !== 'a' && key.name !== 'area') continue
if (prop === 'alt' && key.name !== 'img') continue

const propOnNode = getProp(node.attributes, prop)

if (!('attributes' in key)) {
key.attributes = []
}
// Disambiguate "undefined" props
if (propOnNode === undefined && prop === 'alt' && key.name === 'img') {
key.attributes.push({name: prop, constraints: ['undefined']})
continue
}

const value = getPropValue(propOnNode)
if (value || (value === '' && prop === 'alt')) {
if (
prop === 'href' ||
prop === 'aria-labelledby' ||
prop === 'aria-label' ||
prop === 'name' ||
(prop === 'alt' && value !== '')
) {
key.attributes.push({name: prop, constraints: ['set']})
} else {
key.attributes.push({name: prop, value})
}
}
}

// - Remove empty `attributes` key
if (!key.attributes || key.attributes?.length === 0) {
delete key.attributes
}

// Get the element’s implicit role
return elementRolesMap.get(key)?.[0]
}

module.exports = {getRole}
31 changes: 22 additions & 9 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"@github/browserslist-config": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"aria-query": "^5.1.3",
"aria-query": "^5.3.0",
"eslint-config-prettier": ">=8.0.0",
"eslint-plugin-escompat": "^3.3.3",
"eslint-plugin-eslint-comments": "^3.2.0",
Expand Down
54 changes: 16 additions & 38 deletions tests/role-supports-aria-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{code: '<a href="#" aria-owns />'},
{code: '<a href="#" aria-relevant />'},

// this will have global
{code: '<a aria-checked />'},
Comment on lines -60 to -61
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is now treated as generic


// AREA TESTS - implicit role is `link`
{code: '<area href="#" aria-expanded />'},
{code: '<area href="#" aria-atomic />'},
Expand All @@ -78,30 +75,6 @@ ruleTester.run('role-supports-aria-props', rule, {
{code: '<area href="#" aria-owns />'},
{code: '<area href="#" aria-relevant />'},

// this will have global
{code: '<area aria-checked />'},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is now treated as generic


// LINK TESTS - implicit role is `link`
Copy link
Contributor Author

@khiga8 khiga8 Jul 10, 2023

Choose a reason for hiding this comment

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

<link> maps to nothing now so I'm deleting these tests.

{code: '<link href="#" aria-expanded />'},
{code: '<link href="#" aria-atomic />'},
{code: '<link href="#" aria-busy />'},
{code: '<link href="#" aria-controls />'},
{code: '<link href="#" aria-describedby />'},
{code: '<link href="#" aria-disabled />'},
{code: '<link href="#" aria-dropeffect />'},
{code: '<link href="#" aria-flowto />'},
{code: '<link href="#" aria-grabbed />'},
{code: '<link href="#" aria-hidden />'},
{code: '<link href="#" aria-haspopup />'},
{code: '<link href="#" aria-label />'},
{code: '<link href="#" aria-labelledby />'},
{code: '<link href="#" aria-live />'},
{code: '<link href="#" aria-owns />'},
{code: '<link href="#" aria-relevant />'},

// this will have global
{code: '<link aria-checked />'},

// this will have role of `img`
{code: '<img alt="foobar" aria-busy />'},

Expand Down Expand Up @@ -344,20 +317,25 @@ ruleTester.run('role-supports-aria-props', rule, {
{code: '<datalist aria-expanded />'},
{code: '<div role="heading" aria-level />'},
{code: '<div role="heading" aria-level="1" />'},
{code: '<link href="#" aria-expanded />'}, // link maps to nothing
],

invalid: [
// implicit basic checks
{
code: '<a href="#" aria-checked />',
errors: [getErrorMessage('aria-checked', 'link')],
code: '<area aria-checked />',
errors: [getErrorMessage('aria-checked', 'generic')],
},
{
code: '<area href="#" aria-checked />',
code: '<a aria-checked />',
errors: [getErrorMessage('aria-checked', 'generic')],
},
{
code: '<a href="#" aria-checked />',
errors: [getErrorMessage('aria-checked', 'link')],
},
{
code: '<link href="#" aria-checked />',
code: '<area href="#" aria-checked />',
errors: [getErrorMessage('aria-checked', 'link')],
},
{
Expand All @@ -370,7 +348,7 @@ ruleTester.run('role-supports-aria-props', rule, {
},
{
code: '<aside aria-checked />',
errors: [getErrorMessage('aria-checked', 'complementary')],
errors: [getErrorMessage('aria-checked', 'generic')],
},
{
code: '<ul aria-expanded />',
Expand All @@ -386,15 +364,15 @@ ruleTester.run('role-supports-aria-props', rule, {
},
{
code: '<aside aria-expanded />',
errors: [getErrorMessage('aria-expanded', 'complementary')],
errors: [getErrorMessage('aria-expanded', 'generic')],
},
{
code: '<article aria-expanded />',
errors: [getErrorMessage('aria-expanded', 'article')],
},
{
code: '<body aria-expanded />',
errors: [getErrorMessage('aria-expanded', 'document')],
errors: [getErrorMessage('aria-expanded', 'generic')],
},
{
code: '<li aria-expanded />',
Expand All @@ -414,6 +392,10 @@ ruleTester.run('role-supports-aria-props', rule, {
},
{
code: '<section aria-expanded />',
errors: [getErrorMessage('aria-expanded', 'generic')],
},
{
code: '<section aria-label="something" aria-expanded />',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

If <section aria-label>, we treat it as region.

errors: [getErrorMessage('aria-expanded', 'region')],
},
{
Expand Down Expand Up @@ -480,10 +462,6 @@ ruleTester.run('role-supports-aria-props', rule, {
code: '<menu type="toolbar" aria-expanded />',
errors: [getErrorMessage('aria-expanded', 'toolbar')],
},
{
code: '<link href="#" aria-invalid />',
errors: [getErrorMessage('aria-invalid', 'link')],
},
{
code: '<area href="#" aria-invalid />',
errors: [getErrorMessage('aria-invalid', 'link')],
Expand Down
27 changes: 2 additions & 25 deletions tests/utils/get-element-type.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,11 @@
const {getElementType} = require('../../lib/utils/get-element-type')
const {mockJSXAttribute, mockJSXOpeningElement} = require('./mocks')

const mocha = require('mocha')
const describe = mocha.describe
const it = mocha.it
const expect = require('chai').expect

function mockJSXAttribute(prop, propValue) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm extracting this into a helper.

return {
type: 'JSXAttribute',
name: {
type: 'JSXIdentifier',
name: prop,
},
value: {
type: 'Literal',
value: propValue,
},
}
}

function mockJSXOpeningElement(tagName, attributes = []) {
return {
type: 'JSXOpeningElement',
name: {
type: 'JSXIdentifier',
name: tagName,
},
attributes,
}
}

function mockSetting(componentSetting = {}) {
return {
settings: {
Expand Down
Loading