Support Checkbox selection by label without passed id (#4067)

packages/terra-core-docs/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Added
   * Added an example for `terra-button` to demonstrate isLeftAligned property.
+  * Added a test for `terra-form-checkbox` to cover a checkbox without an id property passed.
 
 ## 1.67.0 - (March 15, 2024)
 

packages/terra-core-docs/src/terra-dev-site/test/form-checkbox/checkbox/CheckboxWithoutId.test.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Checkbox from 'terra-form-checkbox';
+
+import classNames from 'classnames/bind';
+import styles from './CheckboxTestCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+export default () => (
+  <div className={cx('spacing')}>
+    <Checkbox labelText="Default Checkbox" />
+  </div>
+);

packages/terra-form-checkbox/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated the Checkbox component to generate an id when not passed so that click on the label controls the selection state.
+
 ## 4.25.0 - (March 15, 2024)
 
 * Added

packages/terra-form-checkbox/package.json

@@ -36,7 +36,8 @@
     "prop-types": "^15.5.8",
     "terra-mixins": "^1.41.0",
     "terra-theme-context": "^1.0.0",
-    "terra-visually-hidden-text": "^2.38.0"
+    "terra-visually-hidden-text": "^2.38.0",
+    "uuid": "3.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.5",

packages/terra-form-checkbox/src/Checkbox.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { v4 as uuidv4 } from 'uuid';
 import classNamesBind from 'classnames/bind';
 import ThemeContext from 'terra-theme-context';
 import styles from './Checkbox.module.scss';
