fix: enhance tooltip accessibility for checkbox options

Author: girishpanchal30

templates/frontend/inputs/checkbox.php

@@ -148,8 +148,22 @@ class="<?php echo esc_attr( $input_class ); ?>"
 
 
 				<span class="ppom-input-option-label ppom-label-checkbox"><?php echo $option_label; ?>
-				<?php if ( $is_tooltip_enabled && ! empty( $option_tooltip ) ) : ?>
-				<span data-ppom-tooltip="ppom_tooltip" class="ppom-tooltip" title="<?php echo esc_attr( $option_tooltip ); ?>"><span class="ppom-tooltip-icon" style="background-color:<?php echo esc_attr( $icon_color ); ?>;"></span></span>
+				<?php
+				if ( $is_tooltip_enabled && ! empty( $option_tooltip ) ) :
+					$tooltip_description_id = esc_attr( $dom_id . '-tooltip-description' );
+					?>
+					<span
+						data-ppom-tooltip="ppom_tooltip"
+						class="ppom-tooltip"
+						title="<?php echo esc_attr( $option_tooltip ); ?>"
+						tabindex="0"
+						role="button"
+						aria-label="<?php echo wp_strip_all_tags( $raw_label ); ?>"
+						aria-describedby="<?php echo $tooltip_description_id; ?>"
+					>
+						<span class="ppom-tooltip-icon" style="background-color:<?php echo esc_attr( $icon_color ); ?>;"></span>
+					</span>
+					<span id="<?php echo $tooltip_description_id; ?>" class="screen-reader-text"><?php echo esc_html( $option_tooltip ); ?></span>
 				<?php endif; ?>
 				</span>
 			</label>