Add more element tests, and virtual roles

.eslintrc.js

@@ -18,6 +18,14 @@ module.exports = {
       { ignoreRestSiblings: true },
     ],
     '@typescript-eslint/ban-ts-comment': 'warn',
+    'no-irregular-whitespace': [
+      'error',
+      {
+        skipStrings: true,
+        skipTemplates: true,
+        skipJSXText: true,
+      },
+    ],
   },
   env: {
     browser: true,

README.md

@@ -124,15 +124,21 @@ The toolkit follows standardized role definitions, with some customizations to p
 Specifically, the toolkit applies the following custom roles:
 
 - `abbr`: Mapped to `Abbr`
+- `audio`: Mapped to `Audio`
+- `canvas`: Mapped to `Canvas`
 - `details`: Mapped to `Details`
 - `dd`: Mapped to `DescriptionListDetails`
 - `dl`: Mapped to `DescriptionList`
 - `dt`: Mapped to `DescriptionListTerm`
 - `embed`: Mapped to `EmbeddedObject`
+- `figcaption`: Mapped to `Figcaption`
 - `object`: Mapped to `PluginObject`
 - `label`: Mapped to `LabelText`
 - `br`: Mapped to `LineBreak`
 - `summary`: Mapped to `DisclosureTriangle`
+- `video`: Mapped to `Video`
+
+This list is _work in progress_ and will be expanded in the future.
 
 ### `byRole` Helper
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessibility-testing-toolkit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Ivan Galiatin",
   "license": "MIT",
   "description": "A toolkit for testing accessibility",

src/elements/article.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { byRole } from '..';
 
-describe('abbr', () => {
+describe('article', () => {
   it('renders correct structure', () => {
     const { container } = render(
       <article>

src/elements/aside.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('audio', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <aside>
+        <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
+      </aside>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('complementary', [
+        byRole('paragraph', [
+          'The Rough-skinned Newt defends itself with a deadly neurotoxin.',
+        ]),
+      ])
+    );
+  });
+});

src/elements/audio-figure.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('abbr', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <figure>
+        <figcaption>Listen to the T-Rex:</figcaption>
+        <audio controls src="/media/cc0-audio/t-rex-roar.mp3">
+          <a href="/media/cc0-audio/t-rex-roar.mp3">Download audio</a>
+        </audio>
+      </figure>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('figure', [
+        byRole('Figcaption', ['Listen to the T-Rex:']),
+        byRole('Audio', [byRole('link', ['Download audio'])]),
+      ])
+    );
+  });
+});

src/elements/b-strong.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('abbr', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <p>
+        The two most popular science courses offered by the school are
+        <b>chemistry</b> (the study of chemicals and the composition of
+        substances) and <strong>physics</strong> (the study of the nature and
+        properties of matter and energy).
+      </p>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('paragraph', [
+        'The two most popular science courses offered by the school are',
+        'chemistry',
+        ' (the study of chemicals and the composition of substances) and ',
+        byRole('strong', ['physics']),
+        ' (the study of the nature and properties of matter and energy).',
+      ])
+    );
+  });
+});

src/elements/bdi-bdo.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('abbr', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <p>
+        <bdi>Evil Steven</bdi>
+        <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
+      </p>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('paragraph', ['Evil Steven', 'אה, אני אוהב להיות ליד חוף הים'])
+    );
+  });
+});

src/elements/blockquoute.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('blockquote', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <blockquote cite="https://www.huxley.net/bnw/four.html">
+        <p>
+          Words can be like X-rays, if you use them properly—they’ll go through
+          anything. You read and you’re pierced.
+        </p>
+        <footer>
+          —Aldous Huxley, <cite>Brave New World</cite>
+        </footer>
+      </blockquote>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('blockquote', [
+        byRole('paragraph', [
+          'Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.',
+        ]),
+        byRole('contentinfo', ['—Aldous Huxley, ', 'Brave New World']),
+      ])
+    );
+  });
+});

src/elements/br.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('br', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <p>
+        O’er all the hilltops
+        <br />
+        Is quiet now,
+      </p>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('paragraph', [
+        'O’er all the hilltops',
+        byRole('LineBreak'),
+        'Is quiet now,',
+      ])
+    );
+  });
+});

