From 49df5e3114c820bea8a6a43d930f383be45ec282 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 5 Aug 2023 19:48:03 +0300
Subject: [PATCH 1/8] initial commit

---
 types/role-helpers.d.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/types/role-helpers.d.ts b/types/role-helpers.d.ts
index 0b5b9124..756d922b 100644
--- a/types/role-helpers.d.ts
+++ b/types/role-helpers.d.ts
@@ -1,9 +1,16 @@
-export function logRoles(container: HTMLElement): string
+export function logRoles(container: HTMLElement, options?: LogRolesOptions): string
+
+type LogRolesOptions = {
+  hidden?: boolean
+}
+
 export function getRoles(container: HTMLElement): {
   [index: string]: HTMLElement[]
 }
+
 /**
  * https://testing-library.com/docs/dom-testing-library/api-helpers#isinaccessible
  */
 export function isInaccessible(element: Element): boolean
+
 export function computeHeadingLevel(element: Element): number | undefined

From 23ac40b9ff9cdb4a72777db9a66b64733e911ef1 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 5 Aug 2023 20:14:54 +0300
Subject: [PATCH 2/8] add tests

---
 .../__snapshots__/role-helpers.js.snap        | 226 ++++++++++++++++++
 src/__tests__/role-helpers.js                 |  27 +++
 src/role-helpers.js                           |   2 +-
 3 files changed, 254 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index 4a8a1f2f..65490dcd 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -218,3 +218,229 @@ Name "":
 
 --------------------------------------------------
 `;
+
+exports[`logRoles with hidden=true outputs all elements incl. hidden ones 1`] = `
+region:
+
+Name "a region":
+<section
+  aria-label="a region"
+  data-testid="named-section"
+/>
+
+Name "":
+<div
+  aria-hidden="true"
+  data-testid="a-hidden-div-without-a-generic-role"
+  role="region"
+/>
+
+--------------------------------------------------
+link:
+
+Name "link":
+<a
+  data-testid="a-link"
+  href="http://whatever.com"
+/>
+
+--------------------------------------------------
+navigation:
+
+Name "":
+<nav
+  data-testid="a-nav"
+/>
+
+--------------------------------------------------
+heading:
+
+Name "Main Heading":
+<h1
+  data-testid="a-h1"
+/>
+
+Name "Sub Heading":
+<h2
+  data-testid="a-h2"
+/>
+
+Name "Tertiary Heading":
+<h3
+  data-testid="a-h3"
+/>
+
+--------------------------------------------------
+article:
+
+Name "":
+<article
+  data-testid="a-article"
+/>
+
+--------------------------------------------------
+command:
+
+Name "":
+<menuitem
+  data-testid="a-menuitem-1"
+/>
+
+Name "":
+<menuitem
+  data-testid="a-menuitem-2"
+/>
+
+--------------------------------------------------
+menuitem:
+
+Name "":
+<menuitem
+  data-testid="a-menuitem-1"
+/>
+
+Name "":
+<menuitem
+  data-testid="a-menuitem-2"
+/>
+
+--------------------------------------------------
+list:
+
+Name "":
+<ul
+  data-testid="a-list"
+/>
+
+Name "":
+<ul
+  data-testid="b-list"
+/>
+
+--------------------------------------------------
+listitem:
+
+Name "":
+<li
+  data-testid="a-list-item-1"
+/>
+
+Name "":
+<li
+  data-testid="a-list-item-2"
+/>
+
+Name "":
+<li
+  data-testid="b-list-item-1"
+/>
+
+Name "":
+<li
+  data-testid="b-list-item-2"
+/>
+
+--------------------------------------------------
+table:
+
+Name "":
+<table
+  data-testid="a-table"
+/>
+
+--------------------------------------------------
+rowgroup:
+
+Name "":
+<tbody
+  data-testid="a-tbody"
+/>
+
+--------------------------------------------------
+row:
+
+Name "Cell 1 Cell 2 Cell 3":
+<tr
+  data-testid="a-row"
+/>
+
+--------------------------------------------------
+cell:
+
+Name "Cell 1":
+<td
+  data-testid="a-cell-1"
+/>
+
+Name "Cell 2":
+<td
+  data-testid="a-cell-2"
+/>
+
+Name "Cell 3":
+<td
+  data-testid="a-cell-3"
+/>
+
+--------------------------------------------------
+form:
+
+Name "a form":
+<form
+  aria-label="a form"
+  data-testid="named-form"
+/>
+
+--------------------------------------------------
+radio:
+
+Name "":
+<input
+  data-testid="a-radio-1"
+  type="radio"
+/>
+
+Name "":
+<input
+  data-testid="a-radio-2"
+  type="radio"
+/>
+
+--------------------------------------------------
+textbox:
+
+Name "":
+<input
+  data-testid="a-input-1"
+  type="text"
+/>
+
+Name "":
+<input
+  data-testid="a-input-2"
+  type="text"
+/>
+
+Name "":
+<textarea
+  data-testid="a-textarea"
+/>
+
+--------------------------------------------------
+term:
+
+Name "":
+<dt
+  data-testid="a-dt"
+/>
+
+--------------------------------------------------
+definition:
+
+Name "":
+<dd
+  data-testid="a-dd"
+/>
+
+--------------------------------------------------
+`;
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index aadc1dc2..c69fc486 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -3,6 +3,7 @@ import {
   logRoles,
   getImplicitAriaRoles,
   isInaccessible,
+  prettyRoles,
 } from '../role-helpers'
 import {render} from './helpers/test-utils'
 
@@ -23,6 +24,15 @@ function setup() {
 
   <nav data-testid='a-nav' />
   
+  <!-- div without an explicit role is given a "generic" role by default -->
+  <div aria-hidden="true" data-testid="a-hidden-div-with-a-generic-role">
+    <span>Some hidden content</span>
+  </div>
+  
+  <div aria-hidden="true" data-testid="a-hidden-div-without-a-generic-role" role="region">
+    <span>Some hidden content</span>
+  </div>
+  
   <h1 data-testid='a-h1'>Main Heading</h1>
   <h2 data-testid='a-h2'>Sub Heading</h2>
   <h3 data-testid='a-h3'>Tertiary Heading</h3>
@@ -107,6 +117,10 @@ function setup() {
     dt: getByTestId('a-dt'),
     dd: getByTestId('a-dd'),
     header: getByTestId('a-header'),
+    hiddenDivWithGenericRole: getByTestId('a-hidden-div-with-a-generic-role'),
+    hiddenDivWithoutGenericRole: getByTestId(
+      'a-hidden-div-without-a-generic-role',
+    ),
   }
 }
 
@@ -169,6 +183,11 @@ test('getRoles returns expected roles for various dom nodes', () => {
   })
 })
 
+test('prettyRoles ignores elements with a "generic" role', () => {
+  const {hiddenDivWithGenericRole} = setup()
+  expect(prettyRoles(hiddenDivWithGenericRole)).toEqual('')
+})
+
 test('logRoles calls console.log with output from prettyRoles', () => {
   const {namedSection} = setup()
   logRoles(namedSection)
@@ -176,6 +195,14 @@ test('logRoles calls console.log with output from prettyRoles', () => {
   expect(console.log.mock.calls[0][0]).toMatchSnapshot()
 })
 
+test('logRoles with hidden=true outputs all elements incl. hidden ones', () => {
+  const {namedSection} = setup()
+  logRoles(namedSection, {hidden: true})
+
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchSnapshot()
+})
+
 test('getImplicitAriaRoles returns expected roles for various dom nodes', () => {
   const {namedSection, h1, unnamedForm, radio, input} = setup()
 
diff --git a/src/role-helpers.js b/src/role-helpers.js
index bc134f27..bcfa831d 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -186,7 +186,7 @@ function getRoles(container, {hidden = false} = {}) {
     }, {})
 }
 
-function prettyRoles(dom, {hidden, includeDescription}) {
+function prettyRoles(dom, {hidden = false, includeDescription = false} = {}) {
   const roles = getRoles(dom, {hidden})
   // We prefer to skip generic role, we don't recommend it
   return Object.entries(roles)

From 8f96e7f4ed9acb60c0835d6edf8e304a8f37d4ab Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 5 Aug 2023 20:21:02 +0300
Subject: [PATCH 3/8] prettier

---
 types/role-helpers.d.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/types/role-helpers.d.ts b/types/role-helpers.d.ts
index 756d922b..95c64bdc 100644
--- a/types/role-helpers.d.ts
+++ b/types/role-helpers.d.ts
@@ -1,4 +1,7 @@
-export function logRoles(container: HTMLElement, options?: LogRolesOptions): string
+export function logRoles(
+  container: HTMLElement,
+  options?: LogRolesOptions,
+): string
 
 type LogRolesOptions = {
   hidden?: boolean

From 83cc701b8f9d5f56d7f6154a34fa51ed9b3bf8b6 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 5 Aug 2023 20:23:59 +0300
Subject: [PATCH 4/8] cleanup

---
 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 bcfa831d..3f7d776d 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -186,7 +186,7 @@ function getRoles(container, {hidden = false} = {}) {
     }, {})
 }
 
-function prettyRoles(dom, {hidden = false, includeDescription = false} = {}) {
+function prettyRoles(dom, {hidden, includeDescription} = {}) {
   const roles = getRoles(dom, {hidden})
   // We prefer to skip generic role, we don't recommend it
   return Object.entries(roles)

From bbb0959660584e486b58c5ba759f80c219a7cc19 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sun, 6 Aug 2023 13:08:17 +0300
Subject: [PATCH 5/8] CR

---
 .../__snapshots__/role-helpers.js.snap        | 21 +++++++++++++++++++
 src/__tests__/role-helpers.js                 | 21 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
index 65490dcd..a979ef36 100644
--- a/src/__tests__/__snapshots__/role-helpers.js.snap
+++ b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -235,6 +235,27 @@ Name "":
   role="region"
 />
 
+Name "":
+<div
+  data-testid="a-hidden-div-without-a-generic-role-and-with-hidden-attribute"
+  hidden=""
+  role="region"
+/>
+
+Name "":
+<div
+  data-testid="a-hidden-div-without-a-generic-role-and-with-display-none"
+  role="region"
+  style="display: none"
+/>
+
+Name "":
+<div
+  data-testid="a-hidden-div-without-a-generic-role-and-with-visibility-hidden"
+  role="region"
+  style="visibility: hidden"
+/>
+
 --------------------------------------------------
 link:
 
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index c69fc486..b2a5ad4e 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -33,6 +33,18 @@ function setup() {
     <span>Some hidden content</span>
   </div>
   
+  <div data-testid="a-hidden-div-without-a-generic-role-and-with-hidden-attribute" role="region" hidden>
+    <span>Some hidden content</span>
+  </div>
+  
+  <div data-testid="a-hidden-div-without-a-generic-role-and-with-display-none" role="region" style="display: none">
+    <span>Some hidden content</span>
+  </div>
+  
+  <div data-testid="a-hidden-div-without-a-generic-role-and-with-visibility-hidden" role="region" style="visibility: hidden">
+    <span>Some hidden content</span>
+  </div>
+  
   <h1 data-testid='a-h1'>Main Heading</h1>
   <h2 data-testid='a-h2'>Sub Heading</h2>
   <h3 data-testid='a-h3'>Tertiary Heading</h3>
@@ -121,6 +133,15 @@ function setup() {
     hiddenDivWithoutGenericRole: getByTestId(
       'a-hidden-div-without-a-generic-role',
     ),
+    hiddenDivWithoutGenericRoleAndWithHiddenAttribute: getByTestId(
+      'a-hidden-div-without-a-generic-role-and-with-hidden-attribute',
+    ),
+    hiddenDivWithoutGenericRoleAndWithDisplayNone: getByTestId(
+      'a-hidden-div-without-a-generic-role-and-with-display-none',
+    ),
+    hiddenDivWithoutGenericRoleAndWithVisibilityHidden: getByTestId(
+      'a-hidden-div-without-a-generic-role-and-with-visibility-hidden',
+    ),
   }
 }
 

From 82436fa1955edf9bd5d78ab91a107fce9e1ac964 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 12 Aug 2023 16:09:34 +0300
Subject: [PATCH 6/8] revert(role-helpers.d.ts): rollback changes - CR

---
 types/role-helpers.d.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/types/role-helpers.d.ts b/types/role-helpers.d.ts
index 95c64bdc..0b5b9124 100644
--- a/types/role-helpers.d.ts
+++ b/types/role-helpers.d.ts
@@ -1,19 +1,9 @@
-export function logRoles(
-  container: HTMLElement,
-  options?: LogRolesOptions,
-): string
-
-type LogRolesOptions = {
-  hidden?: boolean
-}
-
+export function logRoles(container: HTMLElement): string
 export function getRoles(container: HTMLElement): {
   [index: string]: HTMLElement[]
 }
-
 /**
  * https://testing-library.com/docs/dom-testing-library/api-helpers#isinaccessible
  */
 export function isInaccessible(element: Element): boolean
-
 export function computeHeadingLevel(element: Element): number | undefined

From 5549cb962d24676ae6dbaab891d773a15bbeb3de Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 12 Aug 2023 16:31:17 +0300
Subject: [PATCH 7/8] revert(role-helpers.d.ts): rollback changes - CR

---
 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 b2a5ad4e..92ef098c 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -206,7 +206,7 @@ test('getRoles returns expected roles for various dom nodes', () => {
 
 test('prettyRoles ignores elements with a "generic" role', () => {
   const {hiddenDivWithGenericRole} = setup()
-  expect(prettyRoles(hiddenDivWithGenericRole)).toEqual('')
+  expect(prettyRoles(hiddenDivWithGenericRole, {})).toEqual('')
 })
 
 test('logRoles calls console.log with output from prettyRoles', () => {
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 3f7d776d..bc134f27 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -186,7 +186,7 @@ function getRoles(container, {hidden = false} = {}) {
     }, {})
 }
 
-function prettyRoles(dom, {hidden, includeDescription} = {}) {
+function prettyRoles(dom, {hidden, includeDescription}) {
   const roles = getRoles(dom, {hidden})
   // We prefer to skip generic role, we don't recommend it
   return Object.entries(roles)

From 95e4b7ca2682072113e651194e551cdd485f7305 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 12 Aug 2023 16:32:36 +0300
Subject: [PATCH 8/8] Update src/__tests__/role-helpers.js

Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
---
 src/__tests__/role-helpers.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 92ef098c..81793ec5 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -24,7 +24,6 @@ function setup() {
 
   <nav data-testid='a-nav' />
   
-  <!-- div without an explicit role is given a "generic" role by default -->
   <div aria-hidden="true" data-testid="a-hidden-div-with-a-generic-role">
     <span>Some hidden content</span>
   </div>