set alt attribute for badges

Author: ilicfilip

assets/js/web-components/prpl-badge.js

@@ -18,15 +18,13 @@ customElements.define(
 			super();
 
 			badgeId = badgeId || this.getAttribute( 'badge-id' );
+			const badgeName =
+				this.getAttribute( 'badge-name' ) || `${ prplL10n( 'badge' ) }`;
 			this.innerHTML = `
 				<img
-					src="${
-						progressPlannerBadge.remoteServerRootUrl
-					}/wp-json/progress-planner-saas/v1/badge-svg/?badge_id=${ badgeId }"
-					alt="${ prplL10n( 'badge' ) }"
-					onerror="this.onerror=null;this.src='${
-						progressPlannerBadge.placeholderImageUrl
-					}';"
+					src="${ progressPlannerBadge.remoteServerRootUrl }/wp-json/progress-planner-saas/v1/badge-svg/?badge_id=${ badgeId }"
+					alt="${ badgeName }"
+					onerror="this.onerror=null;this.src='${ progressPlannerBadge.placeholderImageUrl }';"
 				/>
 			`;
 		}

views/dashboard-widgets/score.php

@@ -7,6 +7,7 @@
 
 use Progress_Planner\Badges\Monthly;
 
+$prpl_badge = Monthly::get_instance_from_id( Monthly::get_badge_id_from_date( new \DateTime() ) );
 ?>
 <div class="prpl-dashboard-widget">
 	<div>
@@ -19,12 +20,13 @@
 			marginBottom="0"
 			data-max="<?php echo (int) Monthly::TARGET_POINTS; ?>"
 			data-value="<?php echo (float) \progress_planner()->get_admin__widgets__monthly_badges()->get_score()['target_score']; ?>"
-			data-badge-id="<?php echo \esc_attr( Monthly::get_badge_id_from_date( new \DateTime() ) ); ?>"
+			data-badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
 		>
 			<progress max="<?php echo (int) Monthly::TARGET_POINTS; ?>" value="<?php echo (float) \progress_planner()->get_admin__widgets__monthly_badges()->get_score()['target_score']; ?>">
 				<prpl-badge
 					complete="true"
-					badge-id="<?php echo \esc_attr( Monthly::get_badge_id_from_date( new \DateTime() ) ); ?>"
+					badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
+					badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"
 				></prpl-badge>
 			</progress>
 		</prpl-gauge>

views/page-widgets/badge-streak-content.php

@@ -31,7 +31,7 @@
 <div class="prpl-latest-badges-wrapper">
 	<prpl-gauge background="<?php echo \esc_attr( $prpl_widget_details->get_background() ); ?>" color="var(--prpl-color-accent-orange)">
 		<progress max="100" value="<?php echo (float) $prpl_widget_details->get_progress()['progress']; ?>">
-			<prpl-badge complete="true" badge-id="<?php echo \esc_attr( $prpl_widget_details->get_id() ); ?>"></prpl-badge>
+			<prpl-badge complete="true" badge-id="<?php echo \esc_attr( $prpl_widget_details->get_id() ); ?> " badge-name="<?php echo \esc_attr( $prpl_widget_details->get_name() ); ?>"></prpl-badge>
 		</progress>
 	</prpl-gauge>
 	<div class="prpl-badge-content-wrapper">
@@ -76,6 +76,7 @@ class="prpl-badge"
 				<prpl-badge
 					complete="<?php echo 100 === (int) $prpl_badge->get_progress()['progress'] ? 'true' : 'false'; ?>"
 					badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
+					badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"
 				></prpl-badge>
 				<p><?php echo \esc_html( $prpl_badge->get_name() ); ?></p>
 			</span>

views/page-widgets/badge-streak-maintenance.php

@@ -31,7 +31,7 @@
 <div class="prpl-latest-badges-wrapper">
 	<prpl-gauge background="<?php echo \esc_attr( $prpl_widget_details->get_background() ); ?>" color="var(--prpl-color-accent-orange)">
 		<progress max="100" value="<?php echo (float) $prpl_widget_details->get_progress()['progress']; ?>">
-			<prpl-badge complete="true" badge-id="<?php echo \esc_attr( $prpl_widget_details->get_id() ); ?>"></prpl-badge>
+			<prpl-badge complete="true" badge-id="<?php echo \esc_attr( $prpl_widget_details->get_id() ); ?>" badge-name="<?php echo \esc_attr( $prpl_widget_details->get_name() ); ?>"></prpl-badge>
 		</progress>
 	</prpl-gauge>
 	<div class="prpl-badge-content-wrapper">
@@ -76,6 +76,7 @@ class="prpl-badge"
 				<prpl-badge
 					complete="<?php echo 100 === (int) $prpl_badge->get_progress()['progress'] ? 'true' : 'false'; ?>"
 					badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
+					badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"
 				></prpl-badge>
 				<p><?php echo \esc_html( $prpl_badge->get_name() ); ?></p>
 			</span>

views/page-widgets/monthly-badges.php

@@ -29,7 +29,7 @@
 		data-badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
 	>
 		<progress max="<?php echo (int) Monthly::TARGET_POINTS; ?>" value="<?php echo (float) $prpl_widget->get_score()['target_score']; ?>">
-			<prpl-badge complete="true" badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"></prpl-badge>
+			<prpl-badge complete="true" badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>" badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"></prpl-badge>
 		</progress>
 	</prpl-gauge>
 

views/page-widgets/parts/monthly-badges.php

@@ -64,6 +64,7 @@ class="prpl-badge prpl-badge-<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
 						<prpl-badge
 							complete="<?php echo 100 === (int) $prpl_badge->progress_callback()['progress'] ? 'true' : 'false'; ?>"
 							badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
+							badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"
 						></prpl-badge>
 						<p><?php echo \esc_html( $prpl_badge->get_name() ); ?></p>
 					</span>

views/popovers/monthly-badges.php

@@ -63,6 +63,7 @@ class="prpl-badge"
 								<prpl-badge
 									complete="<?php echo $prpl_badge_completed ? 'true' : 'false'; ?>"
 									badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
+									badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"
 								></prpl-badge>
 								<p><?php echo \esc_html( $prpl_badge->get_name() ); ?></p>
 							</span>

views/popovers/parts/badge-streak-badge.php

@@ -20,6 +20,7 @@ class="prpl-badge"
 			<prpl-badge
 				complete="<?php echo 100 === (int) $prpl_badge_progress['progress'] ? 'true' : 'false'; ?>"
 				badge-id="<?php echo \esc_attr( $prpl_badge->get_id() ); ?>"
+				badge-name="<?php echo \esc_attr( $prpl_badge->get_name() ); ?>"
 			></prpl-badge>
 			<?php echo \esc_html( $prpl_badge->get_name() ); ?>
 		</div>