src/elements/button.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('button', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <button type="button">Add to favorites</button>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('button', ['Add to favorites'])
+    );
+  });
+});

src/elements/canvas.test.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('a', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <canvas width="120" height="120">
+        An alternative text describing what your canvas displays.
+      </canvas>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('Canvas', [
+        'An alternative text describing what your canvas displays.',
+      ])
+    );
+  });
+});

src/elements/caption.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('caption', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <table>
+        <caption>He-Man and Skeletor facts</caption>
+        <tbody>
+          <tr>
+            <td> </td>
+            <th scope="col">He-Man</th>
+            <th scope="col">Skeletor</th>
+          </tr>
+          <tr>
+            <th scope="row">Role</th>
+            <td>Hero</td>
+            <td>Villain</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('table', [
+        byRole('caption', ['He-Man and Skeletor facts']),
+        byRole('rowgroup', [
+          byRole('row', [
+            byRole('cell', [' ']),
+            byRole('columnheader', 'He-Man'),
+            byRole('columnheader', 'Skeletor'),
+          ]),
+          byRole('row', [
+            byRole('rowheader', 'Role'),
+            byRole('cell', 'Hero'),
+            byRole('cell', 'Villain'),
+          ]),
+        ]),
+      ])
+    );
+  });
+});

src/elements/code.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <p>
+        The <code>push()</code> method adds one or more elements to the end of
+        an array and returns the new length of the array.
+      </p>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('paragraph', [
+        'The ',
+        byRole('code', ['push()']),
+        ' method adds one or more elements to the end of an array and returns the new length of the array.',
+      ])
+    );
+  });
+});

src/elements/col-colgroup.test.tsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <table>
+        <caption>Superheros and sidekicks</caption>
+        <colgroup>
+          <col />
+          <col span={2} />
+          <col span={2} />
+        </colgroup>
+        <tbody>
+          <tr>
+            <td></td>
+            <th scope="col">Batman</th>
+            <th scope="col">Robin</th>
+            <th scope="col">The Flash</th>
+            <th scope="col">Kid Flash</th>
+          </tr>
+          <tr>
+            <th scope="row">Skill</th>
+            <td>Smarts</td>
+            <td>Dex, acrobat</td>
+            <td>Super speed</td>
+            <td>Super speed</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+
+    expect(container.firstChild).toHaveA11yTree(
+      byRole('table', [
+        byRole('caption', ['Superheros and sidekicks']),
+        byRole('rowgroup', [
+          byRole('row', [
+            byRole('cell'),
+            byRole('columnheader', ['Batman']),
+            byRole('columnheader', ['Robin']),
+            byRole('columnheader', ['The Flash']),
+            byRole('columnheader', ['Kid Flash']),
+          ]),
+          byRole('row', [
+            byRole('rowheader', ['Skill']),
+            byRole('cell', ['Smarts']),
+            byRole('cell', ['Dex, acrobat']),
+            byRole('cell', ['Super speed']),
+            byRole('cell', ['Super speed']),
+          ]),
+        ]),
+      ])
+    );
+  });
+});

src/elements/data.test.tsx

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react';
+import { byRole } from '..';
+
+describe('', () => {
+  it('renders correct structure', () => {
+    const { container } = render(
+      <>
+        <p>New Products:</p>
+        <ul>
+          <li>
+            <data value="398">Mini Ketchup</data>
+          </li>
+          <li>
+            <data value="399">Jumbo Ketchup</data>
+          </li>
+          <li>
+            <data value="400">Mega Jumbo Ketchup</data>
+          </li>
+        </ul>
+      </>
+    );
+
+    expect(container).toHaveA11yTree(
+      byRole('generic', [
+        byRole('paragraph', ['New Products:']),
+        byRole('list', [
+          byRole('listitem', ['Mini Ketchup']),
+          byRole('listitem', ['Jumbo Ketchup']),
+          byRole('listitem', ['Mega Jumbo Ketchup']),
+        ]),
+      ])
+    );
+  });
+});