Progress bar accessibility improvements.

The progress bar elements are now focusable, and tooltips active on both
hover and focus.  Note that this makes all `.set-id-tooltips` active on
hover and focus.  That means that this also applies to the actual set
ids as well on the problem sets page.

The box shadows on the progress bar and contained elements are now
black and thicker.

When a progress bar element is focused the border is thicker and box
shadow a bit lighter.  This may not be good enough by itself, but should
be good enough considering that the tooltip is really what is important
here.  In fact I think that visual aspects of the progress bar in
general are not as important with the tooltip being active on focus.

Also make the style more specific.  The `.progress` and `.progress-bar`
classes are bootstrap classes that could conceivably be used for another
progress bar.  So a `.set-progress` class is added to distinquish this
from other progress bars.

htdocs/themes/math4/math4.js

@@ -97,9 +97,9 @@
 	// Homework sets editor config
 	// FIXME: These are really general purpose tooltips and not just in the homework sets editor.  So the class name
 	// should be chosen to better reflect this.
-	document.querySelectorAll('.set-id-tooltip').forEach(
-		(el) => {if (el.dataset.bsTitle) new bootstrap.Tooltip(el, {trigger: 'hover', fallbackPlacements: []});}
-	);
+	document.querySelectorAll('.set-id-tooltip').forEach((el) => {
+		if (el.dataset.bsTitle) new bootstrap.Tooltip(el, { fallbackPlacements: [] });
+	});
 
 	// Hardcopy tooltips shown on the Problem Sets page.
 	document.querySelectorAll('.hardcopy-tooltip').forEach(

htdocs/themes/math4/math4.scss

@@ -302,55 +302,42 @@ $site-nav-width: 250px !default;
 }
 
 /* Progress Bar */
-div {
-	&.progress {
-		height: 20px;
-		max-width: 100%;
-		border: 1px solid #B6B6B4;
-		background-color: #DDDDDD;
-		border-radius: 5px;
-		margin-bottom: 10px;
-		position: relative;
-		align-items: center;
-	}
+.progress.set-progress {
+	height: 25px;
+	max-width: 100%;
+	box-shadow: inset 0 0 3px 2px #000;
+	background-color: #ddd;
+	border-radius: 5px;
+	margin-bottom: 10px;
+	align-items: center;
 
-	&.correct-progress {
-		color: black;
-		background-color: #8F8; /* same color used as 'correct' */
-		box-shadow: inset 0 0 2px 1px #00FF00;
-		border-radius: 4px;
-		display: inline-block;
-		box-sizing: border-box;
-		text-align: center;
+	.progress-bar {
+		box-shadow: inset 0 0 3px 2px #000;
 		height: 100%;
-	}
-
-	&.incorrect-progress {
 		color: black;
-		background-color: #FF9494; /* same color used as 'incorrect' */
-		box-shadow: inset 0 0 2px 1px #FF0000;
-		border-radius: 4px;
-		display: inline-block;
-		box-sizing: border-box;
-		height: 100%;
-	}
 
-	&.inprogress-progress {
-		color: black;
-		background-color: #FFFF00; /* yellow */
-		box-shadow: inset 0 0 2px 1px #FBB117; /* beer border*/
-		border-radius: 4px;
-		display: inline-block;
-		box-sizing: border-box;
-		height: 100%;
-	}
+		&.correct-progress {
+			background-color: #8f8; /* same color used as 'correct' */
+		}
 
-	&.unattempted-progress {
-		color: black;
-		background-color: transparent;
-		display: inline-block;
-		box-sizing: border-box;
-		height: 100%;
+		&.incorrect-progress {
+			background-color: #ff9494; /* same color used as 'incorrect' */
+		}
+
+		&.inprogress-progress {
+			background-color: #ff0; /* yellow */
+		}
+
+		&.unattempted-progress {
+			background-color: transparent;
+		}
+
+		&:focus {
+			outline: 0;
+			box-shadow: inset 0 0 3px 2px #333;
+			border: 3px solid black;
+			z-index: 2;
+		}
 	}
 }
 

templates/ContentGenerator/Problem/siblings.html.ep

@@ -7,12 +7,13 @@
 		% my $progress_bar_inprogress_width  = $total_inprogress * 100 / $num_of_problems;
 		% my $progress_bar_unattempted_width = $unattempted * 100 / $num_of_problems;
 		%
-		<div class="progress set-id-tooltip" aria-label="progress bar for current problem set" role="figure">
+		<div class="progress set-progress set-id-tooltip" aria-label="progress bar for current problem set"
+			role="figure">
 			% if ($total_correct > 0) {
 				<div class="progress-bar correct-progress set-id-tooltip"
 					style="width:<%= $progress_bar_correct_width %>%"
 					aria-label="correct progress bar for current problem set" role="figure"
-					data-bs-toggle="tooltip" data-bs-placement="bottom"
+					data-bs-toggle="tooltip" data-bs-placement="bottom" tabindex="0"
 					data-bs-title="<%= maketext('Correct: [_1]/[_2]', $total_correct, $num_of_problems) %>">
 					% # Perfect scores deserve some stars (&#9733;)!
 					% if ($total_correct == $num_of_problems) {
@@ -24,23 +25,23 @@
 				<div class="progress-bar inprogress-progress set-id-tooltip"
 					style="width:<%= $progress_bar_inprogress_width %>%"
 					aria-label="in progress bar for current problem set" role="figure"
-					data-bs-toggle="tooltip" data-bs-placement="bottom"
+					data-bs-toggle="tooltip" data-bs-placement="bottom" tabindex="0"
 					data-bs-title="<%= maketext('In progress: [_1]/[_2]', $total_inprogress, $num_of_problems) %>">
 				</div>
 			% }
 			% if ($total_incorrect > 0) {
 				<div class="progress-bar incorrect-progress set-id-tooltip"
 					style="width:<%= $progress_bar_incorrect_width %>%"
 					aria-label="incorrect progress bar for current problem set" role="figure"
-					data-bs-toggle="tooltip" data-bs-placement="bottom"
+					data-bs-toggle="tooltip" data-bs-placement="bottom" tabindex="0"
 					data-bs-title="<%= maketext('Incorrect: [_1]/[_2]', $total_incorrect, $num_of_problems) %>">
 				</div>
 			% }
 			% if ($unattempted > 0) {
 				<div class="progress-bar unattempted-progress set-id-tooltip"
 					style="width:<%= $progress_bar_unattempted_width %>%"
 					aria-label="unattempted progress bar for current problem set" role="figure"
-					data-bs-toggle="tooltip" data-bs-placement="bottom"
+					data-bs-toggle="tooltip" data-bs-placement="bottom" tabindex="0"
 					data-bs-title="<%= maketext('Unattempted: [_1]/[_2]', $unattempted, $num_of_problems) %>">
 				</div>
 			% }