Sep 26, 2023 · Sep 26, 2023 · Sep 26, 2023 · Sep 26, 2023
diff --git a/lib/utils/get-role.js b/lib/utils/get-role.js
  const explicitRole = getLiteralPropValue(getProp(node.attributes, 'role'))
  if (explicitRole) {
    return explicitRole
  } else if (getProp(node.attributes, 'role')) {
    // If role is set to anything other than a literal prop
    return undefined
  }

  // Assemble a key for looking-up the element’s role in the `elementRolesMap`
diff --git a/tests/a11y-role-supports-aria-props.js b/tests/a11y-role-supports-aria-props.js

 ruleTester.run('a11y-role-supports-aria-props', rule, {
  valid: [
    {
      code: `
      <div
        id={id}
        role={
          sectionHasHeader && rowIndex.row === 0 ? 'presentation' : 'option'
        }
        aria-label={this.props.ariaLabel}
      >
        {children}
      </div>`,
    },
    {code: '<Foo bar />'},
    {code: '<div />'},
    {code: '<div id="main" />'},
diff --git a/tests/utils/get-role.js b/tests/utils/get-role.js
  })

  it('returns undefined when role is set to non-literal expression', function () {
    // <Box role={isNavigationOpen ? 'generic' : 'navigation'} />
    const node = mockJSXOpeningElement('Box', [
    // <div role={isNavigationOpen ? 'generic' : 'navigation'} />
    const node = mockJSXOpeningElement('div', [
      mockJSXConditionalAttribute('role', 'isNavigationOpen', 'generic', 'navigation'),
    ])
    expect(getRole({}, node)).to.equal(undefined)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,6 +46,9 @@ function getRole(context, node) {
		const explicitRole = getLiteralPropValue(getProp(node.attributes, 'role'))
		if (explicitRole) {
		return explicitRole
		} else if (getProp(node.attributes, 'role')) {
		// If role is set to anything other than a literal prop
		return undefined
		}

		// Assemble a key for looking-up the element’s role in the `elementRolesMap`
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,6 +29,18 @@ function getErrorMessage(attribute, role) {

		ruleTester.run('a11y-role-supports-aria-props', rule, {
		valid: [
		{
		code: `
		<div
		id={id}
		role={
		sectionHasHeader && rowIndex.row === 0 ? 'presentation' : 'option'
		}
		aria-label={this.props.ariaLabel}
		>
		{children}
		</div>`,
		},
		{code: '<Foo bar />'},
		{code: '<div />'},
		{code: '<div id="main" />'},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,8 +13,8 @@ describe('getRole', function () {
		})

		it('returns undefined when role is set to non-literal expression', function () {
		// <Box role={isNavigationOpen ? 'generic' : 'navigation'} />
		const node = mockJSXOpeningElement('Box', [
		// <div role={isNavigationOpen ? 'generic' : 'navigation'} />
		const node = mockJSXOpeningElement('div', [
		mockJSXConditionalAttribute('role', 'isNavigationOpen', 'generic', 'navigation'),
		])
		expect(getRole({}, node)).to.equal(undefined)
Expand Down