MDL-84981 core_grades: Improve penalty status icon accessibility and styling

Author: Fragonite

grade/templates/penalty_status.mustache

@@ -26,24 +26,23 @@
 }}
 
 {{#isexempt}}
-    <span class="gradepenalty-status" data-bs-toggle="tooltip" title="{{exemptioninfo}}">
-        {{#pix}}{{exemptionicon.name}}, {{exemptionicon.component}}, {{exemptioninfo}}{{/pix}}
-    </span>
+    <span class="gradepenaltystatus" data-bs-toggle="tooltip" title="{{exemptioninfo}}"><!-- Prevent whitespace
+    -->{{#pix}}{{exemptionicon.name}}, {{exemptionicon.component}}, {{exemptioninfo}}{{/pix}}</span>
 {{/isexempt}}
 {{^isexempt}}
     {{#penaltyapplied}}
-        <span class="gradepenalty-status" data-bs-toggle="tooltip" title="{{penaltyinfo}}">
-            {{#pix}}{{penaltyicon.name}}, {{penaltyicon.component}}, {{penaltyinfo}}{{/pix}}
-        </span>
+        <span class="gradepenaltystatus" data-bs-toggle="tooltip" title="{{penaltyinfo}}"><!-- Prevent whitespace
+        -->{{#pix}}{{penaltyicon.name}}, {{penaltyicon.component}}, {{penaltyinfo}}{{/pix}}</span>
     {{/penaltyapplied}}
 {{/isexempt}}
 
 {{#js}}
 require(['theme_boost/bootstrap/tooltip'], function(Tooltip) {
     // Re-init the tooltip to ensure those dynamically added through AJAX are initialized
-    document.querySelectorAll('.penalty-status[data-bs-toggle="tooltip"]').forEach(tooltipElement => {
+    document.querySelectorAll('.gradepenaltystatus[data-bs-toggle="tooltip"]').forEach(tooltipElement => {
         Tooltip.getInstance(tooltipElement)?.dispose();
         new Tooltip(tooltipElement);
+        tooltipElement.querySelector('i[title]').removeAttribute('title');
     });
 });
 {{/js}}

theme/boost/scss/moodle/grade.scss

@@ -758,3 +758,11 @@
 .gradestatus .icon {
     margin-right: 1rem;
 }
+
+.gradepenaltystatus {
+    padding: 6px;
+
+    .icon {
+        margin: 0;
+    }
+}

theme/boost/style/moodle.css

@@ -38039,6 +38039,13 @@ p.arrow_button {
   margin-right: 1rem;
 }
 
+.gradepenaltystatus {
+  padding: 6px;
+}
+.gradepenaltystatus .icon {
+  margin: 0;
+}
+
 .columns-autoflow-1to1to1 {
   column-count: 3;
 }

theme/classic/style/moodle.css

@@ -38039,6 +38039,13 @@ p.arrow_button {
   margin-right: 1rem;
 }
 
+.gradepenaltystatus {
+  padding: 6px;
+}
+.gradepenaltystatus .icon {
+  margin: 0;
+}
+
 .columns-autoflow-1to1to1 {
   column-count: 3;
 }