'getByRole' doesn't find a table with a name specified by <caption>

victorborg3s commented 4 years ago

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

```javascript { "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 commented 4 years ago

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

eps1lon commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

kentcdodds commented 4 years ago

: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 commented 4 years ago

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!

testing-library / dom-testing-library