Merge pull request ucfopen#1079 from ewainberg/issue/1067-add-tooltip-widget

Converts popover from the issues table into a widget

Author: dmols

assets/js/Components/Icons/FilledInfoIcon.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-export default function FilledInfoIcon({ circleColor = "var(--link-color)", iconColor = "#fff", ...props }) {
+export default function FilledInfoIcon({ circleColor = "var(--link-color)", iconColor = "var(--white)", ...props }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

assets/js/Components/Reports/IssuesTable.css

@@ -4,68 +4,6 @@
   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;

assets/js/Components/Reports/IssuesTable.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import SortableTable from '../Widgets/SortableTable'
 import { formNameFromRule } from '../../Services/Ufixit'
-import InfoIcon from '../Icons/FilledInfoIcon'
+import InfoPopover from '../Widgets/InfoPopover'
 import './IssuesTable.css'
 
 export default function IssuesTable({
@@ -33,13 +33,6 @@ 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 dialogRef = useRef(null);
 
   const sortContent = () => {
     let tempRows = (issues) ? Object.values(localIssues) : []
@@ -49,7 +42,6 @@ export default function IssuesTable({
       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 || ""
@@ -77,31 +69,6 @@ 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)
@@ -121,31 +88,10 @@ export default function IssuesTable({
         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>
+            <InfoPopover
+              t={t}
+              content={t(`form.${formName}.summary`)}
+            />
           </span>
         )
         issue.summary = t(`form.${formName}.summary`)
@@ -155,7 +101,6 @@ export default function IssuesTable({
         return issue
       }))
 
-      // Merge the issues with the same labels
       let mergedIssues = []
       let labels = []
       tempIssues.forEach((issue) => {
@@ -197,42 +142,6 @@ export default function IssuesTable({
         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>
-      )}
     </>
   )
 }

assets/js/Components/ReportsPage.js

@@ -254,9 +254,6 @@ export default function ReportsPage({t, report, settings, quickSearchTerm}) {
           <div className="flex-column w-100 flex-shrink-1 flex-grow-1">
             { showChart && (
               <div className="mt-4">
-                <div className="flex-row w-100 justify-content-center">
-                  <h2 className="primary-dark mt-0 mb-2">{t('report.title.barriers_remaining')}</h2>
-                </div>
                 <div id="resolutionsReport" className="graph-container">
                   <ResolutionsReport t={t} reports={reports}/>
                 </div>

assets/js/Components/Widgets/Combobox.css

@@ -28,6 +28,7 @@
 
 .combo-input {
   background-color: var(--white);
+  display: block;
   font-size: .85em;
   padding: .4em .15em .4em .5em;
   border: 1px solid var(--border-color);

assets/js/Components/Widgets/FixIssuesContentPreview.js

@@ -89,7 +89,7 @@ export default function FixIssuesContentPreview({
   }
 
   const addPreviewHelperElements = (doc, errorElement) => {
-    if(!activeIssue || !doc) {
+    if(!activeIssue || !doc || !errorElement) {
       return doc
     }
 

assets/js/Components/Widgets/InfoPopover.css

@@ -0,0 +1,79 @@
+.info-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.info-popover-btn {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  margin-inline-start: 4px;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  border-radius: 50%;
+}
+
+.info-popover-btn:hover,
+.info-popover-btn:focus {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 1px;
+}
+
+.icon-info {
+  transition: filter var(--transition-time);
+}
+
+.info-popover-btn:hover .icon-info,
+.info-popover-btn:focus .icon-info {
+  filter: brightness(var(--hover-brightness));
+}
+
+/* The popover dialog itself */
+.info-popover-dialog {
+  position: fixed;
+  inset: unset;
+  z-index: 1000;
+  background: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 12px 16px;
+  min-width: 220px;
+  max-width: 320px;
+  outline: none;
+}
+
+.info-popover-dialog::backdrop {
+  background: var(--backdrop-color);
+  backdrop-filter: none;
+}
+
+.info-popover-content {
+  margin-bottom: 8px;
+  text-decoration: none !important;
+  font-size: 1.1em !important;
+  color: var(--text-color) !important;
+  font-weight: normal !important;
+}
+
+.info-popover-close {
+  border: none;
+  background: none;
+  color: var(--link-color);
+  cursor: pointer;
+  font-size: 1em;
+  float: right;
+}
+
+/* Screen reader-only utility */
+.sr-only {
+  position: absolute !important;
+  left: -9999px !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}