From af22c038b77a5670f9fa5190f2a63ac761e582c9 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 18 Aug 2023 23:24:35 +0800
Subject: [PATCH] MDL-79056 gradereport_user: Set grade category and item names
 as th

* The table cells mentioned in the `headers` attribute of other table
cells need to be using the table header <th> tag. Otherwise, HTML
validation fails.
---
 grade/report/user/classes/report/user.php |  6 ++++
 grade/report/user/styles.css              | 37 ++++++++++++++---------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/grade/report/user/classes/report/user.php b/grade/report/user/classes/report/user.php
index 5ec773e5001..67bde03025d 100644
--- a/grade/report/user/classes/report/user.php
+++ b/grade/report/user/classes/report/user.php
@@ -1054,6 +1054,12 @@ class user extends grade_report {
                 if (!is_null($content)) {
                     $rowcell = new \html_table_cell($content);
 
+                    // Grade item names and cateogry names are referenced in the `headers` attribute of table cells.
+                    // These table cells should be set to <th> tags.
+                    if ($tablecolumn === 'itemname') {
+                        $rowcell->header = true;
+                    }
+
                     if (isset($rowdata[$tablecolumn]['class'])) {
                         $rowcell->attributes['class'] = $rowdata[$tablecolumn]['class'];
                     }
diff --git a/grade/report/user/styles.css b/grade/report/user/styles.css
index 05335c51e98..580ba9bcad9 100644
--- a/grade/report/user/styles.css
+++ b/grade/report/user/styles.css
@@ -67,6 +67,8 @@
 .grade-report-user .user-grade .baggt,
 .grade-report-user .user-grade .baggb {
     font-weight: bold;
+    background-color: #f8f9fa;
+    border: none;
 }
 
 .path-grade-report-user .user-report-container,
@@ -99,23 +101,30 @@
     border-bottom: 1px solid #dee2e6;
 }
 
-.path-grade-report-user .user-grade td.category,
-.grade-report-user .user-grade td.category {
+.path-grade-report-user .user-grade th.column-itemname:not(.header,.category,.baggt,.baggb),
+.grade-report-user .user-grade th.column-itemname:not(.header,.category,.baggt,.baggb) {
+    background-color: white;
+    font-weight: normal;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.path-grade-report-user .user-grade th.category,
+.grade-report-user .user-grade th.category {
     background-color: white;
     border: 1px solid #dee2e6;
     padding-left: 10px;
     font-weight: bold;
 }
 
-.path-grade-report-user .user-grade td.category a[aria-expanded="true"] .expanded,
-.path-grade-report-user .user-grade td.category a[aria-expanded="false"] .collapsed,
-.grade-report-user .user-grade td.category a[aria-expanded="true"] .expanded,
-.grade-report-user .user-grade td.category a[aria-expanded="false"] .collapsed {
+.path-grade-report-user .user-grade th.category a[aria-expanded="true"] .expanded,
+.path-grade-report-user .user-grade th.category a[aria-expanded="false"] .collapsed,
+.grade-report-user .user-grade th.category a[aria-expanded="true"] .expanded,
+.grade-report-user .user-grade th.category a[aria-expanded="false"] .collapsed {
     display: none;
 }
 
-.path-grade-report-user .user-grade td.category a.toggle-category,
-.grade-report-user .user-grade td.category a.toggle-category {
+.path-grade-report-user .user-grade th.category a.toggle-category,
+.grade-report-user .user-grade th.category a.toggle-category {
     height: 24px;
     width: 24px;
     font-size: 12px;
@@ -123,8 +132,8 @@
     margin-right: 3px;
 }
 
-.path-grade-report-user .user-grade td.category a.toggle-category i,
-.grade-report-user .user-grade td.category a.toggle-category i {
+.path-grade-report-user .user-grade th.category a.toggle-category i,
+.grade-report-user .user-grade th.category a.toggle-category i {
     font-size: 12px;
     width: 12px;
     height: 12px;
@@ -173,14 +182,14 @@
 }
 
 @media print {
-    .path-grade-report-user .user-grade td.category,
-    .grade-report-user .user-grade td.category {
+    .path-grade-report-user .user-grade th.category,
+    .grade-report-user .user-grade th.category {
         border-left: none;
         border-right: none;
     }
 
-    .path-grade-report-user .user-grade td.category a.toggle-category,
-    .grade-report-user .user-grade td.category a.toggle-category
+    .path-grade-report-user .user-grade th.category a.toggle-category,
+    .grade-report-user .user-grade th.category a.toggle-category
     .path-grade-report-user #page-footer {
         display: none;
     }