Merge pull request github#463 from github/kh-use-prop-value

Check for presence of attribute in `getRole` rather than the value

Author: khiga8

lib/utils/get-role.js

@@ -81,7 +81,7 @@ function getRole(context, node) {
  }
 
  const value = getLiteralPropValue(propOnNode)
- if (value || (value === '' && prop === 'alt')) {
+ if (propOnNode) {
  if (
  prop === 'href' ||
  prop === 'aria-labelledby' ||
@@ -90,7 +90,7 @@ function getRole(context, node) {
  (prop === 'alt' && value !== '')
  ) {
  key.attributes.push({name: prop, constraints: ['set']})
- } else {
+ } else if (value || (value === '' && prop === 'alt')) {
  key.attributes.push({name: prop, value})
  }
  }

tests/a11y-role-supports-aria-props.js

@@ -35,11 +35,11 @@ ruleTester.run('a11y-role-supports-aria-props', rule, {
  {code: '<div role />'},
  {code: '<div role="presentation" {...props} />'},
  {code: '<Foo.Bar baz={true} />'},
+ {code: '<Foo as="a" href={url} aria-label={`Issue #${title}`} />'},
  {code: '<Link href="#" aria-checked />'},
  // Don't try to evaluate expression
  {code: '<Box aria-labelledby="some-id" role={role} />'},
- {code: '<Box aria-labelledby="some-id"as={isNavigationOpen ? "div" : "nav"} />'},
-
+ {code: '<Box aria-labelledby="some-id" as={isNavigationOpen ? "div" : "nav"} />'},
  // IMPLICIT ROLE TESTS
  // A TESTS - implicit role is `link`
  {code: '<a href="#" aria-expanded />'},

tests/utils/get-role.js

@@ -46,6 +46,27 @@ describe('getRole', function () {
  expect(getRole({}, node)).to.equal('link')
  })
 
+ it('returns link role for <Foo> with polymorphic prop set to "a" and conditional href', function () {
+ const node = mockJSXOpeningElement('Foo', [
+ mockJSXAttribute('as', 'a'),
+ mockJSXConditionalAttribute('href', 'getUrl', '#', 'https://github.com/'),
+ ])
+ expect(getRole({}, node)).to.equal('link')
+ })
+
+ it('returns link role for <Foo> with polymorphic prop set to "a" and literal href', function () {
+ const node = mockJSXOpeningElement('Foo', [
+ mockJSXAttribute('as', 'a'),
+ mockJSXAttribute('href', 'https://github.com/'),
+ ])
+ expect(getRole({}, node)).to.equal('link')
+ })
+
+ it('returns generic role for <Foo> with polymorphic prop set to "a" and no href', function () {
+ const node = mockJSXOpeningElement('Foo', [mockJSXAttribute('as', 'a')])
+ expect(getRole({}, node)).to.equal('generic')
+ })
+
  it('returns region role for <section> with aria-label', function () {
  const node = mockJSXOpeningElement('section', [mockJSXAttribute('aria-label', 'something')])
  expect(getRole({}, node)).to.equal('region')