Skip to content

Commit

Permalink
MDL-83162 theme: Review graded icons colors to improve accessiblity
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarjona
sarjona committed Sep 18, 2024
1 parent f6141a6 commit 86237ad
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 13 deletions.
2 changes: 1 addition & 1 deletion admin/tool/componentlibrary/hugo/site/data/fontawesomeicons.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion pix/i/grade_correct.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pix/i/grade_incorrect.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pix/i/grade_partiallycorrect.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 19 additions & 3 deletions theme/boost/scss/moodle/modules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1276,15 +1276,15 @@ img.userpicture {
}

.qnbutton.correct .thispageholder {
border-color: $success;
border-color: #32702e;
}

.qnbutton.incorrect .thispageholder {
border-color: $danger;
border-color: #b92d1d;
}

.qnbutton.partiallycorrect .thispageholder {
border-color: $warning;
border-color: #87612c;
}

.qnbutton.correct,
Expand Down Expand Up @@ -1325,6 +1325,7 @@ img.userpicture {
.qnbutton.correct .trafficlight {
background-image: url([[pix:core|i/grade_correct]]);
color: $success;
background-size: 14px;
}

.qnbutton.blocked .trafficlight {
Expand All @@ -1335,11 +1336,13 @@ img.userpicture {
.qnbutton.incorrect .trafficlight {
background-image: url([[pix:core|i/grade_incorrect]]);
color: $danger;
background-size: 14px;
}

.qnbutton.partiallycorrect .trafficlight {
background-image: url([[pix:core|i/grade_partiallycorrect]]);
color: $warning;
background-size: 14px;
}

.qnbutton.complete .trafficlight,
Expand All @@ -1359,6 +1362,19 @@ img.userpicture {
margin: 2px;
}

/* Override the color of the quiz attempt icons for accessibility. */
#attemptsform .icon.text-warning {
color: #87612c !important; /* stylelint-disable-line declaration-no-important */
}

#attemptsform .icon.text-danger {
color: #b92d1d !important; /* stylelint-disable-line declaration-no-important */
}

#attemptsform .icon.text-success {
color: #32702e !important; /* stylelint-disable-line declaration-no-important */
}

/* Countdown timer. */
#page-mod-quiz-attempt #region-main {
overflow-x: inherit;
Expand Down
22 changes: 19 additions & 3 deletions theme/boost/style/moodle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34695,13 +34695,13 @@ img.userpicture {
border-radius: 0 0 3px 3px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .thispageholder {
border-color: #357a32;
border-color: #32702e;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .thispageholder {
border-color: #ca3120;
border-color: #b92d1d;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .thispageholder {
border-color: #f0ad4e;
border-color: #87612c;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct,
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
Expand Down Expand Up @@ -34735,6 +34735,7 @@ img.userpicture {
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
background-image: url([[pix:core|i/grade_correct]]);
color: #357a32;
background-size: 14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.blocked .trafficlight {
background-image: url([[pix:core|t/locked]]);
Expand All @@ -34743,10 +34744,12 @@ img.userpicture {
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
background-image: url([[pix:core|i/grade_incorrect]]);
color: #ca3120;
background-size: 14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
background-image: url([[pix:core|i/grade_partiallycorrect]]);
color: #f0ad4e;
background-size: 14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
Expand All @@ -34764,6 +34767,19 @@ img.userpicture {
margin: 2px;
}

/* Override the color of the quiz attempt icons for accessibility. */
#attemptsform .icon.text-warning {
color: #87612c !important; /* stylelint-disable-line declaration-no-important */
}

#attemptsform .icon.text-danger {
color: #b92d1d !important; /* stylelint-disable-line declaration-no-important */
}

#attemptsform .icon.text-success {
color: #32702e !important; /* stylelint-disable-line declaration-no-important */
}

/* Countdown timer. */
#page-mod-quiz-attempt #region-main {
overflow-x: inherit;
Expand Down
22 changes: 19 additions & 3 deletions theme/classic/style/moodle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34695,13 +34695,13 @@ img.userpicture {
border-radius: 0 0 3px 3px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .thispageholder {
border-color: #357a32;
border-color: #32702e;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .thispageholder {
border-color: #ca3120;
border-color: #b92d1d;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .thispageholder {
border-color: #f0ad4e;
border-color: #87612c;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct,
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
Expand Down Expand Up @@ -34735,6 +34735,7 @@ img.userpicture {
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
background-image: url([[pix:core|i/grade_correct]]);
color: #357a32;
background-size: 14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.blocked .trafficlight {
background-image: url([[pix:core|t/locked]]);
Expand All @@ -34743,10 +34744,12 @@ img.userpicture {
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
background-image: url([[pix:core|i/grade_incorrect]]);
color: #ca3120;
background-size: 14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
background-image: url([[pix:core|i/grade_partiallycorrect]]);
color: #f0ad4e;
background-size: 14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
Expand All @@ -34764,6 +34767,19 @@ img.userpicture {
margin: 2px;
}

/* Override the color of the quiz attempt icons for accessibility. */
#attemptsform .icon.text-warning {
color: #87612c !important; /* stylelint-disable-line declaration-no-important */
}

#attemptsform .icon.text-danger {
color: #b92d1d !important; /* stylelint-disable-line declaration-no-important */
}

#attemptsform .icon.text-success {
color: #32702e !important; /* stylelint-disable-line declaration-no-important */
}

/* Countdown timer. */
#page-mod-quiz-attempt #region-main {
overflow-x: inherit;
Expand Down

0 comments on commit 86237ad

Please sign in to comment.