From 2bedeff7ed2607fa17d0557e56b2434bc198eeb9 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Wed, 9 Aug 2023 06:50:54 -0500 Subject: [PATCH] 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 | 6 +- htdocs/themes/math4/math4.scss | 75 ++++++++----------- .../ContentGenerator/Problem/siblings.html.ep | 11 +-- 3 files changed, 40 insertions(+), 52 deletions(-) diff --git a/htdocs/themes/math4/math4.js b/htdocs/themes/math4/math4.js index b180770fc9..7787fd155e 100644 --- a/htdocs/themes/math4/math4.js +++ b/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( diff --git a/htdocs/themes/math4/math4.scss b/htdocs/themes/math4/math4.scss index 0f244b80dd..2485cb4ae2 100644 --- a/htdocs/themes/math4/math4.scss +++ b/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; + } } } diff --git a/templates/ContentGenerator/Problem/siblings.html.ep b/templates/ContentGenerator/Problem/siblings.html.ep index 51d0bef1a3..6e158d9f5e 100644 --- a/templates/ContentGenerator/Problem/siblings.html.ep +++ b/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; % -
+
% if ($total_correct > 0) {
% # Perfect scores deserve some stars (★)! % if ($total_correct == $num_of_problems) { @@ -24,7 +25,7 @@
% } @@ -32,7 +33,7 @@
% } @@ -40,7 +41,7 @@
% }