From dd1d0373462c166874ba26814ff251f90fb85496 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Tue, 12 Oct 2021 13:51:20 -0500
Subject: [PATCH] feat(checkbox): add onClick prop (#9827)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  4 ++++
 .../src/components/Checkbox/Checkbox-story.js |  1 +
 .../react/src/components/Checkbox/Checkbox.js | 20 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 6b87038a912d..05d39d9412c2 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -322,6 +322,7 @@ Map {
     "defaultProps": Object {
       "indeterminate": false,
       "onChange": [Function],
+      "onClick": [Function],
     },
     "displayName": "Checkbox",
     "propTypes": Object {
@@ -354,6 +355,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onClick": Object {
+        "type": "func",
+      },
       "title": Object {
         "type": "string",
       },
diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/packages/react/src/components/Checkbox/Checkbox-story.js
index 6b43a8ec950f..a3ca825d7fd3 100644
--- a/packages/react/src/components/Checkbox/Checkbox-story.js
+++ b/packages/react/src/components/Checkbox/Checkbox-story.js
@@ -76,6 +76,7 @@ const props = () => ({
   hideLabel: boolean('No label (hideLabel)', false),
   wrapperClassName: text('Wrapper CSS class name (wrapperClassName)', ''),
   onChange: action('onChange'),
+  onClick: action('onClick'),
 });
 
 export const playground = () => (
diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
index b1c7ae13f8ed..866239d26d51 100644
--- a/packages/react/src/components/Checkbox/Checkbox.js
+++ b/packages/react/src/components/Checkbox/Checkbox.js
@@ -19,6 +19,7 @@ const Checkbox = React.forwardRef(function Checkbox(
     id,
     labelText,
     onChange,
+    onClick,
     indeterminate,
     hideLabel,
     wrapperClassName,
@@ -44,7 +45,15 @@ const Checkbox = React.forwardRef(function Checkbox(
   );
 
   return (
-    <div className={wrapperClasses}>
+    /* 
+      The a11y rules below are disabled because <div> element has checkbox 
+      input and label elements as children that allows keyboard interaction. 
+      The onClick handler facilitates consumers' ability to stop click events 
+      from bubbling beyond the checkbox without having to implement their own 
+      wrapper element around <Checkbox>.
+    */
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+    <div className={wrapperClasses} onClick={(evt) => onClick(evt)}>
       <input
         {...other}
         type="checkbox"
@@ -123,6 +132,14 @@ Checkbox.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Provide an optional click handler that is applied to the wrapper div
+   * containing both the input and the span label. As such, this will be
+   * called twice for every click - once for the input, a second time for the label.
+   * Receives the dom event as its only argument.
+   */
+  onClick: PropTypes.func,
+
   /**
    * Specify a title for the <label> node for the Checkbox
    */
@@ -139,6 +156,7 @@ Checkbox.propTypes = {
 
 Checkbox.defaultProps = {
   onChange: () => {},
+  onClick: () => {},
   indeterminate: false,
 };