Enhance inline comments for JS widget files [AC-43]

test-app/src/widgets/CheckBox.js

@@ -1,12 +1,25 @@
 import AccessibilityModule from '@curriculumassociates/createjs-accessibility';
 
+/**
+ * A custom checkbox component that implements accessibility features.
+ * This class creates a visually appealing and fully accessible checkbox
+ * with proper focus indicators and ARIA attributes.
+ */
 export default class CheckBox extends createjs.Container {
+  /**
+   * Creates a new CheckBox instance.
+   * @param {number} width - The width of the checkbox
+   * @param {number} height - The height of the checkbox
+   * @param {number} tabIndex - The tab order of the checkbox for keyboard navigation
+   * @param {Function} callBack - Optional callback function triggered when checkbox state changes
+   */
   constructor(width, height, tabIndex, callBack = () => {}) {
     super();
     this.width = width;
     this.height = height;
     this.callBack = callBack;
     this.checked = false;
+    // Register the checkbox with accessibility module to enable screen reader support
     AccessibilityModule.register({
       accessibleOptions: { tabIndex },
       displayObject: this,
@@ -33,12 +46,23 @@ export default class CheckBox extends createjs.Container {
     this._createAsset();
   }
 
+  /**
+   * Creates the visual assets for the checkbox by adding the box area and checkmark
+   * @private
+   */
   _createAsset() {
     this._addBoxArea();
     this._addCheckMark();
   }
 
+  /**
+   * Creates the main checkbox container and focus indicator
+   * The checkbox has a light gray fill with a dark border
+   * Focus indicator is a blue outline that appears when the checkbox gains focus
+   * @private
+   */
   _addBoxArea() {
+    // Create the main checkbox container with a gray fill and dark border
     const box = new createjs.Shape();
     box.graphics
       .setStrokeStyle(1)
@@ -48,6 +72,7 @@ export default class CheckBox extends createjs.Container {
     box.setBounds(0, 0, this.width, this.height);
     this.addChild(box);
 
+    // Create a focus indicator that appears when the checkbox is focused
     const focusRect = new createjs.Shape();
     focusRect.graphics
       .setStrokeStyle(5)
@@ -60,6 +85,11 @@ export default class CheckBox extends createjs.Container {
     this.focusRect = focusRect;
   }
 
+  /**
+   * Creates the checkmark symbol that appears when the checkbox is checked
+   * The checkmark is a thick line drawn in a check symbol shape
+   * @private
+   */
   _addCheckMark() {
     const checkMark = new createjs.Shape();
     checkMark.graphics
@@ -70,12 +100,17 @@ export default class CheckBox extends createjs.Container {
       .lineTo(this.width - 6, 0);
     this.addChild(checkMark);
 
+    // Position the checkmark with slight offset for better visual alignment
     checkMark.set({ x: 2, y: 2 });
 
     checkMark.visible = false;
     this.checkMark = checkMark;
   }
 
+  /**
+   * Handles state changes when the checkbox is clicked or activated via keyboard
+   * Updates the visual state and accessibility properties
+   */
   onChange() {
     this.accessible.requestFocus();
     this.checked = !this.checked;
@@ -84,11 +119,17 @@ export default class CheckBox extends createjs.Container {
     this.callBack();
   }
 
+  /**
+   * Shows the focus indicator when the checkbox receives focus
+   */
   onFocus() {
     this.focusRect.visible = true;
   }
 
+  /**
+   * Hides the focus indicator when the checkbox loses focus
+   */
   onBlur() {
     this.focusRect.visible = false;
   }
-}
+}

test-app/src/widgets/ClearInputButton.js

@@ -1,31 +1,67 @@
 import _, { noop } from 'lodash';
 import Button from './Button';
 
+/**
+ * ClearInputButton extends Button to create a circular button with an 'x' symbol
+ * commonly used for clearing input fields. This component inherits accessibility
+ * features from the base Button class and customizes the visual appearance.
+ */
 export default class ClearInputButton extends Button {
+  /**
+   * Creates a new ClearInputButton instance
+   * @param {Object} options - Configuration options for the button
+   * @param {number} tabIndex - The tab order index for keyboard navigation
+   * @param {Function} callBack - Optional callback function triggered on button click (defaults to no-op)
+   */
   constructor(options, tabIndex, callBack = _.noop) {
     super(options, tabIndex, callBack);
   }
 
+  /**
+   * Creates a circular background for the button
+   * @param {string} color - The fill color for the button background
+   * @private
+   */
   _fillBackground(color) {
     this.background.graphics
       .beginFill(color)
       .drawCircle(0, 0, this.height * 0.5);
   }
 
+  /**
+   * Override mouse down handler to prevent default behavior
+   * This maintains consistent appearance during mouse interaction
+   * @private
+   */
   _onMouseDown() {
     noop();
   }
 
+  /**
+   * Override mouse up handler to prevent default behavior
+   * This maintains consistent appearance during mouse interaction
+   * @private
+   */
   _onMouseUp() {
     noop();
   }
 
+  /**
+   * Creates and adds the circular grey background to the button
+   * This provides the base visual element for the clear button
+   * @private
+   */
   _addBackground() {
     this.background = new createjs.Shape();
     this._fillBackground('grey');
     this.addChild(this.background);
   }
 
+  /**
+   * Creates and adds the focus indicator ring around the button
+   * The indicator is a black circle that appears when the button is focused
+   * @private
+   */
   _addFocusIndicator() {
     this.focusIndicator = new createjs.Shape();
     this.focusIndicator.name = 'focusIndicator';
@@ -37,13 +73,19 @@ export default class ClearInputButton extends Button {
     this.focusIndicator.visible = false;
   }
 
+  /**
+   * Creates and adds the 'x' symbol text to the button
+   * The text is centered within the button using the button height for sizing
+   * @private
+   */
   _addText() {
     this.text = new createjs.Text('x', `${this.height}px Arial`, 'white');
     const textBounds = this.text.getBounds();
+    // Center the text both horizontally and vertically
     this.text.set({
       x: -(textBounds.width * 0.5),
       y: -(textBounds.height * 0.5),
     });
     this.addChild(this.text);
   }
-}
+}