fix(ui-checkbox,ui-radio-input): reduce clickable area of checkbox an…

…d radioinput Closes: INSTUI-4197
instructure · Sep 10, 2024 · 77b2a7d · 77b2a7d
1 parent cfa9dc6
commit 77b2a7d
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 44 deletions.
diff --git a/packages/ui-checkbox/src/Checkbox/index.tsx b/packages/ui-checkbox/src/Checkbox/index.tsx
@@ -273,27 +273,29 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         onMouseOut={createChainedFunction(onMouseOut, this.handleMouseOut)}
         ref={this.handleRef}
       >
-        <input
-          {...props}
-          id={this.id}
-          value={value}
-          type="checkbox"
-          ref={(c) => {
-            this._input = c
-          }}
-          disabled={disabled || readOnly}
-          aria-checked={indeterminate ? 'mixed' : undefined}
-          css={styles?.input}
-          onChange={this.handleChange}
-          onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
-          onFocus={createChainedFunction(onFocus, this.handleFocus)}
-          onBlur={createChainedFunction(onBlur, this.handleBlur)}
-          checked={this.checked}
-        />
-        <label htmlFor={this.id} css={styles?.control}>
-          {this.renderFacade()}
-          {this.renderMessages()}
-        </label>
+        <div css={styles?.container}>
+          <input
+            {...props}
+            id={this.id}
+            value={value}
+            type="checkbox"
+            ref={(c) => {
+              this._input = c
+            }}
+            disabled={disabled || readOnly}
+            aria-checked={indeterminate ? 'mixed' : undefined}
+            css={styles?.input}
+            onChange={this.handleChange}
+            onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
+            onFocus={createChainedFunction(onFocus, this.handleFocus)}
+            onBlur={createChainedFunction(onBlur, this.handleBlur)}
+            checked={this.checked}
+          />
+          <label htmlFor={this.id} css={styles?.control}>
+            {this.renderFacade()}
+            {this.renderMessages()}
+          </label>
+        </div>
       </div>
     )
   }

diff --git a/packages/ui-checkbox/src/Checkbox/props.ts b/packages/ui-checkbox/src/Checkbox/props.ts
@@ -87,9 +87,12 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CheckboxProps = CheckboxOwnProps &
   WithStyleProps<CheckboxFacadeTheme | ToggleFacadeTheme, CheckboxStyle> &
-  OtherHTMLAttributes<CheckboxOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<CheckboxOwnProps> &
+  WithDeterministicIdProps
 
-type CheckboxStyle = ComponentStyle<'checkbox' | 'input' | 'control'>
+type CheckboxStyle = ComponentStyle<
+  'checkbox' | 'input' | 'control' | 'container'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,

diff --git a/packages/ui-checkbox/src/Checkbox/styles.ts b/packages/ui-checkbox/src/Checkbox/styles.ts
@@ -57,6 +57,10 @@ const generateStyle = (
         width: 'auto'
       })
     },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'checkbox__input',
       padding: 0,

diff --git a/packages/ui-radio-input/src/RadioInput/index.tsx b/packages/ui-radio-input/src/RadioInput/index.tsx
@@ -141,26 +141,28 @@ class RadioInput extends Component<RadioInputProps, RadioInputState> {
           this.ref = el
         }}
       >
-        <input
-          {...props}
-          id={this.id}
-          ref={(c: HTMLInputElement | null) => {
-            this._input = c
-          }}
-          value={value}
-          name={name}
-          checked={this.checked}
-          type="radio"
-          css={styles?.input}
-          disabled={disabled || readOnly}
-          aria-disabled={disabled || readOnly ? 'true' : undefined}
-          onChange={this.handleChange}
-          onClick={this.handleClick}
-        />
-        <label css={styles?.control} htmlFor={this.id}>
-          <span css={styles?.facade} aria-hidden="true" />
-          <span css={styles?.label}>{label}</span>
-        </label>
+        <div css={styles?.container}>
+          <input
+            {...props}
+            id={this.id}
+            ref={(c: HTMLInputElement | null) => {
+              this._input = c
+            }}
+            value={value}
+            name={name}
+            checked={this.checked}
+            type="radio"
+            css={styles?.input}
+            disabled={disabled || readOnly}
+            aria-disabled={disabled || readOnly ? 'true' : undefined}
+            onChange={this.handleChange}
+            onClick={this.handleClick}
+          />
+          <label css={styles?.control} htmlFor={this.id}>
+            <span css={styles?.facade} aria-hidden="true" />
+            <span css={styles?.label}>{label}</span>
+          </label>
+        </div>
       </div>
     )
   }

diff --git a/packages/ui-radio-input/src/RadioInput/props.ts b/packages/ui-radio-input/src/RadioInput/props.ts
@@ -87,7 +87,7 @@ type RadioInputProps = RadioInputOwnProps &
   WithDeterministicIdProps
 
 type RadioInputStyle = ComponentStyle<
-  'radioInput' | 'input' | 'control' | 'facade' | 'label'
+  'radioInput' | 'input' | 'control' | 'facade' | 'label' | 'container'
 >
 
 type RadioInputState = {

diff --git a/packages/ui-radio-input/src/RadioInput/styles.ts b/packages/ui-radio-input/src/RadioInput/styles.ts
@@ -273,6 +273,10 @@ const generateStyle = (
         ...(disabled && { cursor: 'not-allowed' })
       }
     },
+    // this container is added to reduce the clickable area to the size of the radio button and label
+    container: {
+      width: 'fit-content'
+    },
     input: {
       label: 'radioInput__input',
       ...inputStyles,