VideoPress: Replace custom Checkbox with CheckboxControl, fix invisible filter/privacy checkboxes (#48175)

* VideoPress: Swap site-settings privacy toggle to CheckboxControl

The Video Privacy toggle at the bottom of the VideoPress dashboard was using the local CheckboxCheckmark wrapper around a custom-styled checkbox that relied on a ::before pseudo-element for its visible box but never defined background/border, leaving the control blank on top of any cascade that didn't paint a default. Replace it with WP's @wordpress/components CheckboxControl for native rendering and accessibility, and move the component-local layout rule (margin-top for spacing under the Settings heading) into its own style.module.scss alongside the consumer.

Also routes the existing disabledReason copy through CheckboxControl's `help` prop.

* VideoPress: Remove unused custom Checkbox component and dead selection UI

Now that the site-settings privacy toggle uses @wordpress/components CheckboxControl directly, the local Checkbox component is only used by:

- video-filter's CheckboxCheckmark (filter panel on the library page)
- video-list / video-row "select all" + per-row selection checkboxes, both permanently gated behind a hardcoded `showCheckbox = false` with a `// TODO: implement bulk actions` note — never rendered in the current UI

Migrate CheckboxCheckmark to CheckboxControl and delete the list/row selection plumbing entirely, then remove the components/checkbox/ directory (component, styles, stories, tests, types).

video-filter:
- CheckboxCheckmark now renders CheckboxControl with a .filter-checkbox class that adds `padding-top: var(--spacing-base)` for vertical rhythm between filter options.
- Drop the `for` and `disabledReason` props plus the internal DisabledReasonTooltip — neither was actually used by any call site.
- Remove now-dead `.filters-section .checkbox-container:last-child` and `.title-adornment` rules.

video-list:
- Remove `selected` / `setSelected` state, `allSelected`, `handleAll`, and the `showCheckbox = false` constant from both VideoList and LocalVideoList.
- Drop the select-all header checkbox and stop passing `checked` / `onSelect` / `showCheckbox` through to the row components.

video-row:
- Drop the CheckboxControl render block + wrapper div.
- Drop `checked`, `onSelect`, `showCheckbox` props from the signature and the VideoRowProps type.
- Drop the row-level keyboard/click handling that only existed to toggle the (never-rendered) checkbox: `role=button`, `tabIndex`, `aria-label`, `onKeyDown`, `onKeyUp`, `keyPressed` state, `handleKeyDown`/`handleKeyUp`/`handleClick`/`isSpaceOrEnter`.
- Simplify `handleInfoWrapperClick` to only toggle mobile expansion.
- Remove the orphan `.checkbox-wrapper-small` SCSS rule (`.pressed` stays — still used by video-row/error.tsx).

Net: ~377 lines of dead code gone, no visible UI change.

* changelog: Add entries for VideoPress checkbox cleanup

Author: CGastrell

projects/packages/videopress/changelog/remove-unused-custom-checkbox

@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+Remove unused custom Checkbox component and the hidden per-row selection UI that relied on it.

projects/packages/videopress/changelog/site-settings-privacy-checkbox-control

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Swap the site-settings Video Privacy toggle to WordPress CheckboxControl for native rendering and accessibility.

projects/packages/videopress/src/client/admin/components/checkbox/index.tsx

@@ -2,14 +2,15 @@
  * External dependencies
  */
 import { Col, Container, Text } from '@automattic/jetpack-components';
+import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import { usePermission } from '../../hooks/use-permission';
 import { useVideoPressSettings } from '../../hooks/use-videopress-settings';
-import { CheckboxCheckmark } from '../video-filter';
 import { SITE_TYPE_ATOMIC } from './constants';
+import styles from './style.module.scss';
 import { SiteSettingsSectionProps } from './types';
 /**
  * Types
@@ -46,16 +47,16 @@ const SiteSettingsSection: FC< SiteSettingsSectionProps > = ( {
 				</Text>
 			</Col>
 			<Col sm={ 12 } md={ 12 } lg={ 12 }>
-				<CheckboxCheckmark
-					for={ 'settings-site-privacy' }
+				<CheckboxControl
 					label={ __(
 						'Video Privacy: Restrict views to members of this site',
 						'jetpack-videopress-pkg'
 					) }
+					className={ styles[ 'privacy-toggle' ] }
 					onChange={ onPrivacyChange }
 					checked={ videoPressVideosPrivateForSite }
 					disabled={ disablePrivacyToggle }
-					disabledReason={ disabledReason }
+					help={ disabledReason || undefined }
 				/>
 			</Col>
 		</Container>

projects/packages/videopress/src/client/admin/components/checkbox/stories/index.stories.tsx

@@ -0,0 +1,3 @@
+.privacy-toggle {
+	margin-top: var(--spacing-base);
+}

projects/packages/videopress/src/client/admin/components/checkbox/style.module.scss

@@ -2,9 +2,8 @@
  * External dependencies
  */
 import { Button, Col, Container, Text, useBreakpointMatch } from '@automattic/jetpack-components';
-import { Tooltip } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
 import clsx from 'clsx';
 /**
  * Types
@@ -28,7 +27,6 @@ import {
 import { useSearchParams } from '../../hooks/use-search-params';
 import useUsers from '../../hooks/use-users';
 import useVideos from '../../hooks/use-videos';
-import Checkbox from '../checkbox';
 import styles from './style.module.scss';
 import { FilterObject } from './types';
 import type { JSX } from 'react';
@@ -54,36 +52,20 @@ export const FilterButton = ( props: {
 	);
 };
 
-const DisabledReasonTooltip = ( props: { message: string } ): JSX.Element => {
-	return (
-		<Tooltip position="middle center" text={ props.message }>
-			<span className={ styles[ 'title-adornment' ] }>
-				<Icon icon={ info } />
-			</span>
-		</Tooltip>
-	);
-};
-
 export const CheckboxCheckmark = ( props: {
 	label?: string;
-	for: string;
 	checked?: boolean;
 	disabled?: boolean;
-	disabledReason?: string;
 	onChange?: ( checked: boolean ) => void;
 } ): JSX.Element => {
 	return (
-		<Checkbox
-			id={ props.for }
-			htmlFor={ props.for }
-			className={ styles.checkbox }
-			onChange={ props.onChange }
+		<CheckboxControl
+			className={ styles[ 'filter-checkbox' ] }
+			label={ props.label }
 			checked={ props.checked }
 			disabled={ props.disabled }
-		>
-			<Text variant="body-small">{ props.label }</Text>
-			{ props.disabledReason && <DisabledReasonTooltip message={ props.disabledReason } /> }
-		</Checkbox>
+			onChange={ props.onChange }
+		/>
 	);
 };
 
@@ -117,7 +99,6 @@ export const FilterSection = ( props: {
 						<CheckboxCheckmark
 							key={ uploader.id }
 							label={ uploader.name }
-							for={ `uploader-${ uploader.id }` }
 							onChange={ checked =>
 								props.onChange?.( VIDEO_FILTER_UPLOADER, uploader.id, checked )
 							}
@@ -131,7 +112,6 @@ export const FilterSection = ( props: {
 						{ __( 'Privacy', 'jetpack-videopress-pkg' ) }
 					</Text>
 					<CheckboxCheckmark
-						for="filter-public"
 						label={ __( 'Public', 'jetpack-videopress-pkg' ) }
 						onChange={ checked =>
 							props.onChange?.(
@@ -146,7 +126,6 @@ export const FilterSection = ( props: {
 						) }
 					/>
 					<CheckboxCheckmark
-						for="filter-private"
 						label={ __( 'Private', 'jetpack-videopress-pkg' ) }
 						onChange={ checked =>
 							props.onChange?.(
@@ -167,21 +146,18 @@ export const FilterSection = ( props: {
 						{ __( 'Rating', 'jetpack-videopress-pkg' ) }
 					</Text>
 					<CheckboxCheckmark
-						for="filter-g"
 						label={ __( 'G', 'jetpack-videopress-pkg' ) }
 						onChange={ checked => props.onChange?.( VIDEO_FILTER_RATING, VIDEO_RATING_G, checked ) }
 						checked={ filterIsChecked( VIDEO_FILTER_RATING, VIDEO_RATING_G ) }
 					/>
 					<CheckboxCheckmark
-						for="filter-pg-13"
 						label={ __( 'PG-13', 'jetpack-videopress-pkg' ) }
 						onChange={ checked =>
 							props.onChange?.( VIDEO_FILTER_RATING, VIDEO_RATING_PG_13, checked )
 						}
 						checked={ filterIsChecked( VIDEO_FILTER_RATING, VIDEO_RATING_PG_13 ) }
 					/>
 					<CheckboxCheckmark
-						for="filter-r"
 						label={ __( 'R', 'jetpack-videopress-pkg' ) }
 						onChange={ checked =>
 							props.onChange?.( VIDEO_FILTER_RATING, VIDEO_RATING_R_17, checked )