using "visually hidden" <input> for checkboxes

[stefanprobst]

i have recently watched a talk by sara soueidan in which she describes an issue with checkboxes using "visually hidden" <input> elements: https://youtu.be/ob_M_qXeDVE?t=966

since the RAC checkbox is using that pattern i was wondering about your opinion on this. thanks!

[reidbarber]

A potential solution would be to position the visually hidden input directly over the visual control, with the same width and height. React Aria hooks user can do this, but this would be tricky to include automatically in React Aria Components since we don't know how the user is going to style their component. We could do something like this:

<label
  {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
  ref={ref}
  slot={props.slot || undefined}
  data-selected={isSelected || undefined}
  data-indeterminate={props.isIndeterminate || undefined}
  data-pressed={isPressed || undefined}
  data-hovered={isHovered || undefined}
  data-focused={isFocused || undefined}
  data-focus-visible={isFocusVisible || undefined}
  data-disabled={isDisabled || undefined}
  data-readonly={isReadOnly || undefined}
  data-invalid={isInvalid || undefined}
  data-required={props.isRequired || undefined}>
  <VisuallyHidden elementType="span"
+   style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0, overflow: 'hidden'}}>
     <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
   </VisuallyHidden>
  {renderProps.children}
</label>

however, this would require that the user use position: relative, which is something we can't enforce.