diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index fcda2f9ca376..78e987867553 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -998,6 +998,7 @@ exports[`DataTable selection should have select-all default to un-checked if no aria-label="Select all rows" className="bx--checkbox-label" htmlFor="data-table-7__select-all" + onClick={[Function]} /> @@ -1404,6 +1405,7 @@ exports[`DataTable selection should render 1`] = ` aria-label="Select all rows" className="bx--checkbox-label" htmlFor="data-table-6__select-all" + onClick={[Function]} /> @@ -1505,6 +1507,7 @@ exports[`DataTable selection should render 1`] = ` aria-label="Select row" className="bx--checkbox-label" htmlFor="data-table-6__select-row-b" + onClick={[Function]} /> @@ -1574,6 +1577,7 @@ exports[`DataTable selection should render 1`] = ` aria-label="Select row" className="bx--checkbox-label" htmlFor="data-table-6__select-row-a" + onClick={[Function]} /> @@ -1643,6 +1647,7 @@ exports[`DataTable selection should render 1`] = ` aria-label="Select row" className="bx--checkbox-label" htmlFor="data-table-6__select-row-c" + onClick={[Function]} /> diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap index 280e52d353e3..fa7ee5f3aba4 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap @@ -56,6 +56,7 @@ exports[`DataTable.TableSelectAll should render 1`] = ` aria-label="Select all rows in the table" className="bx--checkbox-label" htmlFor="id" + onClick={[Function]} /> diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap index 953f3a2764d3..20a480322c10 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap @@ -55,6 +55,7 @@ exports[`DataTable.TableSelectRow should render 1`] = ` aria-label="Aria label" className="bx--checkbox-label" htmlFor="id" + onClick={[Function]} /> diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js index e24bee3404d2..dbee9088eb2f 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js +++ b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js @@ -19,6 +19,7 @@ import DataTable, { } from '../../DataTable'; import { rows, headers } from './shared'; import mdx from '../DataTable.mdx'; +import { action } from '@storybook/addon-actions'; export default { title: 'Components/DataTable/Selection', @@ -69,8 +70,19 @@ export const Usage = () => ( {rows.map((row, i) => ( - - + { + action('TableRow onClick')(evt); + }}> + { + action('TableSelectRow onSelect')(evt); + getSelectionProps({ row }).onSelect(evt); + }} + /> {row.cells.map((cell) => ( {cell.value} ))} diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js new file mode 100644 index 000000000000..cfc3d7eb7495 --- /dev/null +++ b/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js @@ -0,0 +1,30 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import InlineCheckbox from '../InlineCheckbox'; +import userEvent from '@testing-library/user-event'; + +describe('InlineCheckbox', () => { + it('should render', () => { + render(); + expect(screen.getByRole('checkbox')).toBeInTheDocument(); + }); + + it('should only propagate click events from the input', () => { + const onClick = jest.fn(); + render( + /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ +
+ +
+ ); + userEvent.click(screen.getByRole('checkbox')); + expect(onClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js index 89c472b4bc45..783dd840a456 100644 --- a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js +++ b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js @@ -134,12 +134,15 @@ class InlineCheckbox extends React.Component { <> { - /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */ + /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */