Closed
Description
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/domversion: "6.16.0"- Testing Framework and version:
--@testing-library/react: "9.5.0";
--@types/jest: "24.9.1";
-- with envjest-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".