From 2523fbc54fc2be6c7e50e8f31f5b6adb7796048a Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Sat, 15 Jul 2023 18:20:46 +0000
Subject: [PATCH] convert first column from td to th / add scope & label

---
 .../src/components/StatusTable.jsx                  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/bbb-learning-dashboard/src/components/StatusTable.jsx b/bbb-learning-dashboard/src/components/StatusTable.jsx
index bd2923987f..50c7faa0bc 100644
--- a/bbb-learning-dashboard/src/components/StatusTable.jsx
+++ b/bbb-learning-dashboard/src/components/StatusTable.jsx
@@ -204,7 +204,7 @@ class StatusTable extends React.Component {
         <tbody className="bg-white divide-y whitespace-nowrap">
           { hasSlides ? (
             <tr className="bg-inherit">
-              <td className={`bg-inherit z-30 sticky ${isRTL ? 'right-0' : 'left-0'}`} />
+              <th className={`bg-inherit z-30 sticky ${isRTL ? 'right-0' : 'left-0'}`} scope="row" aria-label={intl.formatMessage(intlMessages.thumbnail)} />
               { periods.map((period) => {
                 const { slide, start, end } = period;
                 const padding = isRTL ? 'paddingLeft' : 'paddingRight';
@@ -260,7 +260,14 @@ class StatusTable extends React.Component {
               })
               .map((user) => (
                 <tr className="text-gray-700 bg-inherit">
-                  <td className={`z-30 px-4 py-3 bg-inherit sticky ${isRTL ? 'right-0' : 'left-0'}`}>
+                  <th
+                    className={`z-30 px-4 py-3 bg-inherit sticky ${isRTL ? 'right-0' : 'left-0'}`}
+                    scope="row"
+                    aria-label={intl.formatMessage({
+                      id: 'app.learningDashboard.user',
+                      defaultMessage: 'User',
+                    })}
+                  >
                     <div className="flex items-center text-sm">
                       <div className="relative hidden w-8 h-8 rounded-full md:block">
                         <UserAvatar user={user} />
@@ -270,7 +277,7 @@ class StatusTable extends React.Component {
                         <p className="font-semibold truncate xl:max-w-sm max-w-xs">{user.name}</p>
                       </div>
                     </div>
-                  </td>
+                  </th>
                   { periods.map((period) => {
                     const boundaryLeft = period.start;
                     const boundaryRight = period.end;