th of scope rowgroup is not rowheader

Nobody has claimed this yet.

@testing-library/dom version: v7.29.0 ( Use @testing-library/react v11.2.6 )
Testing Framework and version: jest v2.26.3
DOM Environment: jsdom v16.5.3

Relevant code or config:

table element includes th just like Belgium or The Netherlands rowgroup in https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users

import React from 'react'

function Counter() {
  return (
    <table>
      <caption>Sample Table</caption>
      <tbody>
      <tr>
        <th scope='rowgroup' rowSpan={3}>Group1</th>
        <th scope='row'>RowHeader1</th>
        <td>Test1</td>
      </tr>
      <tr>
        <th scope='row'>RowHeader2</th>
        <td>Test2</td>
      </tr>
      <tr>
        <th scope='row'>RowHeader3</th>
        <td>Test3</td>
      </tr>
      </tbody>
    </table>
  )
}

export default Counter

import React from 'react'
import {render} from '@testing-library/react'
import Counter from '../'

test('increments the count', () => {
  const {getByRole} = render(<Counter />)

  expect(getByRole('rowheader', { name: 'Group1' })).toBeVisible()
})

What you did:

When using getByRole(..) to get <th scope="rowgroup">..</th>, this element is not rowheader but columnheader.

What happened:

TestingLibraryElementError: Unable to find an accessible element with the role "rowheader" and name "Group1"

Here are the accessible roles:

  table:

  Name "Sample Table":
  <table />

  --------------------------------------------------
  rowgroup:

  Name "":
  <tbody />

  --------------------------------------------------
  row:

  Name "Group1 RowHeader1 Test1":
  <tr />

  Name "RowHeader2 Test2":
  <tr />

  Name "RowHeader3 Test3":
  <tr />

  --------------------------------------------------
  columnheader:

  Name "Group1":
  <th
    rowspan="3"
    scope="rowgroup"
  />

  --------------------------------------------------
  rowheader:

  Name "RowHeader1":
  <th
    scope="row"
  />

  Name "RowHeader2":
  <th
    scope="row"
  />

  Name "RowHeader3":
  <th
    scope="row"
  />

  --------------------------------------------------
  cell:

  Name "Test1":
  <td />

  Name "Test2":
  <td />

  Name "Test3":
  <td />

  --------------------------------------------------

<body>
  <div>
    <table>
      <caption>
        Sample Table
      </caption>
      <tbody>
        <tr>
          <th
            rowspan="3"
            scope="rowgroup"
          >
            Group1
          </th>
          <th
            scope="row"
          >
            RowHeader1
          </th>
          <td>
            Test1
          </td>
        </tr>
        <tr>
          <th
            scope="row"
          >
            RowHeader2
          </th>
          <td>
            Test2
          </td>
        </tr>
        <tr>
          <th
            scope="row"
          >
            RowHeader3
          </th>
          <td>
            Test3
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
...

Reproduction:

I created reproduction code from template.
https://github.com/wasanx25/dom-testing-library-template

As an aside, I want to create reproduction code using Codesandbox, but can not running test because of this issue.
https://github.com/codesandbox/codesandbox-client/issues/513

Problem description:

In Chrome and Firefox browser, accessible name of <th scope='rowgroup>...</th> is rowheader.
However, in testing-library, it is different so I cannot write expected test code.

scope rowgroup th accessibility in Chrome

scope rowgroup th accessibility in Firefox

Description

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

Contributor guide

First steps

Research direction

Assessment

th of scope rowgroup is not rowheader

Description

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox