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

khiga8 · web-flow · commit 0c0441fa457c · 2023-07-17T13:31:42.000-07:00
Check for presence of attribute in `getRole` rather than the value
diff --git a/lib/utils/get-role.js b/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})
       }
     }
diff --git a/tests/a11y-role-supports-aria-props.js b/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 />'},
diff --git a/tests/utils/get-role.js b/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')

Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ function getRole(context, node) {`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`const value = getLiteralPropValue(propOnNode)`
`84`		`- if (value \|\| (value === '' && prop === 'alt')) {`
	`84`	`+ if (propOnNode) {`
`85`	`85`	`if (`
`86`	`86`	`prop === 'href' \|\|`
`87`	`87`	`prop === 'aria-labelledby' \|\|`
`@@ -90,7 +90,7 @@ function getRole(context, node) {`
`90`	`90`	`(prop === 'alt' && value !== '')`
`91`	`91`	`) {`
`92`	`92`	`key.attributes.push({name: prop, constraints: ['set']})`
`93`		`- } else {`
	`93`	`+ } else if (value \|\| (value === '' && prop === 'alt')) {`
`94`	`94`	`key.attributes.push({name: prop, value})`
`95`	`95`	`}`
`96`	`96`	`}`