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

Check for presence of attribute in `getRole` rather than the value
github · Jul 17, 2023 · 0c0441f · 0c0441f
2 parents 125ac51 + 8c5f809
commit 0c0441f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
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')