From ba97a7368bc1362932116aa85d53896029226d26 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Tue, 17 Jan 2023 15:04:29 +0000
Subject: [PATCH] change semantic structure from divs to table - user details

---
 .../src/components/UserDetails/component.jsx  | 123 +++++++++---------
 1 file changed, 63 insertions(+), 60 deletions(-)

diff --git a/bbb-learning-dashboard/src/components/UserDetails/component.jsx b/bbb-learning-dashboard/src/components/UserDetails/component.jsx
index 688f51c844..cffe50a5d0 100644
--- a/bbb-learning-dashboard/src/components/UserDetails/component.jsx
+++ b/bbb-learning-dashboard/src/components/UserDetails/component.jsx
@@ -205,10 +205,10 @@ const UserDatailsComponent = (props) => {
     );
 
     return (
-      <div className="p-6 flex flex-row justify-between items-center">
-        <div className="min-w-[40%] text-ellipsis">{question}</div>
+      <tr className="p-6 flex flex-row justify-between items-center">
+        <td className="min-w-[40%] text-ellipsis">{question}</td>
         { isAnonymous ? (
-          <div
+          <td
             className="min-w-[20%] grow text-center mx-3"
           >
             <span
@@ -232,11 +232,11 @@ const UserDatailsComponent = (props) => {
                 />
               </svg>
             </span>
-          </div>
+          </td>
         ) : (
-          <div className="min-w-[20%] grow text-center mx-3">{answers.map((answer) => <p title={answer} className="overflow-hidden text-ellipsis">{answer}</p>)}</div>
+          <td className="min-w-[20%] grow text-center mx-3">{answers.map((answer) => <p title={answer} className="overflow-hidden text-ellipsis">{answer}</p>)}</td>
         ) }
-        <div
+        <td
           className="min-w-[40%] text-ellipsis text-center overflow-hidden"
           title={mostCommonAnswer
             ? capitalizeFirstLetter(mostCommonAnswer)
@@ -248,8 +248,8 @@ const UserDatailsComponent = (props) => {
               id: 'app.learningDashboard.usersTable.notAvailable',
               defaultMessage: 'N/A',
             }) }
-        </div>
-      </div>
+        </td>
+      </tr>
     );
   }
 
