Dom-testing-library: 'getByRole' doesn't find a table with a name specified by <caption>

[victorborg3s]

Hello everyone and thanks for the work done.
I'm having what i consider an error when trying to locate a <table> with a <caption> inside.

• @testing-library/dom version: "6.16.0"
• Testing Framework and version:
  -- @testing-library/react: "9.5.0";
  -- @types/jest: "24.9.1";
  -- with env jest-environment-jsdom-sixteen: "^1.0.3";
  -- node: v12.16.3

Relevant code or config:

A sample test:

describe('Some problem', () => {
  it('doens\'t considers a <caption> as <table>\'s "name"', () => {
    const { getByRole } = render(
      <table>
        <caption>Monthly savings</caption>
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </tbody>
      </table>
    );
    expect(getByRole('table', { name: 'Monthly savings' }))
      .toBeTruthy();
  });
});

my 'package.json' file

{
  "name": "apidesk",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@types/react-dom": "^16.9.5",
    "airbnb-prop-types": "^2.15.0",
    "array-move": "^2.2.1",
    "bootstrap": "^4.4.1",
    "keycode-js": "^2.0.3",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-collapsible": "^2.7.0",
    "react-country-flag": "^2.0.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-scripts": "3.4.0",
    "react-sortable-hoc": "^1.11.0",
    "react-tabs": "^3.1.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "simplebar": "^5.1.0",
    "simplebar-react": "^2.1.0",
    "typescript": "^3.7.5",
    "uniqid": "^5.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --watchAll --env=jest-environment-jsdom-sixteen",
    "eject": "react-scripts eject",
    "pretest": "concurrently 'npm run eslint' 'npm run stylelint'",
    "eslint": "eslint './src/**/*.{ts,tsx,js,jsx}' './src/*.{ts,tsx,js,jsx}'",
    "stylelint": "stylelint './src/**/*.css'"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/react": "^16.9.27",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "babel-eslint": "^10.0.3",
    "concurrently": "^5.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-react": "^1.1.7",
    "eslint-config-react-app": "^5.2.1",
    "eslint-plugin-flowtype": "^3.13.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "stylelint": "^13.3.1",
    "stylelint-config-standard": "^16.0.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/index.jsx",
      "!src/serviceWorker.js",
      "!src/**/index.js",
      "!src/**/*Shape.js"
    ]
  }
}

What I did:

With the configuration and code above, i ran npm test.

What happened:

As output for this specific test, i had:

Unable to find an accessible element with the role "table" and name "Monthly savings"

    Here are the accessible roles:

...

--------------------------------------------------
      table:

      Name "":
      <table />

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

...

Reproduction:

This repository reproduces the problem (forked from dom-testing-library-template).

Problem description:

As described in WAI-ARIA Authoring Practices 1.1:

If the table element does not have aria-label or aria-labelledby, then the caption will be used as the accessible name.

Suggested solution:

'getByRole' should consider <caption> as name if it exists inside table and "the table element does not have aria-label or aria-labelledby".

[Tolsee]

@eps1lon
If you haven't started working on it, I would love to pick. Let me know if that's fine 🙂

[eps1lon]

@eps1lon
If you haven't started working on it, I would love to pick. Let me know if that's fine

This likely needs a fix in https://github.com/eps1lon/dom-accessibility-api. Would be great to have a test in https://github.com/eps1lon/dom-accessibility-api/blob/master/sources/__tests__/accessible-name.js and then fix it.

I suspect that I didn't consider caption as an element that can label another element.

[Tolsee]

@eps1lon Thanks for the insights, I will try to work on the dom-accessibility-api ASAP. I will let you know If I ran into any issues.

[eps1lon]

I will let you know If I ran into any issues.

Feel free to open PR once you get stuck. It's easier to discuss issues with actual code. If you have a test but are stuck with the implementation somebody else can fix the issue based on your test.

[eps1lon]

@Tolsee I've put up a fix for that since a similar fix was merged yesterday.

[kentcdodds]

:tada: This issue has been resolved in version 7.5.7 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[victorborg3s]

This issue has been resolved in version 7.5.7

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot

Cool! Thank you all!