fix: correctly handle img with empty alt

Author: jlp-craigmorten

src/__tests__/__snapshots__/role-helpers.js.snap

@@ -44,6 +44,32 @@ Name "Tertiary Heading":
   data-testid="a-h3"
 />
 
+--------------------------------------------------
+img:
+
+Name "":
+<img
+  data-testid="a-img-1"
+  src="http://example.com/image.png"
+/>
+
+Name "a meaningful description":
+<img
+  alt="a meaningful description"
+  data-testid="a-img-3"
+  src="http://example.com/image.png"
+/>
+
+--------------------------------------------------
+presentation:
+
+Name "":
+<img
+  alt=""
+  data-testid="a-img-2"
+  src="http://example.com/image.png"
+/>
+
 --------------------------------------------------
 article:
 

src/__tests__/role-helpers.js

@@ -27,6 +27,10 @@ function setup() {
   <h2 data-testid='a-h2'>Sub Heading</h2>
   <h3 data-testid='a-h3'>Tertiary Heading</h3>
 
+  <img src="http://example.com/image.png" data-testid='a-img-1'/>
+  <img alt="" src="http://example.com/image.png" data-testid='a-img-2'/>
+  <img alt="a meaningful description" src="http://example.com/image.png" data-testid='a-img-3'/>
+
   <article data-testid='a-article'>
     <ul data-testid='a-list'>
       <li data-testid='a-list-item-1'>Item 1</li>
@@ -74,6 +78,9 @@ function setup() {
     h1: getByTestId('a-h1'),
     h2: getByTestId('a-h2'),
     h3: getByTestId('a-h3'),
+    unnamedImg: getByTestId('a-img-1'),
+    presentationImg: getByTestId('a-img-2'),
+    namedImg: getByTestId('a-img-3'),
     nav: getByTestId('a-nav'),
     article: getByTestId('a-article'),
     aUl: getByTestId('a-list'),
@@ -109,6 +116,9 @@ test('getRoles returns expected roles for various dom nodes', () => {
     h1,
     h2,
     h3,
+    unnamedImg,
+    presentationImg,
+    namedImg,
     nav,
     article,
     aUl,
@@ -139,6 +149,7 @@ test('getRoles returns expected roles for various dom nodes', () => {
     link: [anchor],
     generic: [invalidAnchor, unnamedSection],
     heading: [h1, h2, h3],
+    img: [unnamedImg, namedImg],
     navigation: [nav],
     radio: [radio, radio2],
     article: [article],
@@ -153,6 +164,7 @@ test('getRoles returns expected roles for various dom nodes', () => {
     region: [namedSection],
     term: [dt],
     definition: [dd],
+    presentation: [presentationImg],
   })
   expect(getRoles(header)).toEqual({
     banner: [header],

src/role-helpers.js

@@ -82,9 +82,10 @@ function buildElementRoleList(elementRolesMap) {
     return `${name}${attributes
       .map(({name: attributeName, value, constraints = []}) => {
         const shouldNotExist = constraints.indexOf('undefined') !== -1
+        const hasValue = typeof value !== 'undefined'
         if (shouldNotExist) {
           return `:not([${attributeName}])`
-        } else if (value) {
+        } else if (hasValue) {
           return `[${attributeName}="${value}"]`
         } else {
           return `[${attributeName}]`
@@ -94,14 +95,32 @@ function buildElementRoleList(elementRolesMap) {
   }
 
   function getSelectorSpecificity({attributes = []}) {
-    return attributes.length
+    return {
+      primaryKey: attributes.length,
+      secondaryKey: attributes.reduce((acc, {value, constraints = []}) => {
+        const shouldNotExist = constraints.indexOf('undefined') !== -1
+        const hasValue = typeof value !== 'undefined'
+
+        if (shouldNotExist) {
+          return acc + 2
+        } else if (hasValue) {
+          return acc + 1
+        }
+
+        return acc
+      }, 0),
+    }
   }
 
   function bySelectorSpecificity(
     {specificity: leftSpecificity},
     {specificity: rightSpecificity},
   ) {
-    return rightSpecificity - leftSpecificity
+    if (rightSpecificity.primaryKey !== leftSpecificity.primaryKey) {
+      return rightSpecificity.primaryKey - leftSpecificity.primaryKey
+    }
+
+    return rightSpecificity.secondaryKey - leftSpecificity.secondaryKey
   }
 
   function match(element) {