test: document how to name elements

Author: eps1lon

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

@@ -1,7 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`logRoles calls console.log with output from prettyRoles 1`] = `
-"link:
+"region:
+
+Name "a region":
+<section
+  aria-label="a region"
+  data-testid="named-section"
+/>
+
+--------------------------------------------------
+link:
 
 Name "link":
 <a
@@ -147,6 +156,15 @@ Name "Cell 3":
   data-testid="a-cell-3"
 />
 
+--------------------------------------------------
+form:
+
+Name "a form":
+<form
+  aria-label="a form"
+  data-testid="named-form"
+/>
+
 --------------------------------------------------
 radio:
 

src/__tests__/role-helpers.js

@@ -16,7 +16,7 @@ afterEach(() => {
 
 function setup() {
   const {getByTestId} = render(`
-<section data-testid='a-section'>
+<section aria-label="a region" data-testid='named-section'>
   <a href="http://whatever.com" data-testid="a-link">link</a>
   <a>invalid link</a>
 
@@ -50,7 +50,7 @@ function setup() {
       </tbody>
     </table>
 
-    <form data-testid='a-form'>
+    <form aria-label="a form" data-testid='named-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' />
@@ -62,12 +62,16 @@ function setup() {
       <li data-testid='b-list-item-1'>Item 1</li>
       <li data-testid='b-list-item-2'>Item 2</li>
     </ul>
+
+    <form data-testid="a-form" />
+    <section data-testid="a-section" />
    </article>
 </section>
   `)
 
   return {
     unnamedSection: getByTestId('a-section'),
+    namedSection: getByTestId('named-section'),
     anchor: getByTestId('a-link'),
     h1: getByTestId('a-h1'),
     h2: getByTestId('a-h2'),
@@ -89,6 +93,7 @@ function setup() {
     td2: getByTestId('a-cell-2'),
     td3: getByTestId('a-cell-3'),
     unnamedForm: getByTestId('a-form'),
+    namedForm: getByTestId('named-form'),
     radio: getByTestId('a-radio-1'),
     radio2: getByTestId('a-radio-2'),
     input: getByTestId('a-input-1'),
@@ -99,7 +104,6 @@ function setup() {
 
 test('getRoles returns expected roles for various dom nodes', () => {
   const {
-    unnamedSection,
     anchor,
     h1,
     h2,
@@ -125,9 +129,11 @@ test('getRoles returns expected roles for various dom nodes', () => {
     input,
     input2,
     textarea,
+    namedSection,
+    namedForm,
   } = setup()
 
-  expect(getRoles(unnamedSection)).toEqual({
+  expect(getRoles(namedSection)).toEqual({
     link: [anchor],
     heading: [h1, h2, h3],
     navigation: [nav],
@@ -142,20 +148,22 @@ test('getRoles returns expected roles for various dom nodes', () => {
     rowgroup: [tbody],
     command: [menuItem, menuItem2],
     menuitem: [menuItem, menuItem2],
+    form: [namedForm],
+    region: [namedSection],
   })
 })
 
 test('logRoles calls console.log with output from prettyRoles', () => {
-  const {unnamedSection} = setup()
-  logRoles(unnamedSection)
+  const {namedSection} = setup()
+  logRoles(namedSection)
   expect(console.log).toHaveBeenCalledTimes(1)
   expect(console.log.mock.calls[0][0]).toMatchSnapshot()
 })
 
 test('getImplicitAriaRoles returns expected roles for various dom nodes', () => {
-  const {unnamedSection, h1, unnamedForm, radio, input} = setup()
+  const {namedSection, h1, unnamedForm, radio, input} = setup()
 
-  expect(getImplicitAriaRoles(unnamedSection)).toEqual([])
+  expect(getImplicitAriaRoles(namedSection)).toEqual(['region'])
   expect(getImplicitAriaRoles(h1)).toEqual(['heading'])
   expect(getImplicitAriaRoles(unnamedForm)).toEqual([])
   expect(getImplicitAriaRoles(radio)).toEqual(['radio'])