@@ -257,14 +257,14 @@ const UserDatailsComponent = (props) => {
     category, average, activityPoints, totalOfActivity,
   ) {
     return (
-      <div className="p-6 flex flex-row justify-between items-end">
-        <div className="min-w-[20%] text-ellipsis overflow-hidden">
+      <tr className="p-6 flex flex-row justify-between items-end">
+        <td className="min-w-[20%] text-ellipsis overflow-hidden">
           <FormattedMessage
             id={`app.learningDashboard.userDetails.${toCamelCase(category)}`}
             defaultMessage={category}
           />
-        </div>
-        <div className="min-w-[60%] grow text-center text-sm">
+        </td>
+        <td className="min-w-[60%] grow text-center text-sm">
           <div className="mb-2">
             { (function getAverage() {
               if (average >= 0 && category === 'Talk Time') return tsToHHmmss(average);
@@ -284,13 +284,13 @@ const UserDatailsComponent = (props) => {
                 : null }
             </div>
           </div>
-        </div>
-        <div className="min-w-[20%] text-sm text-ellipsis overflow-hidden text-right rtl:text-left">
+        </td>
+        <td className="min-w-[20%] text-sm text-ellipsis overflow-hidden text-right rtl:text-left">
           { activityPoints >= 0
             ? <FormattedNumber value={activityPoints} minimumFractionDigits="0" maximumFractionDigits="1" />
             : <FormattedMessage id="app.learningDashboard.usersTable.notAvailable" defaultMessage="N/A" /> }
-        </div>
-      </div>
+        </td>
+      </tr>
     );
   }
 
@@ -420,7 +420,7 @@ const UserDatailsComponent = (props) => {
         </div>
         { !user.isModerator && (
           <>
-            <div className="bg-white shadow rounded mb-4 table w-full">
+            <div className="bg-white shadow rounded mb-4 w-full">
               <div className="p-6 text-lg flex items-center">
                 <div className="p-2 rounded-full bg-green-100 text-green-700">
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -436,40 +436,42 @@ const UserDatailsComponent = (props) => {
                   </span>
                 </p>
               </div>
-              <div className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
-                <div className="min-w-[20%] text-ellipsis"><FormattedMessage id="app.learningDashboard.userDetails.category" defaultMessage="Category" /></div>
-                <div className="grow text-center"><FormattedMessage id="app.learningDashboard.userDetails.average" defaultMessage="Average" /></div>
-                <div className="min-w-[20%] text-ellipsis text-right rtl:text-left"><FormattedMessage id="app.learningDashboard.userDetails.activityPoints" defaultMessage="Activity Points" /></div>
-              </div>
-              { ['Talk Time', 'Messages', 'Emojis', 'Raise Hands', 'Poll Votes'].map((category) => {
-                let totalOfActivity = 0;
+              <table className="bg-white shadow rounded mb-4 table w-full">
+                <tr className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
+                  <th aria-label="Category" className="min-w-[20%] text-ellipsis font-normal text-left"><FormattedMessage id="app.learningDashboard.userDetails.category" defaultMessage="Category" /></th>
+                  <th aria-label="Average" className="grow text-center font-normal"><FormattedMessage id="app.learningDashboard.userDetails.average" defaultMessage="Average" /></th>
+                  <th aria-label="Activity Points" className="min-w-[20%] text-ellipsis text-right rtl:text-left font-normal"><FormattedMessage id="app.learningDashboard.userDetails.activityPoints" defaultMessage="Activity Points" /></th>
+                </tr>
+                { ['Talk Time', 'Messages', 'Emojis', 'Raise Hands', 'Poll Votes'].map((category) => {
+                  let totalOfActivity = 0;
 
-                switch (category) {
-                  case 'Talk Time':
-                    totalOfActivity = user.talk.totalTime;
-                    break;
-                  case 'Messages':
-                    totalOfActivity = user.totalOfMessages;
-                    break;
-                  case 'Emojis':
-                    totalOfActivity = user.emojis.filter((emoji) => emoji.name !== 'raiseHand').length;
-                    break;
-                  case 'Raise Hands':
-                    totalOfActivity = user.emojis.filter((emoji) => emoji.name === 'raiseHand').length;
-                    break;
-                  case 'Poll Votes':
-                    totalOfActivity = Object.values(user.answers).length;
-                    break;
-                  default:
-                }
+                  switch (category) {
+                    case 'Talk Time':
+                      totalOfActivity = user.talk.totalTime;
+                      break;
+                    case 'Messages':
+                      totalOfActivity = user.totalOfMessages;
+                      break;
+                    case 'Emojis':
+                      totalOfActivity = user.emojis.filter((emoji) => emoji.name !== 'raiseHand').length;
+                      break;
+                    case 'Raise Hands':
+                      totalOfActivity = user.emojis.filter((emoji) => emoji.name === 'raiseHand').length;
+                      break;
+                    case 'Poll Votes':
+                      totalOfActivity = Object.values(user.answers).length;
+                      break;
+                    default:
+                  }
 
-                return renderActivityScoreItem(
-                  category,
-                  averages[category],
-                  activityPointsFunctions[category](user),
-                  totalOfActivity,
-                );
-              }) }
+                  return renderActivityScoreItem(
+                    category,
+                    averages[category],
+                    activityPointsFunctions[category](user),
+                    totalOfActivity,
+                  );
+                }) }
+              </table>
             </div>
             <div className="bg-white shadow rounded">
               <div className="p-6 text-lg flex items-center">
@@ -480,16 +482,18 @@ const UserDatailsComponent = (props) => {
                 </div>
                 <p className="ltr:ml-2 rtl:mr-2"><FormattedMessage id="app.learningDashboard.indicators.polls" defaultMessage="Polls" /></p>
               </div>
-              <div className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
-                <div className="min-w-[40%] text-ellipsis"><FormattedMessage id="app.learningDashboard.userDetails.poll" defaultMessage="Poll" /></div>
-                <div className="grow text-center"><FormattedMessage id="app.learningDashboard.userDetails.response" defaultMessage="Response" /></div>
-                <div className="min-w-[40%] text-ellipsis text-center"><FormattedMessage id="app.learningDashboard.userDetails.mostCommonAnswer" defaultMessage="Most Common Answer" /></div>
-              </div>
-              { Object.values(polls || {})
-                .map((poll) => renderPollItem(
-                  poll,
-                  getUserAnswer(poll),
-                )) }
+              <table className="w-full">
+                <tr className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
+                  <th aria-label="Poll" className="min-w-[40%] text-ellipsis font-normal text-left"><FormattedMessage id="app.learningDashboard.userDetails.poll" defaultMessage="Poll" /></th>
+                  <th aria-label="Response" className="grow text-center font-normal"><FormattedMessage id="app.learningDashboard.userDetails.response" defaultMessage="Response" /></th>
+                  <th aria-label="Most Common Answer" className="min-w-[40%] text-ellipsis text-center font-normal"><FormattedMessage id="app.learningDashboard.userDetails.mostCommonAnswer" defaultMessage="Most Common Answer" /></th>
+                </tr>
+                { Object.values(polls || {})
+                  .map((poll) => renderPollItem(
+                    poll,
+                    getUserAnswer(poll),
+                  )) }
+              </table>
             </div>
           </>
         ) }
@@ -500,7 +504,6 @@ const UserDatailsComponent = (props) => {
 
 const UserDetailsContainer = (props) => {
   const { isOpen, dispatch, user } = useContext(UserDetailsContext);
-
   return ReactDOM.createPortal(
     <UserDatailsComponent
       {...{