From b6ce4306f9560e346d29253dd87fd085c860340b Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 01:47:57 -0400
Subject: [PATCH 01/32] Added npm package lodash.merge

Added lodash.merge to handle deep merging in role-helpers.
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index a4d0c662..dda79a63 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@babel/runtime": "^7.4.5",
     "@sheerun/mutationobserver-shim": "^0.3.2",
     "aria-query": "3.0.0",
+    "lodash.merge": "^4.6.1",
     "pretty-format": "^24.8.0",
     "wait-for-expect": "^1.2.0"
   },

From c5abc464fd92909ad47ea56876aecdf7329846a0 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 01:50:08 -0400
Subject: [PATCH 02/32] Add `getRoles` and `logRoles` utilities #282

Implements requirements of https://github.com/testing-library/dom-testing-library/issues/282

Added getRoles and logRoles to a new file, role-helpers.js.
Moved buildElementRoleList
  from src/queries/role.js
  to src/role-helpers.js
    This function was also needed in role-helpers, and it didn't seem
proper to to expert it from queries/role with a bunch of queries.  Makes
more sense to be in the helper file i think.
---
 src/__tests__/role-helpers.js | 107 ++++++++++++++++++++++++++++++++++
 src/queries/role.js           |  38 +-----------
 src/role-helpers.js           |  85 +++++++++++++++++++++++++++
 3 files changed, 193 insertions(+), 37 deletions(-)
 create mode 100644 src/__tests__/role-helpers.js
 create mode 100644 src/role-helpers.js

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
new file mode 100644
index 00000000..b7e384fa
--- /dev/null
+++ b/src/__tests__/role-helpers.js
@@ -0,0 +1,107 @@
+import {getRoles, logRoles} from '../role-helpers'
+
+function setup() {
+  const section = document.createElement('section')
+  const h1 = document.createElement('h1')
+  const h2 = document.createElement('h2')
+  const h3 = document.createElement('h3')
+  const nav = document.createElement('nav')
+  const article = document.createElement('article')
+  const ul = document.createElement('ul')
+  const li1 = document.createElement('li')
+  const li2 = document.createElement('li')
+  const table = document.createElement('table')
+  const tr = document.createElement('tr')
+  const td1 = document.createElement('td')
+  const td2 = document.createElement('td')
+  const td3 = document.createElement('td')
+  const formEl = document.createElement('form')
+  const input = document.createElement('input')
+  const input2 = document.createElement('input')
+
+  section.appendChild(h1)
+  section.appendChild(nav)
+  section.appendChild(h2)
+  section.appendChild(h3)
+  section.appendChild(article)
+  article.appendChild(ul)
+  ul.appendChild(li1)
+  ul.appendChild(li2)
+  article.appendChild(table)
+  table.appendChild(tr)
+  tr.appendChild(td1)
+  tr.appendChild(td2)
+  tr.appendChild(td3)
+  article.appendChild(formEl)
+  formEl.appendChild(input)
+  formEl.appendChild(input2)
+
+  return {
+    section,
+    h1,
+    h2,
+    h3,
+    nav,
+    article,
+    ul,
+    li1,
+    li2,
+    table,
+    tr,
+    td1,
+    td2,
+    td3,
+    formEl,
+    input,
+    input2,
+  }
+}
+test('getRoles is a function', () => {
+  expect(typeof getRoles).toBe('function')
+})
+
+test('getRoles returns expected roles for various dom nodes', () => {
+  const {
+    section,
+    h1,
+    h2,
+    h3,
+    nav,
+    article,
+    ul,
+    li1,
+    li2,
+    table,
+    tr,
+    td1,
+    td2,
+    td3,
+    formEl,
+    input,
+    input2,
+  } = setup()
+
+  expect(getRoles(section)).toEqual({
+    region: [section],
+    heading: [h1, h2, h3],
+    navigation: [nav],
+    article: [article],
+    list: [ul],
+    listitem: [li1, li2],
+    table: [table],
+    row: [tr],
+    cell: [td1, td2, td3],
+    form: [formEl],
+    textbox: [input, input2],
+  })
+})
+
+test('logRoles is a function', () => {
+  expect(typeof logRoles).toBe('function')
+})
+
+test('logRoles logs expected roles for various dom nodes', () => {
+  const {section} = setup()
+
+  expect(logRoles(section)).toMatchSnapshot()
+})
diff --git a/src/queries/role.js b/src/queries/role.js
index 62f0dde6..e5a7fd5a 100644
--- a/src/queries/role.js
+++ b/src/queries/role.js
@@ -1,41 +1,5 @@
+import {elementRoleList} from '../role-helpers'
 import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils'
-import {elementRoles} from 'aria-query'
-
-function buildElementRoleList(elementRolesMap) {
-  function makeElementSelector({name, attributes = []}) {
-    return `${name}${attributes
-      .map(({name: attributeName, value}) => `[${attributeName}=${value}]`)
-      .join('')}`
-  }
-
-  function getSelectorSpecificity({attributes = []}) {
-    return attributes.length
-  }
-
-  function bySelectorSpecificity(
-    {specificity: leftSpecificity},
-    {specificity: rightSpecificity},
-  ) {
-    return rightSpecificity - leftSpecificity
-  }
-
-  let result = []
-
-  for (const [element, roles] of elementRolesMap.entries()) {
-    result = [
-      ...result,
-      {
-        selector: makeElementSelector(element),
-        roles: Array.from(roles),
-        specificity: getSelectorSpecificity(element),
-      },
-    ]
-  }
-
-  return result.sort(bySelectorSpecificity)
-}
-
-const elementRoleList = buildElementRoleList(elementRoles)
 
 function queryAllByRole(
   container,
diff --git a/src/role-helpers.js b/src/role-helpers.js
new file mode 100644
index 00000000..c48f7048
--- /dev/null
+++ b/src/role-helpers.js
@@ -0,0 +1,85 @@
+import {elementRoles} from 'aria-query'
+import merge from 'lodash.merge'
+import {debugDOM} from './query-helpers'
+
+function buildElementRoleList(elementRolesMap) {
+  function makeElementSelector({name, attributes = []}) {
+    return `${name}${attributes
+      .map(({name: attributeName, value}) => `[${attributeName}=${value}]`)
+      .join('')}`
+  }
+
+  function getSelectorSpecificity({attributes = []}) {
+    return attributes.length
+  }
+
+  function bySelectorSpecificity(
+    {specificity: leftSpecificity},
+    {specificity: rightSpecificity},
+  ) {
+    return rightSpecificity - leftSpecificity
+  }
+
+  let result = []
+
+  for (const [element, roles] of elementRolesMap.entries()) {
+    result = [
+      ...result,
+      {
+        selector: makeElementSelector(element),
+        roles: Array.from(roles),
+        specificity: getSelectorSpecificity(element),
+      },
+    ]
+  }
+
+  return result.sort(bySelectorSpecificity)
+}
+
+const elementRoleList = buildElementRoleList(elementRoles)
+const elementRoleMap = elementRoleList.reduce(
+  (acc, {selector, roles}) => ({...acc, [selector]: roles}),
+  {},
+)
+
+function getRoles(container) {
+  function getRolesForElements(elements) {
+    return elements
+      .filter(el => el.tagName !== undefined)
+      .map(el => [el, elementRoleMap[el.tagName.toLowerCase()]])
+      .reduce(
+        (acc, [el, roleName]) =>
+          acc[roleName]
+            ? {...acc, [roleName]: [...acc[roleName], el]}
+            : {...acc, [roleName]: [el]},
+        {},
+      )
+  }
+
+  const elements = Array.isArray(container) ? container : [container]
+  const childRoles = elements.reduce(
+    (acc, el) => ({...acc, ...getRoles(Array.from(el.childNodes))}),
+    {},
+  )
+
+  return merge(getRolesForElements(elements), childRoles)
+}
+
+function logRoles(container) {
+  const roles = getRoles(container)
+
+  return Object.entries(roles)
+    .map(
+      ([role, elements]) =>
+        `${role}:\n${elements.map(el => debugDOM(el)).join('\n')}\n\n`,
+    )
+    .join('')
+}
+
+export {
+  getRoles,
+  logRoles,
+  buildElementRoleList,
+  elementRoleList,
+  elementRoleMap,
+}

From eea0dfe051f4cc7518b2157c493c30549b5781ac Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 02:54:59 -0400
Subject: [PATCH 03/32] Updated logRole test to not rely on snapshot

Thinking it over, using the snapshot didn't make much sense either.  So
Now this test just checks loosely that the output has the expected
labels followed by expected element names
---
 src/__tests__/role-helpers.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index b7e384fa..7b5a96c6 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -102,6 +102,19 @@ test('logRoles is a function', () => {
 
 test('logRoles logs expected roles for various dom nodes', () => {
   const {section} = setup()
+  const output = logRoles(section)
 
-  expect(logRoles(section)).toMatchSnapshot()
+  expect(/region:[^:]+section/i.test(output)).toBe(true)
+  expect(/heading:[^:]+h1/i.test(output)).toBe(true)
+  expect(/heading:[^:]+h2/i.test(output)).toBe(true)
+  expect(/heading:[^:]+h3/i.test(output)).toBe(true)
+  expect(/navigation:[^:]+nav/i.test(output)).toBe(true)
+  expect(/article:[^:]+article/i.test(output)).toBe(true)
+  expect(/list:[^:]+ul/i.test(output)).toBe(true)
+  expect(/listitem:[^:]+li[^:]+li/i.test(output)).toBe(true)
+  expect(/table:[^:]+table/i.test(output)).toBe(true)
+  expect(/row:[^:]+tr/i.test(output)).toBe(true)
+  expect(/cell:[^:]+td[^:]+td[^:]+td/i.test(output)).toBe(true)
+  expect(/form:[^:]+form/i.test(output)).toBe(true)
+  expect(/textbox:[^:]+input[^:]+input/i.test(output)).toBe(true)
 })

From 608681d702ea830fc40c0499713860c7eff39efe Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 04:35:00 -0400
Subject: [PATCH 04/32] Added role-helpers export to index.js

---
 src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.js b/src/index.js
index eede8d4a..33a10a41 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ export * from './get-node-text'
 export * from './events'
 export * from './get-queries-for-element'
 export * from './query-helpers'
+export * from './role-helpers'
 export * from './pretty-dom'
 export {configure} from './config'
 

From 8c4ca7ca19eddedab1bb6822efded2720e707c2e Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 21:15:01 -0400
Subject: [PATCH 05/32] Changed formatting of logRoles

No longer shows child nodes in output
cleaerer distinction between groups
---
 src/__tests__/role-helpers.js | 25 ++++++++++++-------------
 src/role-helpers.js           | 13 +++++++++----
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 7b5a96c6..ca52f249 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-control-regex */
 import {getRoles, logRoles} from '../role-helpers'
 
 function setup() {
@@ -104,17 +105,15 @@ test('logRoles logs expected roles for various dom nodes', () => {
   const {section} = setup()
   const output = logRoles(section)
 
-  expect(/region:[^:]+section/i.test(output)).toBe(true)
-  expect(/heading:[^:]+h1/i.test(output)).toBe(true)
-  expect(/heading:[^:]+h2/i.test(output)).toBe(true)
-  expect(/heading:[^:]+h3/i.test(output)).toBe(true)
-  expect(/navigation:[^:]+nav/i.test(output)).toBe(true)
-  expect(/article:[^:]+article/i.test(output)).toBe(true)
-  expect(/list:[^:]+ul/i.test(output)).toBe(true)
-  expect(/listitem:[^:]+li[^:]+li/i.test(output)).toBe(true)
-  expect(/table:[^:]+table/i.test(output)).toBe(true)
-  expect(/row:[^:]+tr/i.test(output)).toBe(true)
-  expect(/cell:[^:]+td[^:]+td[^:]+td/i.test(output)).toBe(true)
-  expect(/form:[^:]+form/i.test(output)).toBe(true)
-  expect(/textbox:[^:]+input[^:]+input/i.test(output)).toBe(true)
+  expect(/region[^<]+<section/gi.test(output)).toBe(true)
+  expect(/heading[^<]+<h1 \/>[^<]+<h2 \/>[^<]+<h3/i.test(output)).toBe(true)
+  expect(/navigation[^<]+<nav/i.test(output)).toBe(true)
+  expect(/article[^<]+<article/i.test(output)).toBe(true)
+  expect(/list[^<]+<ul/i.test(output)).toBe(true)
+  expect(/listitem[^<]+<li[^<]+<li/i.test(output)).toBe(true)
+  expect(/table[^<]+<table/i.test(output)).toBe(true)
+  expect(/row[^<]+<tr/i.test(output)).toBe(true)
+  expect(/cell[^<]+<td[^<]+<td[^<]+<td/i.test(output)).toBe(true)
+  expect(/form[^<]+<form/i.test(output)).toBe(true)
+  expect(/textbox[^<]+<input[^<]+<input/i.test(output)).toBe(true)
 })
diff --git a/src/role-helpers.js b/src/role-helpers.js
index c48f7048..456a52df 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -69,10 +69,15 @@ function logRoles(container) {
   const roles = getRoles(container)
 
   return Object.entries(roles)
-    .map(
-      ([role, elements]) =>
-        `${role}:\n${elements.map(el => debugDOM(el)).join('\n')}\n\n`,
-    )
+    .map(([role, elements]) => {
+      const numDelimeters = 42 - role.length - 1
+      const delimeterBar = [...Array(numDelimeters)].map(_ => '#').join('')
+      const elementsString = elements
+        .map(el => `${debugDOM(el.cloneNode(false))}`)
+        .join('\n\n\t')
+
+      return `${role} ${delimeterBar}\n\n\t${elementsString}\n\n\n`
+    })
     .join('')
 }
 

From cf3c1c56d3168cca7230b9e300af92f8f3ec4039 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 21:16:33 -0400
Subject: [PATCH 06/32] Removed some tests that weren't needed

---
 src/__tests__/role-helpers.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index ca52f249..d5a32f56 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -57,9 +57,6 @@ function setup() {
     input2,
   }
 }
-test('getRoles is a function', () => {
-  expect(typeof getRoles).toBe('function')
-})
 
 test('getRoles returns expected roles for various dom nodes', () => {
   const {
@@ -97,10 +94,6 @@ test('getRoles returns expected roles for various dom nodes', () => {
   })
 })
 
-test('logRoles is a function', () => {
-  expect(typeof logRoles).toBe('function')
-})
-
 test('logRoles logs expected roles for various dom nodes', () => {
   const {section} = setup()
   const output = logRoles(section)

From b179086583a87f307059aca8083c7efa677d8f5d Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 23:46:26 -0400
Subject: [PATCH 07/32] Refactored getRoles and updated related tests

Fixed bug in getRoles where deeply nested children could overwrtie each
other
getRoles is now simlper
The tests for getRoles and logRoles now use a more realistic DOM tree
---
 src/__tests__/role-helpers.js | 132 ++++++++++++++++++++--------------
 src/role-helpers.js           |  39 +++++-----
 2 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index d5a32f56..4fb71856 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -1,41 +1,67 @@
 /* eslint-disable no-control-regex */
 import {getRoles, logRoles} from '../role-helpers'
+import {render} from './helpers/test-utils'
 
 function setup() {
-  const section = document.createElement('section')
-  const h1 = document.createElement('h1')
-  const h2 = document.createElement('h2')
-  const h3 = document.createElement('h3')
-  const nav = document.createElement('nav')
-  const article = document.createElement('article')
-  const ul = document.createElement('ul')
-  const li1 = document.createElement('li')
-  const li2 = document.createElement('li')
-  const table = document.createElement('table')
-  const tr = document.createElement('tr')
-  const td1 = document.createElement('td')
-  const td2 = document.createElement('td')
-  const td3 = document.createElement('td')
-  const formEl = document.createElement('form')
-  const input = document.createElement('input')
-  const input2 = document.createElement('input')
+  const {getByTestId} = render(`
+<section data-testid='main-content'>
+  <nav data-testid='nav-bar' />
+  
+  <h1 data-testid='main-heading'>Main Heading</h1>
+  <h2 data-testid='sub-heading'>Sub Heading</h2>
+  <h3 data-testid='tertiary-heading'>Tertiary Heading</h3>
+  
+  <article data-testid='featured-article'>
+  
+    <ul data-testid='a-list'>
+      <li data-testid='a-list-item-1'>Item 1</li>
+      <li data-testid='a-list-item-2'>Item 2</li>
+    </ul>
 
-  section.appendChild(h1)
-  section.appendChild(nav)
-  section.appendChild(h2)
-  section.appendChild(h3)
-  section.appendChild(article)
-  article.appendChild(ul)
-  ul.appendChild(li1)
-  ul.appendChild(li2)
-  article.appendChild(table)
-  table.appendChild(tr)
-  tr.appendChild(td1)
-  tr.appendChild(td2)
-  tr.appendChild(td3)
-  article.appendChild(formEl)
-  formEl.appendChild(input)
-  formEl.appendChild(input2)
+    <table data-testid='a-table'>
+      <tbody data-testid='a-tbody'>
+        <tr data-testid='a-row'>
+          <td data-testid='a-cell-1'>Cell 1</td>
+          <td data-testid='a-cell-2'>Cell 2</td>
+          <td data-testid='a-cell-3'>Cell 3</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <form data-testid='a-form'>
+      <input type='text' data-testid='a-input-1' />
+      <input type='text' data-testid='a-input-2' />
+    </form>
+
+    <ul data-testid='b-list'>
+      <li data-testid='b-list-item-1'>Item 1</li>
+      <li data-testid='b-list-item-2'>Item 2</li>
+    </ul>
+   </article>
+</section>
+  `)
+
+  const section = getByTestId('main-content')
+  const h1 = getByTestId('main-heading')
+  const h2 = getByTestId('sub-heading')
+  const h3 = getByTestId('tertiary-heading')
+  const nav = getByTestId('nav-bar')
+  const article = getByTestId('featured-article')
+  const aUl = getByTestId('a-list')
+  const aLi1 = getByTestId('a-list-item-1')
+  const aLi2 = getByTestId('a-list-item-2')
+  const bUl = getByTestId('b-list')
+  const bLi1 = getByTestId('b-list-item-1')
+  const bLi2 = getByTestId('b-list-item-2')
+  const table = getByTestId('a-table')
+  const tbody = getByTestId('a-tbody')
+  const tr = getByTestId('a-row')
+  const td1 = getByTestId('a-cell-1')
+  const td2 = getByTestId('a-cell-2')
+  const td3 = getByTestId('a-cell-3')
+  const formEl = getByTestId('a-form')
+  const input = getByTestId('a-input-1')
+  const input2 = getByTestId('a-input-2')
 
   return {
     section,
@@ -44,10 +70,14 @@ function setup() {
     h3,
     nav,
     article,
-    ul,
-    li1,
-    li2,
+    aUl,
+    aLi1,
+    aLi2,
+    bUl,
+    bLi1,
+    bLi2,
     table,
+    tbody,
     tr,
     td1,
     td2,
@@ -66,10 +96,14 @@ test('getRoles returns expected roles for various dom nodes', () => {
     h3,
     nav,
     article,
-    ul,
-    li1,
-    li2,
+    aUl,
+    aLi1,
+    aLi2,
+    bUl,
+    bLi1,
+    bLi2,
     table,
+    tbody,
     tr,
     td1,
     td2,
@@ -84,13 +118,14 @@ test('getRoles returns expected roles for various dom nodes', () => {
     heading: [h1, h2, h3],
     navigation: [nav],
     article: [article],
-    list: [ul],
-    listitem: [li1, li2],
+    list: [aUl, bUl],
+    listitem: [aLi1, aLi2, bLi1, bLi2],
     table: [table],
     row: [tr],
     cell: [td1, td2, td3],
     form: [formEl],
     textbox: [input, input2],
+    rowgroup: [tbody],
   })
 })
 
@@ -98,15 +133,8 @@ test('logRoles logs expected roles for various dom nodes', () => {
   const {section} = setup()
   const output = logRoles(section)
 
-  expect(/region[^<]+<section/gi.test(output)).toBe(true)
-  expect(/heading[^<]+<h1 \/>[^<]+<h2 \/>[^<]+<h3/i.test(output)).toBe(true)
-  expect(/navigation[^<]+<nav/i.test(output)).toBe(true)
-  expect(/article[^<]+<article/i.test(output)).toBe(true)
-  expect(/list[^<]+<ul/i.test(output)).toBe(true)
-  expect(/listitem[^<]+<li[^<]+<li/i.test(output)).toBe(true)
-  expect(/table[^<]+<table/i.test(output)).toBe(true)
-  expect(/row[^<]+<tr/i.test(output)).toBe(true)
-  expect(/cell[^<]+<td[^<]+<td[^<]+<td/i.test(output)).toBe(true)
-  expect(/form[^<]+<form/i.test(output)).toBe(true)
-  expect(/textbox[^<]+<input[^<]+<input/i.test(output)).toBe(true)
+  // If the snapshot needs to be updated, uncomment the console.log
+  // and take a look at the output to make sure it still looks good
+  //console.log(output);
+  expect(output).toMatchSnapshot()
 })
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 456a52df..44cd7a0a 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -1,5 +1,4 @@
 import {elementRoles} from 'aria-query'
-import merge from 'lodash.merge'
 import {debugDOM} from './query-helpers'
 
 function buildElementRoleList(elementRolesMap) {
@@ -43,26 +42,22 @@ const elementRoleMap = elementRoleList.reduce(
 )
 
 function getRoles(container) {
-  function getRolesForElements(elements) {
-    return elements
-      .filter(el => el.tagName !== undefined)
-      .map(el => [el, elementRoleMap[el.tagName.toLowerCase()]])
-      .reduce(
-        (acc, [el, roleName]) =>
-          acc[roleName]
-            ? {...acc, [roleName]: [...acc[roleName], el]}
-            : {...acc, [roleName]: [el]},
-        {},
-      )
+  function flattenDOM(node) {
+    return [
+      node,
+      ...Array.from(node.children).reduce(
+        (acc, c) => (c.tagName ? [...acc, ...flattenDOM(c)] : acc),
+        [],
+      ),
+    ]
   }
 
-  const elements = Array.isArray(container) ? container : [container]
-  const childRoles = elements.reduce(
-    (acc, el) => ({...acc, ...getRoles(Array.from(el.childNodes))}),
-    {},
-  )
-
-  return merge(getRolesForElements(elements), childRoles)
+  return flattenDOM(container).reduce((acc, node) => {
+    const role = elementRoleMap[node.tagName.toLowerCase()]
+    return Array.isArray(acc[role])
+      ? {...acc, [role]: [...acc[role], node]}
+      : {...acc, [role]: [node]}
+  }, [])
 }
 
 function logRoles(container) {
@@ -70,13 +65,13 @@ function logRoles(container) {
 
   return Object.entries(roles)
     .map(([role, elements]) => {
-      const numDelimeters = 42 - role.length - 1
+      const numDelimeters = 42 - role.length - 1 // 42 is arbitrary
       const delimeterBar = [...Array(numDelimeters)].map(_ => '#').join('')
       const elementsString = elements
         .map(el => `${debugDOM(el.cloneNode(false))}`)
-        .join('\n\n\t')
+        .join('\n\n')
 
-      return `${role} ${delimeterBar}\n\n\t${elementsString}\n\n\n`
+      return `${role} ${delimeterBar}\n\n${elementsString}\n\n\n`
     })
     .join('')
 }

From 556857f704e0f695dd2ab8314c395bc5aa84a588 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Fri, 14 Jun 2019 23:56:47 -0400
Subject: [PATCH 08/32] Removed export of buildElementRoleList

buildElementRoleList doesn't need to be exported at this time.

Previously, src/queries/roles used that function to create
elementRoleList variable, but since role-helpers needed that as well
it's just created in there and only elementRoleList is exported
---
 src/role-helpers.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index 44cd7a0a..9ee4cb73 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -76,10 +76,4 @@ function logRoles(container) {
     .join('')
 }
 
-export {
-  getRoles,
-  logRoles,
-  buildElementRoleList,
-  elementRoleList,
-  elementRoleMap,
-}
+export {getRoles, logRoles, elementRoleList, elementRoleMap}

From aaf0254745387c7424a1eee41ea0cf79967b7299 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 00:01:57 -0400
Subject: [PATCH 09/32] Removed lodash.merge dependency

Lodash.merge is no longer required with the getRoles refactor
---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index dda79a63..a4d0c662 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "@babel/runtime": "^7.4.5",
     "@sheerun/mutationobserver-shim": "^0.3.2",
     "aria-query": "3.0.0",
-    "lodash.merge": "^4.6.1",
     "pretty-format": "^24.8.0",
     "wait-for-expect": "^1.2.0"
   },

From f362406858a30ddffa7c5e3547c1244d4e3923af Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 00:13:39 -0400
Subject: [PATCH 10/32] Minor: removed a useless -1

There was a leftover -1 on a calculation that calculates the number of
'#'s for the role title in logRoles
---
 src/role-helpers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index 9ee4cb73..aea29241 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -65,7 +65,7 @@ function logRoles(container) {
 
   return Object.entries(roles)
     .map(([role, elements]) => {
-      const numDelimeters = 42 - role.length - 1 // 42 is arbitrary
+      const numDelimeters = 42 - role.length // 42 is arbitrary
       const delimeterBar = [...Array(numDelimeters)].map(_ => '#').join('')
       const elementsString = elements
         .map(el => `${debugDOM(el.cloneNode(false))}`)

From cb21991b923c348fe2ef049d6334414adb2031d3 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 00:21:41 -0400
Subject: [PATCH 11/32] Minor: statement no longer had to be temp literal

---
 src/role-helpers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index aea29241..c2eb134d 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -68,7 +68,7 @@ function logRoles(container) {
       const numDelimeters = 42 - role.length // 42 is arbitrary
       const delimeterBar = [...Array(numDelimeters)].map(_ => '#').join('')
       const elementsString = elements
-        .map(el => `${debugDOM(el.cloneNode(false))}`)
+        .map(el => debugDOM(el.cloneNode(false)))
         .join('\n\n')
 
       return `${role} ${delimeterBar}\n\n${elementsString}\n\n\n`

From ee9597292fff063c35685c8c97dcc31f64be5056 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 01:07:36 -0400
Subject: [PATCH 12/32] Reasability / sanity pass

---
 src/__tests__/role-helpers.js | 8 ++++----
 src/role-helpers.js           | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 4fb71856..8af32175 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -59,7 +59,7 @@ function setup() {
   const td1 = getByTestId('a-cell-1')
   const td2 = getByTestId('a-cell-2')
   const td3 = getByTestId('a-cell-3')
-  const formEl = getByTestId('a-form')
+  const form = getByTestId('a-form')
   const input = getByTestId('a-input-1')
   const input2 = getByTestId('a-input-2')
 
@@ -82,7 +82,7 @@ function setup() {
     td1,
     td2,
     td3,
-    formEl,
+    form,
     input,
     input2,
   }
@@ -108,7 +108,7 @@ test('getRoles returns expected roles for various dom nodes', () => {
     td1,
     td2,
     td3,
-    formEl,
+    form,
     input,
     input2,
   } = setup()
@@ -123,7 +123,7 @@ test('getRoles returns expected roles for various dom nodes', () => {
     table: [table],
     row: [tr],
     cell: [td1, td2, td3],
-    form: [formEl],
+    form: [form],
     textbox: [input, input2],
     rowgroup: [tbody],
   })
diff --git a/src/role-helpers.js b/src/role-helpers.js
index c2eb134d..fb75afe8 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -46,7 +46,7 @@ function getRoles(container) {
     return [
       node,
       ...Array.from(node.children).reduce(
-        (acc, c) => (c.tagName ? [...acc, ...flattenDOM(c)] : acc),
+        (acc, child) => (child.tagName ? [...acc, ...flattenDOM(child)] : acc),
         [],
       ),
     ]
@@ -57,7 +57,7 @@ function getRoles(container) {
     return Array.isArray(acc[role])
       ? {...acc, [role]: [...acc[role], node]}
       : {...acc, [role]: [node]}
-  }, [])
+  }, {})
 }
 
 function logRoles(container) {
@@ -66,7 +66,7 @@ function logRoles(container) {
   return Object.entries(roles)
     .map(([role, elements]) => {
       const numDelimeters = 42 - role.length // 42 is arbitrary
-      const delimeterBar = [...Array(numDelimeters)].map(_ => '#').join('')
+      const delimeterBar = '#'.repeat(numDelimeters)
       const elementsString = elements
         .map(el => debugDOM(el.cloneNode(false)))
         .join('\n\n')

From fbd7e2bca581d549169ea276b15dad2cd22e9cc7 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 01:37:30 -0400
Subject: [PATCH 13/32] Initial value for reducer switched to array

---
 src/role-helpers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index fb75afe8..0d3f5c73 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -57,7 +57,7 @@ function getRoles(container) {
     return Array.isArray(acc[role])
       ? {...acc, [role]: [...acc[role], node]}
       : {...acc, [role]: [node]}
-  }, {})
+  }, [])
 }
 
 function logRoles(container) {

From 22dbce9561c7ec345cfc15f1fcfea2f80132cfa4 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 02:06:14 -0400
Subject: [PATCH 14/32] Fixed bug with node selectors on specificity > 0 nodes

Nodes that required greater specificity (ie input[type="radio"] is role
radio, not the default textbox) where not getting their roles set
correctly.

Moved getImplicitAriaRole from src/queries/role to src/role-helpers
---
 src/__tests__/role-helpers.js | 15 ++++++++++++++-
 src/queries/role.js           | 12 +-----------
 src/role-helpers.js           | 34 +++++++++++++++++++++++++---------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 8af32175..463b2f51 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -29,8 +29,11 @@ function setup() {
     </table>
 
     <form data-testid='a-form'>
+      <input type='radio' data-testid='a-radio-1' />
+      <input type='radio' data-testid='a-radio-2' />
       <input type='text' data-testid='a-input-1' />
       <input type='text' data-testid='a-input-2' />
+      <textarea data-testid='a-textarea'></textarea>
     </form>
 
     <ul data-testid='b-list'>
@@ -60,8 +63,11 @@ function setup() {
   const td2 = getByTestId('a-cell-2')
   const td3 = getByTestId('a-cell-3')
   const form = getByTestId('a-form')
+  const radio = getByTestId('a-radio-1')
+  const radio2 = getByTestId('a-radio-2')
   const input = getByTestId('a-input-1')
   const input2 = getByTestId('a-input-2')
+  const textarea = getByTestId('a-textarea')
 
   return {
     section,
@@ -83,8 +89,11 @@ function setup() {
     td2,
     td3,
     form,
+    radio,
+    radio2,
     input,
     input2,
+    textarea,
   }
 }
 
@@ -109,14 +118,18 @@ test('getRoles returns expected roles for various dom nodes', () => {
     td2,
     td3,
     form,
+    radio,
+    radio2,
     input,
     input2,
+    textarea,
   } = setup()
 
   expect(getRoles(section)).toEqual({
     region: [section],
     heading: [h1, h2, h3],
     navigation: [nav],
+    radio: [radio, radio2],
     article: [article],
     list: [aUl, bUl],
     listitem: [aLi1, aLi2, bLi1, bLi2],
@@ -124,7 +137,7 @@ test('getRoles returns expected roles for various dom nodes', () => {
     row: [tr],
     cell: [td1, td2, td3],
     form: [form],
-    textbox: [input, input2],
+    textbox: [input, input2, textarea],
     rowgroup: [tbody],
   })
 })
diff --git a/src/queries/role.js b/src/queries/role.js
index e5a7fd5a..efa34be4 100644
--- a/src/queries/role.js
+++ b/src/queries/role.js
@@ -1,4 +1,4 @@
-import {elementRoleList} from '../role-helpers'
+import {getImplicitAriaRole} from '../role-helpers'
 import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils'
 
 function queryAllByRole(
@@ -9,16 +9,6 @@ function queryAllByRole(
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
 
-  function getImplicitAriaRole(currentNode) {
-    for (const {selector, roles} of elementRoleList) {
-      if (currentNode.matches(selector)) {
-        return [...roles]
-      }
-    }
-
-    return []
-  }
-
   return Array.from(container.querySelectorAll('*')).filter(node => {
     const isRoleSpecifiedExplicitly = node.hasAttribute('role')
 
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 0d3f5c73..cf577b26 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -1,6 +1,22 @@
 import {elementRoles} from 'aria-query'
 import {debugDOM} from './query-helpers'
 
+const elementRoleList = buildElementRoleList(elementRoles)
+const elementRoleMap = elementRoleList.reduce(
+  (acc, {selector, roles}) => ({...acc, [selector]: roles}),
+  {},
+)
+
+function getImplicitAriaRole(currentNode) {
+  for (const {selector, roles} of elementRoleList) {
+    if (currentNode.matches(selector)) {
+      return [...roles]
+    }
+  }
+
+  return []
+}
+
 function buildElementRoleList(elementRolesMap) {
   function makeElementSelector({name, attributes = []}) {
     return `${name}${attributes
@@ -35,12 +51,6 @@ function buildElementRoleList(elementRolesMap) {
   return result.sort(bySelectorSpecificity)
 }
 
-const elementRoleList = buildElementRoleList(elementRoles)
-const elementRoleMap = elementRoleList.reduce(
-  (acc, {selector, roles}) => ({...acc, [selector]: roles}),
-  {},
-)
-
 function getRoles(container) {
   function flattenDOM(node) {
     return [
@@ -53,11 +63,11 @@ function getRoles(container) {
   }
 
   return flattenDOM(container).reduce((acc, node) => {
-    const role = elementRoleMap[node.tagName.toLowerCase()]
+    const [role] = getImplicitAriaRole(node)
     return Array.isArray(acc[role])
       ? {...acc, [role]: [...acc[role], node]}
       : {...acc, [role]: [node]}
-  }, [])
+  }, {})
 }
 
 function logRoles(container) {
@@ -76,4 +86,10 @@ function logRoles(container) {
     .join('')
 }
 
-export {getRoles, logRoles, elementRoleList, elementRoleMap}
+export {
+  getRoles,
+  logRoles,
+  elementRoleList,
+  elementRoleMap,
+  getImplicitAriaRole,
+}

From 2814797fe248c899886bb2777c11fc25aa45457c Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 02:16:15 -0400
Subject: [PATCH 15/32] Added the role-helpers snapshot

---
 .../__snapshots__/role-helpers.js.snap        | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 src/__tests__/__snapshots__/role-helpers.js.snap

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
new file mode 100644
index 00000000..ef89a8b2
--- /dev/null
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`logRoles logs expected roles for various dom nodes 1`] = `
+"region ####################################
+
+<section
+  data-testid=\\"main-content\\"
+/>
+
+
+navigation ################################
+
+<nav
+  data-testid=\\"nav-bar\\"
+/>
+
+
+heading ###################################
+
+<h1
+  data-testid=\\"main-heading\\"
+/>
+
+<h2
+  data-testid=\\"sub-heading\\"
+/>
+
+<h3
+  data-testid=\\"tertiary-heading\\"
+/>
+
+
+article ###################################
+
+<article
+  data-testid=\\"featured-article\\"
+/>
+
+
+list ######################################
+
+<ul
+  data-testid=\\"a-list\\"
+/>
+
+<ul
+  data-testid=\\"b-list\\"
+/>
+
+
+listitem ##################################
+
+<li
+  data-testid=\\"a-list-item-1\\"
+/>
+
+<li
+  data-testid=\\"a-list-item-2\\"
+/>
+
+<li
+  data-testid=\\"b-list-item-1\\"
+/>
+
+<li
+  data-testid=\\"b-list-item-2\\"
+/>
+
+
+table #####################################
+
+<table
+  data-testid=\\"a-table\\"
+/>
+
+
+rowgroup ##################################
+
+<tbody
+  data-testid=\\"a-tbody\\"
+/>
+
+
+row #######################################
+
+<tr
+  data-testid=\\"a-row\\"
+/>
+
+
+cell ######################################
+
+<td
+  data-testid=\\"a-cell-1\\"
+/>
+
+<td
+  data-testid=\\"a-cell-2\\"
+/>
+
+<td
+  data-testid=\\"a-cell-3\\"
+/>
+
+
+form ######################################
+
+<form
+  data-testid=\\"a-form\\"
+/>
+
+
+radio #####################################
+
+<input
+  data-testid=\\"a-radio-1\\"
+  type=\\"radio\\"
+/>
+
+<input
+  data-testid=\\"a-radio-2\\"
+  type=\\"radio\\"
+/>
+
+
+textbox ###################################
+
+<input
+  data-testid=\\"a-input-1\\"
+  type=\\"text\\"
+/>
+
+<input
+  data-testid=\\"a-input-2\\"
+  type=\\"text\\"
+/>
+
+<textarea
+  data-testid=\\"a-textarea\\"
+/>
+
+
+"
+`;

From 7b5ecb1f1a338d06ebefa9722ce5d409aa952113 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 02:41:24 -0400
Subject: [PATCH 16/32] Added basic test coverage for getImplicitAriaRole

---
 src/__tests__/role-helpers.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 463b2f51..9f6a154e 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -1,5 +1,4 @@
-/* eslint-disable no-control-regex */
-import {getRoles, logRoles} from '../role-helpers'
+import {getRoles, logRoles, getImplicitAriaRole} from '../role-helpers'
 import {render} from './helpers/test-utils'
 
 function setup() {
@@ -151,3 +150,13 @@ test('logRoles logs expected roles for various dom nodes', () => {
   //console.log(output);
   expect(output).toMatchSnapshot()
 })
+
+test('getImplicitAriaRole returns expected roles for various dom nodes', () => {
+  const {section, h1, form, radio, input} = setup()
+
+  expect(getImplicitAriaRole(section)).toEqual(['region'])
+  expect(getImplicitAriaRole(h1)).toEqual(['heading'])
+  expect(getImplicitAriaRole(form)).toEqual(['form'])
+  expect(getImplicitAriaRole(radio)).toEqual(['radio'])
+  expect(getImplicitAriaRole(input)).toEqual(['textbox'])
+})

From e96cbbd5bcd47671e9516aa21b0959d2233b736c Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 03:21:42 -0400
Subject: [PATCH 17/32] Removed un-needed branch

Also gives 100% branch coverage
---
 src/__tests__/role-helpers.js | 2 +-
 src/role-helpers.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 9f6a154e..2817e51b 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -11,7 +11,7 @@ function setup() {
   <h3 data-testid='tertiary-heading'>Tertiary Heading</h3>
   
   <article data-testid='featured-article'>
-  
+
     <ul data-testid='a-list'>
       <li data-testid='a-list-item-1'>Item 1</li>
       <li data-testid='a-list-item-2'>Item 2</li>
diff --git a/src/role-helpers.js b/src/role-helpers.js
index cf577b26..0d3f039c 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -56,7 +56,7 @@ function getRoles(container) {
     return [
       node,
       ...Array.from(node.children).reduce(
-        (acc, child) => (child.tagName ? [...acc, ...flattenDOM(child)] : acc),
+        (acc, child) => [...acc, ...flattenDOM(child)],
         [],
       ),
     ]

From afd42c0363e04c06e95f91cf353a6b5337181f8f Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 03:33:10 -0400
Subject: [PATCH 18/32] Minor: Added a cleanup afterEach test

---
 src/__tests__/role-helpers.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 2817e51b..13c08339 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -1,5 +1,7 @@
 import {getRoles, logRoles, getImplicitAriaRole} from '../role-helpers'
-import {render} from './helpers/test-utils'
+import {render, cleanup} from './helpers/test-utils'
+
+afterEach(cleanup)
 
 function setup() {
   const {getByTestId} = render(`

From 76c2d3fd3e0a92e90e66164dd2405c160794df1e Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sat, 15 Jun 2019 04:08:14 -0400
Subject: [PATCH 19/32] Removed unneeded elementRoleMap

elementRoleMap was useful before getRoles was refactored, but is no
longer being used.
---
 src/role-helpers.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index 0d3f039c..40845ce1 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -2,10 +2,6 @@ import {elementRoles} from 'aria-query'
 import {debugDOM} from './query-helpers'
 
 const elementRoleList = buildElementRoleList(elementRoles)
-const elementRoleMap = elementRoleList.reduce(
-  (acc, {selector, roles}) => ({...acc, [selector]: roles}),
-  {},
-)
 
 function getImplicitAriaRole(currentNode) {
   for (const {selector, roles} of elementRoleList) {
@@ -86,10 +82,4 @@ function logRoles(container) {
     .join('')
 }
 
-export {
-  getRoles,
-  logRoles,
-  elementRoleList,
-  elementRoleMap,
-  getImplicitAriaRole,
-}
+export {getRoles, logRoles, elementRoleList, getImplicitAriaRole}

From a5a81c8f8b15afa7f219bb3489dd21872f975c22 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Mon, 17 Jun 2019 00:41:19 -0400
Subject: [PATCH 20/32] getRoles now handles muultiple implicit roles

getRoles no longer assumes one implicit role for a given tag.

getImplicitAriaRole was renamed to getImplicitAriaRoles

Added a tag (menuitem) that has multiple imlicit roles to test case.
---
 .../__snapshots__/role-helpers.js.snap        | 22 +++++++++++++
 src/__tests__/role-helpers.js                 | 33 ++++++++++++++-----
 src/queries/role.js                           |  4 +--
 src/role-helpers.js                           | 16 +++++----
 4 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index ef89a8b2..82c675db 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -37,6 +37,28 @@ article ###################################
 />
 
 
+command ###################################
+
+<menuitem
+  data-testid=\\"a-menuitem-1\\"
+/>
+
+<menuitem
+  data-testid=\\"a-menuitem-2\\"
+/>
+
+
+menuitem ##################################
+
+<menuitem
+  data-testid=\\"a-menuitem-1\\"
+/>
+
+<menuitem
+  data-testid=\\"a-menuitem-2\\"
+/>
+
+
 list ######################################
 
 <ul
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 13c08339..5baba6d9 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -1,4 +1,4 @@
-import {getRoles, logRoles, getImplicitAriaRole} from '../role-helpers'
+import {getRoles, logRoles, getImplicitAriaRoles} from '../role-helpers'
 import {render, cleanup} from './helpers/test-utils'
 
 afterEach(cleanup)
@@ -11,8 +11,15 @@ function setup() {
   <h1 data-testid='main-heading'>Main Heading</h1>
   <h2 data-testid='sub-heading'>Sub Heading</h2>
   <h3 data-testid='tertiary-heading'>Tertiary Heading</h3>
-  
+
   <article data-testid='featured-article'>
+    <!-- menuitem is currently deprecated, but is the only 
+         tag currently that aria-query returns multiple roles for
+         (roles: command, menuitem).
+         It's used here in case a future tag also has multiple 
+         roles -->
+    <menuitem data-testid='a-menuitem-1'>1</menuitem> 
+    <menuitem data-testid='a-menuitem-2'>2</menuitem>
 
     <ul data-testid='a-list'>
       <li data-testid='a-list-item-1'>Item 1</li>
@@ -51,6 +58,8 @@ function setup() {
   const h3 = getByTestId('tertiary-heading')
   const nav = getByTestId('nav-bar')
   const article = getByTestId('featured-article')
+  const menuItem = getByTestId('a-menuitem-1')
+  const menuItem2 = getByTestId('a-menuitem-2')
   const aUl = getByTestId('a-list')
   const aLi1 = getByTestId('a-list-item-1')
   const aLi2 = getByTestId('a-list-item-2')
@@ -77,6 +86,8 @@ function setup() {
     h3,
     nav,
     article,
+    menuItem,
+    menuItem2,
     aUl,
     aLi1,
     aLi2,
@@ -106,6 +117,8 @@ test('getRoles returns expected roles for various dom nodes', () => {
     h3,
     nav,
     article,
+    menuItem,
+    menuItem2,
     aUl,
     aLi1,
     aLi2,
@@ -140,6 +153,8 @@ test('getRoles returns expected roles for various dom nodes', () => {
     form: [form],
     textbox: [input, input2, textarea],
     rowgroup: [tbody],
+    command: [menuItem, menuItem2],
+    menuitem: [menuItem, menuItem2],
   })
 })
 
@@ -149,16 +164,16 @@ test('logRoles logs expected roles for various dom nodes', () => {
 
   // If the snapshot needs to be updated, uncomment the console.log
   // and take a look at the output to make sure it still looks good
-  //console.log(output);
+  // console.log(output);
   expect(output).toMatchSnapshot()
 })
 
-test('getImplicitAriaRole returns expected roles for various dom nodes', () => {
+test('getImplicitAriaRoles returns expected roles for various dom nodes', () => {
   const {section, h1, form, radio, input} = setup()
 
-  expect(getImplicitAriaRole(section)).toEqual(['region'])
-  expect(getImplicitAriaRole(h1)).toEqual(['heading'])
-  expect(getImplicitAriaRole(form)).toEqual(['form'])
-  expect(getImplicitAriaRole(radio)).toEqual(['radio'])
-  expect(getImplicitAriaRole(input)).toEqual(['textbox'])
+  expect(getImplicitAriaRoles(section)).toEqual(['region'])
+  expect(getImplicitAriaRoles(h1)).toEqual(['heading'])
+  expect(getImplicitAriaRoles(form)).toEqual(['form'])
+  expect(getImplicitAriaRoles(radio)).toEqual(['radio'])
+  expect(getImplicitAriaRoles(input)).toEqual(['textbox'])
 })
diff --git a/src/queries/role.js b/src/queries/role.js
index efa34be4..45474211 100644
--- a/src/queries/role.js
+++ b/src/queries/role.js
@@ -1,4 +1,4 @@
-import {getImplicitAriaRole} from '../role-helpers'
+import {getImplicitAriaRoles} from '../role-helpers'
 import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils'
 
 function queryAllByRole(
@@ -16,7 +16,7 @@ function queryAllByRole(
       return matcher(node.getAttribute('role'), node, role, matchNormalizer)
     }
 
-    const implicitRoles = getImplicitAriaRole(node)
+    const implicitRoles = getImplicitAriaRoles(node)
 
     return implicitRoles.some(implicitRole =>
       matcher(implicitRole, node, role, matchNormalizer),
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 40845ce1..36f3bacc 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -3,7 +3,7 @@ import {debugDOM} from './query-helpers'
 
 const elementRoleList = buildElementRoleList(elementRoles)
 
-function getImplicitAriaRole(currentNode) {
+function getImplicitAriaRoles(currentNode) {
   for (const {selector, roles} of elementRoleList) {
     if (currentNode.matches(selector)) {
       return [...roles]
@@ -59,10 +59,14 @@ function getRoles(container) {
   }
 
   return flattenDOM(container).reduce((acc, node) => {
-    const [role] = getImplicitAriaRole(node)
-    return Array.isArray(acc[role])
-      ? {...acc, [role]: [...acc[role], node]}
-      : {...acc, [role]: [node]}
+    const roles = getImplicitAriaRoles(node)
+    return roles.reduce(
+      (rolesAcc, role) =>
+        Array.isArray(rolesAcc[role])
+          ? {...rolesAcc, [role]: [...rolesAcc[role], node]}
+          : {...rolesAcc, [role]: [node]},
+      acc,
+    )
   }, {})
 }
 
@@ -82,4 +86,4 @@ function logRoles(container) {
     .join('')
 }
 
-export {getRoles, logRoles, elementRoleList, getImplicitAriaRole}
+export {getRoles, logRoles, elementRoleList, getImplicitAriaRoles}

From 6ad8ef9b4ea201719000fc26b3e9f121558cadc5 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Mon, 17 Jun 2019 23:27:18 -0400
Subject: [PATCH 21/32] Added npm package jest-serializer-ansi

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index a4d0c662..045e16ab 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "dtslint": "^0.7.7",
     "jest-dom": "^3.4.0",
     "jest-in-case": "^1.0.2",
+    "jest-serializer-ansi": "^1.0.3",
     "kcd-scripts": "^1.4.0"
   },
   "eslintConfig": {

From 02ab1b907bb55fd82a95ffea3910b37fe7af5c9d Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Mon, 17 Jun 2019 23:28:19 -0400
Subject: [PATCH 22/32] Snapshot now uses jest-serilizer-ansi

Allows us to strip the control characters that debugDOM embeds to change
text colors on the console.
---
 .../__snapshots__/role-helpers.js.snap        | 176 +++++++++---------
 src/__tests__/role-helpers.js                 |   3 +
 src/role-helpers.js                           |   1 +
 3 files changed, 92 insertions(+), 88 deletions(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index 82c675db..7d715caa 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -3,163 +3,163 @@
 exports[`logRoles logs expected roles for various dom nodes 1`] = `
 "region ####################################
 
-<section
-  data-testid=\\"main-content\\"
-/>
+<section
+  data-testid="main-content"
+/>
 
 
 navigation ################################
 
-<nav
-  data-testid=\\"nav-bar\\"
-/>
+<nav
+  data-testid="nav-bar"
+/>
 
 
 heading ###################################
 
-<h1
-  data-testid=\\"main-heading\\"
-/>
+<h1
+  data-testid="main-heading"
+/>
 
-<h2
-  data-testid=\\"sub-heading\\"
-/>
+<h2
+  data-testid="sub-heading"
+/>
 
-<h3
-  data-testid=\\"tertiary-heading\\"
-/>
+<h3
+  data-testid="tertiary-heading"
+/>
 
 
 article ###################################
 
-<article
-  data-testid=\\"featured-article\\"
-/>
+<article
+  data-testid="featured-article"
+/>
 
 
 command ###################################
 
-<menuitem
-  data-testid=\\"a-menuitem-1\\"
-/>
+<menuitem
+  data-testid="a-menuitem-1"
+/>
 
-<menuitem
-  data-testid=\\"a-menuitem-2\\"
-/>
+<menuitem
+  data-testid="a-menuitem-2"
+/>
 
 
 menuitem ##################################
 
-<menuitem
-  data-testid=\\"a-menuitem-1\\"
-/>
+<menuitem
+  data-testid="a-menuitem-1"
+/>
 
-<menuitem
-  data-testid=\\"a-menuitem-2\\"
-/>
+<menuitem
+  data-testid="a-menuitem-2"
+/>
 
 
 list ######################################
 
-<ul
-  data-testid=\\"a-list\\"
-/>
+<ul
+  data-testid="a-list"
+/>
 
-<ul
-  data-testid=\\"b-list\\"
-/>
+<ul
+  data-testid="b-list"
+/>
 
 
 listitem ##################################
 
-<li
-  data-testid=\\"a-list-item-1\\"
-/>
+<li
+  data-testid="a-list-item-1"
+/>
 
-<li
-  data-testid=\\"a-list-item-2\\"
-/>
+<li
+  data-testid="a-list-item-2"
+/>
 
-<li
-  data-testid=\\"b-list-item-1\\"
-/>
+<li
+  data-testid="b-list-item-1"
+/>
 
-<li
-  data-testid=\\"b-list-item-2\\"
-/>
+<li
+  data-testid="b-list-item-2"
+/>
 
 
 table #####################################
 
-<table
-  data-testid=\\"a-table\\"
-/>
+<table
+  data-testid="a-table"
+/>
 
 
 rowgroup ##################################
 
-<tbody
-  data-testid=\\"a-tbody\\"
-/>
+<tbody
+  data-testid="a-tbody"
+/>
 
 
 row #######################################
 
-<tr
-  data-testid=\\"a-row\\"
-/>
+<tr
+  data-testid="a-row"
+/>
 
 
 cell ######################################
 
-<td
-  data-testid=\\"a-cell-1\\"
-/>
+<td
+  data-testid="a-cell-1"
+/>
 
-<td
-  data-testid=\\"a-cell-2\\"
-/>
+<td
+  data-testid="a-cell-2"
+/>
 
-<td
-  data-testid=\\"a-cell-3\\"
-/>
+<td
+  data-testid="a-cell-3"
+/>
 
 
 form ######################################
 
-<form
-  data-testid=\\"a-form\\"
-/>
+<form
+  data-testid="a-form"
+/>
 
 
 radio #####################################
 
-<input
-  data-testid=\\"a-radio-1\\"
-  type=\\"radio\\"
-/>
+<input
+  data-testid="a-radio-1"
+  type="radio"
+/>
 
-<input
-  data-testid=\\"a-radio-2\\"
-  type=\\"radio\\"
-/>
+<input
+  data-testid="a-radio-2"
+  type="radio"
+/>
 
 
 textbox ###################################
 
-<input
-  data-testid=\\"a-input-1\\"
-  type=\\"text\\"
-/>
+<input
+  data-testid="a-input-1"
+  type="text"
+/>
 
-<input
-  data-testid=\\"a-input-2\\"
-  type=\\"text\\"
-/>
+<input
+  data-testid="a-input-2"
+  type="text"
+/>
 
-<textarea
-  data-testid=\\"a-textarea\\"
-/>
+<textarea
+  data-testid="a-textarea"
+/>
 
 
 "
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 5baba6d9..edddc943 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -1,3 +1,4 @@
+import jestSerializerAnsi from 'jest-serializer-ansi'
 import {getRoles, logRoles, getImplicitAriaRoles} from '../role-helpers'
 import {render, cleanup} from './helpers/test-utils'
 
@@ -159,6 +160,8 @@ test('getRoles returns expected roles for various dom nodes', () => {
 })
 
 test('logRoles logs expected roles for various dom nodes', () => {
+  expect.addSnapshotSerializer(jestSerializerAnsi)
+
   const {section} = setup()
   const output = logRoles(section)
 
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 36f3bacc..ddc7e675 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -60,6 +60,7 @@ function getRoles(container) {
 
   return flattenDOM(container).reduce((acc, node) => {
     const roles = getImplicitAriaRoles(node)
+
     return roles.reduce(
       (rolesAcc, role) =>
         Array.isArray(rolesAcc[role])

From e4524653e4b0212063d4d2e715cf99bdb479b7c2 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Mon, 17 Jun 2019 23:29:57 -0400
Subject: [PATCH 23/32] Tests now use jest-serilizer-ansi

These tests had control characters embedded into their inline snapshots
to match output of debugDOM.  Now they're stripped out and the tests
won't fail if the colors debugDOM embeds changes.
---
 src/__tests__/element-queries.js | 72 ++++++++++++++++----------------
 src/__tests__/pretty-dom.js      | 21 ++++++----
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index d1c41bd2..303778c5 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -1,6 +1,8 @@
+import jestSerializerAnsi from 'jest-serializer-ansi'
 import {configure} from '../config'
 import {render, renderIntoDocument} from './helpers/test-utils'
 
+expect.addSnapshotSerializer(jestSerializerAnsi)
 beforeEach(() => {
   document.defaultView.Cypress = null
 })
@@ -37,60 +39,60 @@ test('get throws a useful error message', () => {
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find a label with the text of: LucyRicardo
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByPlaceholderText('LucyRicardo'))
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the placeholder text of: LucyRicardo
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
-"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]
+"Unable to find an element by: [data-testid="LucyRicardo"]
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the alt text: LucyRicardo
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the title: LucyRicardo.
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByDisplayValue('LucyRicardo'))
     .toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element with the value: LucyRicardo.
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
   expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an element by [role=LucyRicardo]
 
-<div>
-  <div />
-</div>"
+<div>
+  <div />
+</div>"
 `)
 })
 
@@ -221,13 +223,13 @@ test('label with no form control', () => {
   const {getByLabelText, queryByLabelText} = render(`<label>All alone</label>`)
   expect(queryByLabelText(/alone/)).toBeNull()
   expect(() => getByLabelText(/alone/)).toThrowErrorMatchingInlineSnapshot(`
-"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
+"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-<div>
-  <label>
-    All alone
-  </label>
-</div>"
+<div>
+  <label>
+    All alone
+  </label>
+</div>"
 `)
 })
 
@@ -235,11 +237,11 @@ test('totally empty label', () => {
   const {getByLabelText, queryByLabelText} = render(`<label />`)
   expect(queryByLabelText('')).toBeNull()
   expect(() => getByLabelText('')).toThrowErrorMatchingInlineSnapshot(`
-"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
+"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-<div>
-  <label />
-</div>"
+<div>
+  <label />
+</div>"
 `)
 })
 
diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js
index 002765b3..5acf6cf3 100644
--- a/src/__tests__/pretty-dom.js
+++ b/src/__tests__/pretty-dom.js
@@ -1,14 +1,17 @@
+import jestSerializerAnsi from 'jest-serializer-ansi'
 import {prettyDOM} from '../pretty-dom'
 import {render} from './helpers/test-utils'
 
+expect.addSnapshotSerializer(jestSerializerAnsi)
+
 test('it prints out the given DOM element tree', () => {
   const {container} = render('<div>Hello World!</div>')
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
-"<div>
-  <div>
-    Hello World!
-  </div>
-</div>"
+"<div>
+  <div>
+    Hello World!
+  </div>
+</div>"
 `)
 })
 
@@ -19,9 +22,9 @@ test('it supports truncating the output length', () => {
 
 test('it supports receiving the document element', () => {
   expect(prettyDOM(document)).toMatchInlineSnapshot(`
-"<html>
-  <head />
-  <body />
-</html>"
+"<html>
+  <head />
+  <body />
+</html>"
 `)
 })

From de5bf5c2a184ed999e80e33b7ec3f05af767b22c Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Mon, 17 Jun 2019 23:34:03 -0400
Subject: [PATCH 24/32] Switched '#' to '-' in the output of logRoles

---
 .../__snapshots__/role-helpers.js.snap        | 30 +++++++++----------
 src/role-helpers.js                           |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index 7d715caa..8b1af3f5 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`logRoles logs expected roles for various dom nodes 1`] = `
-"region ####################################
+"region ------------------------------------
 
 <section
   data-testid="main-content"
 />
 
 
-navigation ################################
+navigation --------------------------------
 
 <nav
   data-testid="nav-bar"
 />
 
 
-heading ###################################
+heading -----------------------------------
 
 <h1
   data-testid="main-heading"
@@ -30,14 +30,14 @@ heading ###################################
 />
 
 
-article ###################################
+article -----------------------------------
 
 <article
   data-testid="featured-article"
 />
 
 
-command ###################################
+command -----------------------------------
 
 <menuitem
   data-testid="a-menuitem-1"
@@ -48,7 +48,7 @@ command ###################################
 />
 
 
-menuitem ##################################
+menuitem ----------------------------------
 
 <menuitem
   data-testid="a-menuitem-1"
@@ -59,7 +59,7 @@ menuitem ##################################
 />
 
 
-list ######################################
+list --------------------------------------
 
 <ul
   data-testid="a-list"
@@ -70,7 +70,7 @@ list ######################################
 />
 
 
-listitem ##################################
+listitem ----------------------------------
 
 <li
   data-testid="a-list-item-1"
@@ -89,28 +89,28 @@ listitem ##################################
 />
 
 
-table #####################################
+table -------------------------------------
 
 <table
   data-testid="a-table"
 />
 
 
-rowgroup ##################################
+rowgroup ----------------------------------
 
 <tbody
   data-testid="a-tbody"
 />
 
 
-row #######################################
+row ---------------------------------------
 
 <tr
   data-testid="a-row"
 />
 
 
-cell ######################################
+cell --------------------------------------
 
 <td
   data-testid="a-cell-1"
@@ -125,14 +125,14 @@ cell ######################################
 />
 
 
-form ######################################
+form --------------------------------------
 
 <form
   data-testid="a-form"
 />
 
 
-radio #####################################
+radio -------------------------------------
 
 <input
   data-testid="a-radio-1"
@@ -145,7 +145,7 @@ radio #####################################
 />
 
 
-textbox ###################################
+textbox -----------------------------------
 
 <input
   data-testid="a-input-1"
diff --git a/src/role-helpers.js b/src/role-helpers.js
index ddc7e675..8ad07fcd 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -77,7 +77,7 @@ function logRoles(container) {
   return Object.entries(roles)
     .map(([role, elements]) => {
       const numDelimeters = 42 - role.length // 42 is arbitrary
-      const delimeterBar = '#'.repeat(numDelimeters)
+      const delimeterBar = '-'.repeat(numDelimeters)
       const elementsString = elements
         .map(el => debugDOM(el.cloneNode(false)))
         .join('\n\n')

From 2ecda860af4cfa0bb5e22332188b1f0e14cc7dbe Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Tue, 18 Jun 2019 12:11:43 -0400
Subject: [PATCH 25/32] role-helpers test minor change to reduce LOC

---
 src/__tests__/role-helpers.js | 79 ++++++++++++-----------------------
 1 file changed, 26 insertions(+), 53 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index edddc943..9f0ebdff 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -53,60 +53,33 @@ function setup() {
 </section>
   `)
 
-  const section = getByTestId('main-content')
-  const h1 = getByTestId('main-heading')
-  const h2 = getByTestId('sub-heading')
-  const h3 = getByTestId('tertiary-heading')
-  const nav = getByTestId('nav-bar')
-  const article = getByTestId('featured-article')
-  const menuItem = getByTestId('a-menuitem-1')
-  const menuItem2 = getByTestId('a-menuitem-2')
-  const aUl = getByTestId('a-list')
-  const aLi1 = getByTestId('a-list-item-1')
-  const aLi2 = getByTestId('a-list-item-2')
-  const bUl = getByTestId('b-list')
-  const bLi1 = getByTestId('b-list-item-1')
-  const bLi2 = getByTestId('b-list-item-2')
-  const table = getByTestId('a-table')
-  const tbody = getByTestId('a-tbody')
-  const tr = getByTestId('a-row')
-  const td1 = getByTestId('a-cell-1')
-  const td2 = getByTestId('a-cell-2')
-  const td3 = getByTestId('a-cell-3')
-  const form = getByTestId('a-form')
-  const radio = getByTestId('a-radio-1')
-  const radio2 = getByTestId('a-radio-2')
-  const input = getByTestId('a-input-1')
-  const input2 = getByTestId('a-input-2')
-  const textarea = getByTestId('a-textarea')
-
   return {
-    section,
-    h1,
-    h2,
-    h3,
-    nav,
-    article,
-    menuItem,
-    menuItem2,
-    aUl,
-    aLi1,
-    aLi2,
-    bUl,
-    bLi1,
-    bLi2,
-    table,
-    tbody,
-    tr,
-    td1,
-    td2,
-    td3,
-    form,
-    radio,
-    radio2,
-    input,
-    input2,
-    textarea,
+    section: getByTestId('main-content'),
+    h1: getByTestId('main-heading'),
+    h2: getByTestId('sub-heading'),
+    h3: getByTestId('tertiary-heading'),
+    nav: getByTestId('nav-bar'),
+    article: getByTestId('featured-article'),
+    menuItem: getByTestId('a-menuitem-1'),
+    menuItem2: getByTestId('a-menuitem-2'),
+    aUl: getByTestId('a-list'),
+    aLi1: getByTestId('a-list-item-1'),
+    aLi2: getByTestId('a-list-item-2'),
+    bUl: getByTestId('b-list'),
+    bLi1: getByTestId('b-list-item-1'),
+    bLi2: getByTestId('b-list-item-2'),
+    table: getByTestId('a-table'),
+    tbody: getByTestId('a-tbody'),
+    tr: getByTestId('a-row'),
+    td1: getByTestId('a-cell-1'),
+    td2: getByTestId('a-cell-2'),
+    td3: getByTestId('a-cell-3'),
+    form: getByTestId('a-form'),
+    radio: getByTestId('a-radio-1'),
+    radio2: getByTestId('a-radio-2'),
+    input: getByTestId('a-input-1'),
+    input2: getByTestId('a-input-2'),
+    textarea: getByTestId('a-textarea'),
   }
 }
 

From 0a87a5d7fa3b89ec92ef6e98031ca2ec30cf976e Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Tue, 18 Jun 2019 12:24:05 -0400
Subject: [PATCH 26/32] Removed elementRoleList from role-helpers export

elementRoleList was previously used by src/queries/role, but is not
longer needed since moving getImplicitAriaRoles to src/role-helpers
---
 src/role-helpers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index 8ad07fcd..b206c0c2 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -87,4 +87,4 @@ function logRoles(container) {
     .join('')
 }
 
-export {getRoles, logRoles, elementRoleList, getImplicitAriaRoles}
+export {getRoles, logRoles, getImplicitAriaRoles}

From b9a16e1f27d4f57e53d16b992563f4b1d4097303 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Tue, 18 Jun 2019 15:37:34 -0400
Subject: [PATCH 27/32] Made public-api exports from role-helpers spcific

Only getRoles and logRoles are exported to the public api
---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 33a10a41..582b455c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,7 @@ export * from './get-node-text'
 export * from './events'
 export * from './get-queries-for-element'
 export * from './query-helpers'
-export * from './role-helpers'
+export {getRoles, logRoles} from './role-helpers'
 export * from './pretty-dom'
 export {configure} from './config'
 

From 3c5b5452069c820e6b5ea5f7f07662c6d5b96b93 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Tue, 18 Jun 2019 15:57:39 -0400
Subject: [PATCH 28/32] Minor: made testids more consistent

---
 .../__snapshots__/role-helpers.js.snap        | 12 +++++-----
 src/__tests__/role-helpers.js                 | 24 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index 8b1af3f5..f69ba2ce 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -4,36 +4,36 @@ exports[`logRoles logs expected roles for various dom nodes 1`] = `
 "region ------------------------------------
 
 <section
-  data-testid="main-content"
+  data-testid="a-section"
 />
 
 
 navigation --------------------------------
 
 <nav
-  data-testid="nav-bar"
+  data-testid="a-nav"
 />
 
 
 heading -----------------------------------
 
 <h1
-  data-testid="main-heading"
+  data-testid="a-h1"
 />
 
 <h2
-  data-testid="sub-heading"
+  data-testid="a-h2"
 />
 
 <h3
-  data-testid="tertiary-heading"
+  data-testid="a-h3"
 />
 
 
 article -----------------------------------
 
 <article
-  data-testid="featured-article"
+  data-testid="a-article"
 />
 
 
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 9f0ebdff..fae0ec26 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -6,14 +6,14 @@ afterEach(cleanup)
 
 function setup() {
   const {getByTestId} = render(`
-<section data-testid='main-content'>
-  <nav data-testid='nav-bar' />
+<section data-testid='a-section'>
+  <nav data-testid='a-nav' />
   
-  <h1 data-testid='main-heading'>Main Heading</h1>
-  <h2 data-testid='sub-heading'>Sub Heading</h2>
-  <h3 data-testid='tertiary-heading'>Tertiary Heading</h3>
+  <h1 data-testid='a-h1'>Main Heading</h1>
+  <h2 data-testid='a-h2'>Sub Heading</h2>
+  <h3 data-testid='a-h3'>Tertiary Heading</h3>
 
-  <article data-testid='featured-article'>
+  <article data-testid='a-article'>
     <!-- menuitem is currently deprecated, but is the only 
          tag currently that aria-query returns multiple roles for
          (roles: command, menuitem).
@@ -54,12 +54,12 @@ function setup() {
   `)
 
   return {
-    section: getByTestId('main-content'),
-    h1: getByTestId('main-heading'),
-    h2: getByTestId('sub-heading'),
-    h3: getByTestId('tertiary-heading'),
-    nav: getByTestId('nav-bar'),
-    article: getByTestId('featured-article'),
+    section: getByTestId('a-section'),
+    h1: getByTestId('a-h1'),
+    h2: getByTestId('a-h2'),
+    h3: getByTestId('a-h3'),
+    nav: getByTestId('a-nav'),
+    article: getByTestId('a-article'),
     menuItem: getByTestId('a-menuitem-1'),
     menuItem2: getByTestId('a-menuitem-2'),
     aUl: getByTestId('a-list'),

From f148198088a528f6f18a54e1d629fa78f28f88d8 Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Tue, 18 Jun 2019 16:00:34 -0400
Subject: [PATCH 29/32] Minor: '\n' handling is more consistent in logRoles

---
 src/__tests__/__snapshots__/role-helpers.js.snap | 5 +----
 src/role-helpers.js                              | 4 ++--
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index f69ba2ce..e6311371 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -159,8 +159,5 @@ textbox -----------------------------------
 
 <textarea
   data-testid="a-textarea"
-/>
-
-
-"
+/>"
 `;
diff --git a/src/role-helpers.js b/src/role-helpers.js
index b206c0c2..04286c0e 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -82,9 +82,9 @@ function logRoles(container) {
         .map(el => debugDOM(el.cloneNode(false)))
         .join('\n\n')
 
-      return `${role} ${delimeterBar}\n\n${elementsString}\n\n\n`
+      return `${role} ${delimeterBar}\n\n${elementsString}`
     })
-    .join('')
+    .join('\n\n\n')
 }
 
 export {getRoles, logRoles, getImplicitAriaRoles}

From 93f9530baf31ecdb848044f6272d143744107cdd Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sun, 23 Jun 2019 03:09:14 -0400
Subject: [PATCH 30/32] Added TS definitions for getRoles, logRoles

---
 typings/role-helpers.d.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 typings/role-helpers.d.ts

diff --git a/typings/role-helpers.d.ts b/typings/role-helpers.d.ts
new file mode 100644
index 00000000..6083f9c6
--- /dev/null
+++ b/typings/role-helpers.d.ts
@@ -0,0 +1,4 @@
+export function logRoles(container: HTMLElement): string
+export function getRoles(
+  container: HTMLElement,
+): {[index: string]: HTMLElement[]}

From 593c33f987bba473a3c0c89f446e8a1af604d7fd Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sun, 23 Jun 2019 21:27:02 -0400
Subject: [PATCH 31/32] Changed logRoles formatting

Switched formatting back to initial proposal to avoid potential
problems.
---
 .../__snapshots__/role-helpers.js.snap        | 62 ++++++++++---------
 src/__tests__/role-helpers.js                 |  3 -
 src/role-helpers.js                           |  7 +--
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index e6311371..16254900 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`logRoles logs expected roles for various dom nodes 1`] = `
-"region ------------------------------------
+"region:
 
 <section
   data-testid="a-section"
 />
 
-
-navigation --------------------------------
+--------------------------------------------------
+navigation:
 
 <nav
   data-testid="a-nav"
 />
 
-
-heading -----------------------------------
+--------------------------------------------------
+heading:
 
 <h1
   data-testid="a-h1"
@@ -29,15 +29,15 @@ heading -----------------------------------
   data-testid="a-h3"
 />
 
-
-article -----------------------------------
+--------------------------------------------------
+article:
 
 <article
   data-testid="a-article"
 />
 
-
-command -----------------------------------
+--------------------------------------------------
+command:
 
 <menuitem
   data-testid="a-menuitem-1"
@@ -47,8 +47,8 @@ command -----------------------------------
   data-testid="a-menuitem-2"
 />
 
-
-menuitem ----------------------------------
+--------------------------------------------------
+menuitem:
 
 <menuitem
   data-testid="a-menuitem-1"
@@ -58,8 +58,8 @@ menuitem ----------------------------------
   data-testid="a-menuitem-2"
 />
 
-
-list --------------------------------------
+--------------------------------------------------
+list:
 
 <ul
   data-testid="a-list"
@@ -69,8 +69,8 @@ list --------------------------------------
   data-testid="b-list"
 />
 
-
-listitem ----------------------------------
+--------------------------------------------------
+listitem:
 
 <li
   data-testid="a-list-item-1"
@@ -88,29 +88,29 @@ listitem ----------------------------------
   data-testid="b-list-item-2"
 />
 
-
-table -------------------------------------
+--------------------------------------------------
+table:
 
 <table
   data-testid="a-table"
 />
 
-
-rowgroup ----------------------------------
+--------------------------------------------------
+rowgroup:
 
 <tbody
   data-testid="a-tbody"
 />
 
-
-row ---------------------------------------
+--------------------------------------------------
+row:
 
 <tr
   data-testid="a-row"
 />
 
-
-cell --------------------------------------
+--------------------------------------------------
+cell:
 
 <td
   data-testid="a-cell-1"
@@ -124,15 +124,15 @@ cell --------------------------------------
   data-testid="a-cell-3"
 />
 
-
-form --------------------------------------
+--------------------------------------------------
+form:
 
 <form
   data-testid="a-form"
 />
 
-
-radio -------------------------------------
+--------------------------------------------------
+radio:
 
 <input
   data-testid="a-radio-1"
@@ -144,8 +144,8 @@ radio -------------------------------------
   type="radio"
 />
 
-
-textbox -----------------------------------
+--------------------------------------------------
+textbox:
 
 <input
   data-testid="a-input-1"
@@ -159,5 +159,7 @@ textbox -----------------------------------
 
 <textarea
   data-testid="a-textarea"
-/>"
+/>
+
+--------------------------------------------------"
 `;
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index fae0ec26..4ca15bd1 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -138,9 +138,6 @@ test('logRoles logs expected roles for various dom nodes', () => {
   const {section} = setup()
   const output = logRoles(section)
 
-  // If the snapshot needs to be updated, uncomment the console.log
-  // and take a look at the output to make sure it still looks good
-  // console.log(output);
   expect(output).toMatchSnapshot()
 })
 
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 04286c0e..3b9b2412 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -76,15 +76,14 @@ function logRoles(container) {
 
   return Object.entries(roles)
     .map(([role, elements]) => {
-      const numDelimeters = 42 - role.length // 42 is arbitrary
-      const delimeterBar = '-'.repeat(numDelimeters)
+      const delimeterBar = '-'.repeat(50)
       const elementsString = elements
         .map(el => debugDOM(el.cloneNode(false)))
         .join('\n\n')
 
-      return `${role} ${delimeterBar}\n\n${elementsString}`
+      return `${role}:\n\n${elementsString}\n\n${delimeterBar}`
     })
-    .join('\n\n\n')
+    .join('\n')
 }
 
 export {getRoles, logRoles, getImplicitAriaRoles}

From f95b2934ddf04a8f97ef623b064aa25d4f10267d Mon Sep 17 00:00:00 2001
From: mlasky <mlasky@nuclearhorsestudios.com>
Date: Sun, 23 Jun 2019 21:40:55 -0400
Subject: [PATCH 32/32] Fixed spelling error

---
 src/role-helpers.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index 3b9b2412..5807a206 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -76,12 +76,12 @@ function logRoles(container) {
 
   return Object.entries(roles)
     .map(([role, elements]) => {
-      const delimeterBar = '-'.repeat(50)
+      const delimiterBar = '-'.repeat(50)
       const elementsString = elements
         .map(el => debugDOM(el.cloneNode(false)))
         .join('\n\n')
 
-      return `${role}:\n\n${elementsString}\n\n${delimeterBar}`
+      return `${role}:\n\n${elementsString}\n\n${delimiterBar}`
     })
     .join('\n')
 }