[New] add isInteractiveRole helper util, see #601

[johanrd]

See #601

Implements a helper util for the query "Is this role interactive?" — filter concrete roles whose superClass chain includes widget.

Inspired by eslint-plugins independently implementing the same superClass.some(chain => chain.includes('widget')) loop. Three of them (angular-eslint, lit-a11y, eslint-plugin-ember) also independently arrived at the same two special cases: exclude progressbar (its value is always readonly), include toolbar (supports aria-activedescendant in practice):

• jsx-a11y: src/util/isInteractiveRole.js
• eslint-plugin-ember: lib/utils/interactive-roles.js (in review)
• vuejs-accessibility: src/utils/getInteractiveRoles.ts
• angular-eslint: get-interactive-element-role-schemas.ts
• lit-a11y: lib/utils/isInteractiveElement.js

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[johanrd]

@ljharb not sure about using a Set here, as browserslist lists both "ie 11" and "node": ">= 0.4". This is possible to work around, sure, but wanted to check in first, as Set seems to be part of the public api anyways, e.g in readme:

The roles are provided in a Set.

[ljharb]

it's actually more of a "Setlike" - see

aria-query/src/elementRoleMap.js

Lines 53 to 85 in c151daf

	const elementRoleMap: TAriaQueryMap<
	ElementARIARoleRelations,
	ARIARoleRelationConcept,
	RoleSet,
	> = {
	entries: function (): ElementARIARoleRelations {
	return elementRoles;
	},
	forEach: function (
	fn: (RoleSet, ARIARoleRelationConcept, ElementARIARoleRelations) => void,
	thisArg: any = null,
	): void {
	for (let [key, values] of elementRoles) {
	fn.call(thisArg, values, key, elementRoles);
	}
	},
	get: function (key: ARIARoleRelationConcept): ?RoleSet {
	const item = elementRoles.filter(tuple => (
	key.name === tuple[0].name
	&& ariaRoleRelationConceptAttributeEquals(key.attributes, tuple[0].attributes)
	))[0];
	return item && item[1];
	},
	has: function (key: ARIARoleRelationConcept): boolean {
	return !!elementRoleMap.get(key);
	},
	keys: function (): Array<ARIARoleRelationConcept> {
	return elementRoles.map(([key]) => key);
	},
	values: function (): Array<RoleSet> {
	return elementRoles.map(([, values]) => values);
	},
	};

. So indeed we can't use a native Set.

[ljharb]

it'd probably be more performant to build up a null object, rather than an array?

[johanrd]

okay, thanks – addressed now.

Went with a plain {} (rather than Object.create(null) to avoid FlowIgnore or cast as any ((Flow seemed to reject Object.create(null) against { [string]: true }). But happy to switch to Object.create(null) with a suppression or cast if that is preferred.

[ljharb]

{ __proto__: null } is always better than Object.create(null), fwiw.

[johanrd]

okay, changed to '{ proto: null }' now.