@@ -104,6 +105,8 @@ const Checkbox = ({
 }) => {
   const theme = React.useContext(ThemeContext);
 
+  const inputId = id || uuidv4();
+
   const controlInputAttrs = { ...inputAttrs };
 
   if (checked !== undefined) {
@@ -149,11 +152,11 @@ const Checkbox = ({
 
   return (
     <div {...customProps} className={checkboxClasses}>
-      <label htmlFor={id} className={labelClasses}>
+      <label htmlFor={inputId} className={labelClasses}>
         <input
           {...controlInputAttrs}
           type="checkbox"
-          id={id}
+          id={inputId}
           disabled={disabled}
           name={name}
           value={value}

packages/terra-form-checkbox/tests/jest/Checkbox.test.jsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
-
+import { v4 as uuidv4 } from 'uuid';
 import Checkbox from '../../src';
 
+let mockSpyUuid;
+beforeAll(() => {
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
+});
+
+afterAll(() => {
+  mockSpyUuid.mockRestore();
+});
+
 window.matchMedia = () => ({ matches: true });
 
 it('should render a checkbox', () => {
@@ -11,6 +20,28 @@ it('should render a checkbox', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it('should render a checkbox using id prop', () => {
+  const checkBox = (<Checkbox id="testId" labelText="Checkbox" />);
+  const wrapper = enzyme.shallow(checkBox);
+
+  const label = wrapper.find('.label');
+  const input = wrapper.find('.native-input');
+
+  expect(label.props().htmlFor).toBe('testId');
+  expect(input.props().id).toBe('testId');
+});
+
+it('should render a checkbox without id prop', () => {
+  const checkBox = (<Checkbox labelText="Checkbox" />);
+  const wrapper = enzyme.shallow(checkBox);
+
+  const label = wrapper.find('.label');
+  const input = wrapper.find('.native-input');
+
+  expect(label.props().htmlFor).toBe('00000000-0000-0000-0000-000000000000');
+  expect(input.props().id).toBe('00000000-0000-0000-0000-000000000000');
+});
+
 it('should render an uncontrolled checkbox', () => {
   const checkBox = (<Checkbox defaultChecked labelText="Checkbox" />);
   const wrapper = enzyme.shallow(checkBox);

packages/terra-form-checkbox/tests/jest/CheckboxField.test.jsx

@@ -1,10 +1,20 @@
 import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 
 import Checkbox, { CheckboxField } from '../../src';
 
 window.matchMedia = () => ({ matches: true });
 
+let mockSpyUuid;
+beforeAll(() => {
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
+});
+
+afterAll(() => {
+  mockSpyUuid.mockRestore();
+});
+
 let userAgentGetter;
 beforeEach(() => {
   userAgentGetter = jest.spyOn(window.navigator, 'userAgent', 'get');

packages/terra-form-checkbox/tests/jest/__snapshots__/Checkbox.test.jsx.snap

@@ -31,10 +31,12 @@ exports[`correctly applies the theme context className 1`] = `
     >
       <label
         className="label healtheintent-label-text"
+        htmlFor="00000000-0000-0000-0000-000000000000"
       >
         <input
           className="native-input healtheintent-application"
           disabled={false}
+          id="00000000-0000-0000-0000-000000000000"
           name="children_present"
           type="checkbox"
           value="children_present"
@@ -56,10 +58,12 @@ exports[`should render a ChoiceField with a checkbox 1`] = `
 >
   <label
     className="label healtheintent-label-text"
+    htmlFor="00000000-0000-0000-0000-000000000000"
   >
     <input
       className="native-input healtheintent-application"
       disabled={false}
+      id="00000000-0000-0000-0000-000000000000"
       name="children_present"
       type="checkbox"
       value="children_present"
@@ -79,10 +83,12 @@ exports[`should render a checkbox 1`] = `
 >
   <label
     className="label"
+    htmlFor="00000000-0000-0000-0000-000000000000"
   >
     <input
       className="native-input"
       disabled={false}
+      id="00000000-0000-0000-0000-000000000000"
       name={null}
       type="checkbox"
     />
@@ -101,12 +107,14 @@ exports[`should render a checkbox with a hidden label 1`] = `
 >
   <label
     className="label"
+    htmlFor="00000000-0000-0000-0000-000000000000"
   >
     <input
       aria-label="Checkbox"
       checked={true}
       className="native-input"
       disabled={false}
+      id="00000000-0000-0000-0000-000000000000"
       name={null}
       onChange={[Function]}
       type="checkbox"
@@ -124,11 +132,13 @@ exports[`should render a controlled checkbox 1`] = `
 >
   <label
     className="label"
+    htmlFor="00000000-0000-0000-0000-000000000000"
   >
     <input
       checked={true}
       className="native-input"
       disabled={false}
+      id="00000000-0000-0000-0000-000000000000"
       name={null}
       onChange={[Function]}
       type="checkbox"
@@ -148,11 +158,13 @@ exports[`should render a disabled checkbox 1`] = `
 >
   <label
     className="label is-disabled"
+    htmlFor="00000000-0000-0000-0000-000000000000"
   >
     <input
       checked={true}
       className="native-input"
       disabled={true}
+      id="00000000-0000-0000-0000-000000000000"
       name={null}
       onChange={[Function]}
       type="checkbox"
@@ -172,11 +184,13 @@ exports[`should render an uncontrolled checkbox 1`] = `
 >
   <label
     className="label"
+    htmlFor="00000000-0000-0000-0000-000000000000"
   >
     <input
       className="native-input"
       defaultChecked={true}
       disabled={false}
+      id="00000000-0000-0000-0000-000000000000"
       name={null}
       type="checkbox"
     />

packages/terra-form-checkbox/tests/jest/__snapshots__/CheckboxField.test.jsx.snap

@@ -106,12 +106,14 @@ exports[`correctly applies "inputAttrs" property to the Checkbox component 1`] =
         >
           <label
             className="label"
+            htmlFor="00000000-0000-0000-0000-000000000000"
           >
             <input
               aria-describedby="terra-checkbox-field-description-4  "
               className="native-input"
               data-custom-attr="attr data"
               disabled={false}
+              id="00000000-0000-0000-0000-000000000000"
               name={null}
               type="checkbox"
             />

packages/terra-form-checkbox/tests/wdio/form-checkbox-spec.js

@@ -67,4 +67,13 @@ Terra.describeViewports('Checkbox', ['medium'], () => {
 
     Terra.validates.element('three Checkboxes, first defaulted to checked');
   });
+
+  describe('No Identifier', () => {
+    it('should display checked Checkbox', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/form-checkbox/checkbox/checkbox-without-id');
+      $('label[class*="label"').click();
+
+      Terra.validates.element('no-id-checked');
+    });
+  });
 });