From 70de3c73d159d1338249c0dc6d830d171931bc14 Mon Sep 17 00:00:00 2001
From: Bill Himmelsbach <william.himmelsbach@cfpb.gov>
Date: Wed, 22 Jul 2026 07:04:17 -0700
Subject: [PATCH] feat(filing): add markdown support to filing descriptions

---
 package.json                          |  1 +
 src/filing/submission/edits/Table.css | 11 +++++++
 src/filing/submission/edits/Table.jsx | 41 +++++++++++++++++++++------
 yarn.lock                             | 31 ++++++++++++++++++++
 4 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 0134f8ede..dc18efd9d 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.2",
+    "rehype-external-links": "^3.0.0",
     "sass": "1.77.8",
     "split2": "3.2.2",
     "streamsaver": "2.0.6",
diff --git a/src/filing/submission/edits/Table.css b/src/filing/submission/edits/Table.css
index 9613181d9..809b9d9f7 100644
--- a/src/filing/submission/edits/Table.css
+++ b/src/filing/submission/edits/Table.css
@@ -42,6 +42,12 @@
   margin-bottom: 0;
 }
 
+.EditsTable caption .markdown-description,
+.EditsTable .caption .markdown-description {
+  color: #323a45;
+  font-weight: normal;
+}
+
 .EditsTable:last-of-type {
   margin-bottom: 2em;
 }
@@ -71,3 +77,8 @@
 #Q666 .caption p {
   color: #212121;
 }
+
+#Q666 caption .markdown-description,
+#Q666 .caption .markdown-description {
+  color: #212121;
+}
\ No newline at end of file
diff --git a/src/filing/submission/edits/Table.jsx b/src/filing/submission/edits/Table.jsx
index 01cd6ecba..797e9d826 100644
--- a/src/filing/submission/edits/Table.jsx
+++ b/src/filing/submission/edits/Table.jsx
@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types'
+import Markdown from 'react-markdown'
+import rehypeExternalLinks from 'rehype-external-links'
 import Loading from '../../../common/LoadingIcon.jsx'
 import { splitEditPart, splitYearQuarter } from '../../api/utils.js'
 import Pagination from '../../pagination/container.jsx'
@@ -65,7 +67,13 @@ export const renderTableCaption = (props) => {
   const [edit] = splitEditPart(name)
 
   const linkedName = (
-    <a href={`/documentation/fig/${year}/overview#edit-${edit}`} target='_blank' rel='noopener noreferrer'>{name}</a>
+    <a
+      href={`/documentation/fig/${year}/overview#edit-${edit}`}
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      {name}
+    </a>
   )
   let captionHeader
 
@@ -88,13 +96,13 @@ export const renderTableCaption = (props) => {
     captionHeader = 'Review your loan/application IDs'
   }
 
-  const description = props.edit.description.replace(/"/g, '')
+  const { description } = props.edit
 
   if (shouldSuppressTable(props)) {
     return (
       <div className='caption'>
         <h3>{captionHeader}</h3>
-        {description ? <p>{description}</p> : null}
+        {renderDescription(description)}
         {name === 'S040' ? (
           <p>
             Please check your file or system of record for duplicate
@@ -108,11 +116,30 @@ export const renderTableCaption = (props) => {
   return (
     <caption>
       <h3>{captionHeader}</h3>
-      {description ? <p>{description}</p> : null}
+      {renderDescription(description)}
     </caption>
   )
 }
 
+export const renderDescription = (description) => {
+  if (!description) return null
+
+  return (
+    <div className='markdown-description'>
+      <Markdown
+        rehypePlugins={[
+          [
+            rehypeExternalLinks,
+            { target: '_blank', rel: ['noopener', 'noreferrer'] },
+          ],
+        ]}
+      >
+        {description}
+      </Markdown>
+    </div>
+  )
+}
+
 export const makeTable = (props) => {
   const { edit } = props
   const { type } = props
@@ -133,11 +160,7 @@ export const makeTable = (props) => {
   className += props.paginationFade ? ' fadeOut' : ''
 
   return (
-    <table
-      width='100%'
-      className={className}
-      summary={`Report for edit ${edit.edit} - ${edit.description}`}
-    >
+    <table width='100%' className={className}>
       {caption}
       <thead>{renderHeader(edit, rowObj.rows, type)}</thead>
       <tbody>{renderBody(edit, rowObj.rows, type)}</tbody>
diff --git a/yarn.lock b/yarn.lock
index cad218efb..2125c4133 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8239,6 +8239,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-is-element@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-is-element@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/f5361e4c9859c587ca8eb0d8343492f3077ccaa0f58a44cd09f35d5038f94d65152288dcd0c19336ef2c9491ec4d4e45fde2176b05293437021570aa0bc3613b
+  languageName: node
+  linkType: hard
+
 "hast-util-to-jsx-runtime@npm:^2.0.0":
   version: 2.3.6
   resolution: "hast-util-to-jsx-runtime@npm:2.3.6"
@@ -8390,6 +8399,7 @@ __metadata:
     redux: "npm:4.2.1"
     redux-logger: "npm:3.0.6"
     redux-thunk: "npm:2.4.2"
+    rehype-external-links: "npm:^3.0.0"
     sass: "npm:1.77.8"
     serialize-javascript: "npm:7.0.5"
     split2: "npm:3.2.2"
@@ -8703,6 +8713,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-absolute-url@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "is-absolute-url@npm:4.0.1"
+  checksum: 10c0/6f8f603945bd9f2c6031758bbc12352fc647bd5d807cad10d96cc6300fd0e15240cc091521a61db767e4ec0bacff257b4f1015fd5249c147bbb4a4497356c72e
+  languageName: node
+  linkType: hard
+
 "is-absolute@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-absolute@npm:1.0.0"
@@ -12630,6 +12647,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-external-links@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "rehype-external-links@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    hast-util-is-element: "npm:^3.0.0"
+    is-absolute-url: "npm:^4.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/486b5db73d8fe72611d62b4eb0b56ec71025ea32bba764ad54473f714ca627be75e057ac29243763f85a77c3810f31727ce3e03c975b3803c1c98643d038e9ae
+  languageName: node
+  linkType: hard
+
 "remark-parse@npm:^11.0.0":
   version: 11.0.0
   resolution: "remark-parse@npm:11.0.0"