Adds tooltips to issues table

assets/js/Components/Icons/FilledInfoIcon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function FilledInfoIcon({ circleColor = "var(--link-color)", iconColor = "#fff", ...props }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      {...props}
+    >
+      {/* Filled circle background */}
+      <circle cx="480" cy="-480" r="400" fill={circleColor} />
+      <path
+        d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+        fill={iconColor}
+      />
+    </svg>
+    );
+  }

assets/js/Components/Reports/IssuesTable.css

@@ -0,0 +1,77 @@
+.issue-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.issue-info-btn {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  border-radius: 50%;
+  transition: box-shadow 0.15s, background 0.15s;
+}
+
+.issue-info-btn:hover,
+.issue-info-btn:focus {
+  background: #e3f0fc;
+  box-shadow: 0 0 0 3px var(--link-color-hover);
+  outline: none;
+}
+
+.icon-info {
+  transition: filter 0.15s;
+}
+
+.issue-info-btn:hover .icon-info,
+.issue-info-btn:focus .icon-info {
+  filter: brightness(1.2) drop-shadow(0 2px 4px #1976d244);
+}
+
+.issue-info-popover {
+  position: fixed;
+  inset: unset;
+  z-index: 1000;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  padding: 12px 16px;
+  min-width: 220px;
+  max-width: 320px;
+  font-size: 0.95em;
+  outline: none;
+}
+
+.issue-info-popover::backdrop {
+  background: rgba(0,0,0,0.2); /* Slight dim, no blur */
+  backdrop-filter: none;
+}
+
+.issue-info-popover-content {
+  margin-bottom: 8px;
+}
+
+.issue-info-popover-close {
+  border: none;
+  background: none;
+  color: var(--link-color);
+  cursor: pointer;
+  font-size: 1em;
+  float: right;
+}
+
+.sr-only {
+  position: absolute !important;
+  left: -9999px !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}

assets/js/Components/Reports/IssuesTable.js

@@ -1,6 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import SortableTable from '../SortableTable'
 import { formNameFromRule } from '../../Services/Ufixit'
+import InfoIcon from '../Icons/FilledInfoIcon'
+import './IssuesTable.css'
 
 export default function IssuesTable({
   t,
@@ -21,7 +23,6 @@ export default function IssuesTable({
     headers.push({ id: "courses", text: t('report.header.courses') })
   }
 
-  // The "total" is always the last column of the table
   headers.push({ id: "total", text: t('report.header.total'), alignText: 'center' })
 
   const [tableSettings, setTableSettings] = useState({
@@ -31,18 +32,32 @@ export default function IssuesTable({
   })
   const [localIssues, setLocalIssues] = useState([])
   const [rows, setRows] = useState([])
+  const [popover, setPopover] = useState({ open: false, content: '', x: 0, y: 0 });
+  const popoverContentRef = useRef(null);
+  const lastButtonRef = useRef(null);
+  const [ariaLive, setAriaLive] = useState('');
+  const closeButtonRef = useRef(null);
 
-  const sortContent = () => {
+  const dialogRef = useRef(null);
 
+  const sortContent = () => {
     let tempRows = (issues) ? Object.values(localIssues) : []
     const { sortBy, ascending } = tableSettings
 
     tempRows.sort((a, b) => {
-      if (isNaN(a[sortBy]) || isNaN(b[sortBy])) {
-        return (a[sortBy].toLowerCase() > b[sortBy].toLowerCase()) ? -1 : 1
+      let aValue = a[sortBy]
+      let bValue = b[sortBy]
+
+      // If sorting by label, use labelText for comparison
+      if (sortBy === "label") {
+        aValue = a.labelText || ""
+        bValue = b.labelText || ""
       }
-      else {
-        return (Number(a[sortBy]) < Number(b[sortBy])) ? -1 : 1
+
+      if (isNaN(aValue) || isNaN(bValue)) {
+        return (aValue.toLowerCase() > bValue.toLowerCase()) ? -1 : 1
+      } else {
+        return (Number(aValue) < Number(bValue)) ? -1 : 1
       }
     })
 
@@ -61,6 +76,31 @@ export default function IssuesTable({
     setRows(sortContent())
   }, [tableSettings, localIssues])
 
+  useEffect(() => {
+    if (popover.open && dialogRef.current) {
+      if (!dialogRef.current.open) {
+        dialogRef.current.showModal();
+      }
+      if (closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      }
+      setAriaLive(popover.content);
+
+      const close = () => setPopover(p => ({ ...p, open: false }));
+      window.addEventListener('click', close);
+      return () => window.removeEventListener('click', close);
+    } else if (dialogRef.current && dialogRef.current.open) {
+      dialogRef.current.close();
+    }
+  }, [popover.open, popover.content]);
+
+  // When popover closes, return focus to the last info button
+  useEffect(() => {
+    if (!popover.open && lastButtonRef.current) {
+      lastButtonRef.current.focus();
+    }
+  }, [popover.open]);
+
   useEffect(() => {
     if (issues) {
       let tempIssues = Object.values(issues)
@@ -76,7 +116,38 @@ export default function IssuesTable({
           label = t(`form.${formName}.title`)
           searchTerm = t(`form.${formName}.title`)
         }
-        issue.label = label
+        issue.labelText = label
+        issue.label = (
+          <span className="issue-label">
+            {label}
+            <button
+              type="button"
+              title={t('report.button.issue_tooltip')}
+              aria-haspopup="dialog"
+              aria-expanded={popover.open}
+              aria-controls={popover.open ? "issue-info-popover" : undefined}
+              className="issue-info-btn"
+              ref={el => {
+                if (popover.open) return;
+                lastButtonRef.current = el;
+              }}
+              onClick={e => {
+                e.stopPropagation();
+                const rect = e.target.getBoundingClientRect();
+                setPopover({
+                  open: true,
+                  content: t(`form.${formName}.summary`),
+                  x: rect.right + window.scrollX + 8,
+                  y: rect.top + window.scrollY - 120,
+                });
+                lastButtonRef.current = e.target;
+              }}
+            >
+              <InfoIcon width={18} height={18} className="icon-info" circleColor="var(--link-color)" iconColor="#fff" />
+            </button>
+          </span>
+        )
+        issue.summary = t(`form.${formName}.summary`)
         if(quickSearchTerm !== null) {
           issue.onClick = () => quickSearchTerm(searchTerm)
         }
@@ -116,13 +187,51 @@ export default function IssuesTable({
   }, [issues])
 
   return (
-    <SortableTable
-      caption={t('report.title.issues_by_type')}
-      headers={headers}
-      rows={rows}
-      tableSettings={tableSettings}
-      handleTableSettings={handleTableSettings}
-      t={t}
-    />
+    <>
+      <SortableTable
+        caption={t('report.title.issues_by_type')}
+        headers={headers}
+        rows={rows}
+        tableSettings={tableSettings}
+        handleTableSettings={handleTableSettings}
+        t={t}
+      />
+      {/* ARIA for screen readers */}
+      <div aria-live="polite" className="sr-only">
+        {ariaLive}
+      </div>
+      {popover.open && (
+        <dialog
+          id="issue-info-popover"
+          ref={dialogRef}
+          className="issue-info-popover"
+          style={{
+            left: popover.x,
+            top: popover.y,
+          }}
+          tabIndex={0}
+          aria-labelledby="issue-info-popover-title"
+          aria-describedby="issue-info-popover-content"
+          onClick={e => e.stopPropagation()}
+        >
+          <div
+            id="issue-info-popover-content"
+            className="issue-info-popover-content"
+            tabIndex={-1}
+            ref={popoverContentRef}
+          >
+            {popover.content}
+          </div>
+          <button
+            type="button"
+            className="issue-info-popover-close"
+            ref={closeButtonRef}
+            onClick={() => setPopover({ ...popover, open: false })}
+          >
+            {t('fix.button.close_learn_more')}
+          </button>
+        </dialog>
+      )}
+    </>
   )
 }