Support HTML in checkbox-control tooltip (#42926)

* Support HTML in checkbox-control tooltip

* Add HTML support for tooltip in label

packages/js/product-editor/changelog/add-html-checkbox

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Support HTML in checkbox-control tooltip and Label tooltip

packages/js/product-editor/src/components/checkbox-control/checkbox-control.tsx

@@ -8,6 +8,7 @@ import { Icon, help } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { sanitizeHTML } from '../../utils/sanitize-html';
 
 export type CheckboxProps = {
 	label: string;
@@ -56,7 +57,13 @@ export const Checkbox: React.FC< CheckboxProps > = ( {
 				/>
 				{ tooltip && (
 					<Tooltip
-						text={ <span>{ tooltip }</span> }
+						text={
+							<span
+								dangerouslySetInnerHTML={ sanitizeHTML(
+									tooltip
+								) }
+							></span>
+						}
 						position="top center"
 						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 						// @ts-ignore Incorrect types.

packages/js/product-editor/src/components/label/label.tsx

@@ -6,6 +6,11 @@ import { __ } from '@wordpress/i18n';
 import { Icon, help as helpIcon } from '@wordpress/icons';
 import { Tooltip } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { sanitizeHTML } from '../../utils/sanitize-html';
+
 export interface LabelProps {
 	label: string;
 	required?: boolean;
@@ -36,7 +41,11 @@ export const Label: React.FC< LabelProps > = ( {
 
 			{ tooltip && (
 				<Tooltip
-					text={ <span>{ tooltip }</span> }
+					text={
+						<span
+							dangerouslySetInnerHTML={ sanitizeHTML( tooltip ) }
+						></span>
+					}
 					position="top center"
 					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 					// @ts-ignore Incorrect types.