fix: Revise length of generated GitHub issue link to avoid hitting URI max length (#1336)

Limit length of encoded body included in generated GitHub Issue URI

---------

Co-authored-by: Howard Edwards <[email protected]>

Author: stalgiag

client/components/CandidateReview/CandidateModals/NotApprovedModal/index.jsx

@@ -15,7 +15,7 @@ const NotApprovedModal = ({ handleAction = () => {}, githubUrl = '#' }) => {
         <>
           <p className="review-confirmation-content">Thank you for reviewing</p>
           <p className="review-confirmation-share">
-            if you haven’t opened any issues yet, please{' '}
+            If you haven’t opened any issues yet, please{' '}
             <a href={githubUrl} target="_blank" rel="noreferrer">
               open an issue describing why this is not approved.
             </a>

client/components/CandidateReview/CandidateTestPlanRun/index.jsx

@@ -360,6 +360,7 @@ const CandidateTestPlanRun = () => {
     isCandidateReviewChangesRequested: false,
     testTitle: undefined,
     testRowNumber: undefined,
+    testSequenceNumber: undefined,
     testRenderedUrl: undefined
   });
 

client/utils/createIssueLink.js

@@ -3,13 +3,51 @@ const GITHUB_ISSUES_URL =
     ? 'https://github.com/w3c/aria-at'
     : 'https://github.com/bocoup/aria-at';
 
+// Maximum URL length for GitHub issues
+// Tested on multiple browsers and devices
+const MAX_GITHUB_URL_LENGTH = 8000;
+
 // TODO: Use At.key
 const atLabelMap = {
   'VoiceOver for macOS': 'vo',
   JAWS: 'jaws',
   NVDA: 'nvda'
 };
 
+/**
+ * Returns a truncation message for URLs that are too long.
+ *
+ * @param {number|null} testSequenceNumber - Optional test sequence number to include in truncation message
+ * @returns {string} The truncation message
+ */
+const getTruncationMessage = (testSequenceNumber = null) => {
+  return `...\n\n[**Content truncated due to URL length limits.** Please visit [${
+    window.location
+  }](${window.location}) to review ${
+    !testSequenceNumber ? 'further' : `Test ${testSequenceNumber}`
+  }.]`;
+};
+
+/**
+ * Truncates a body string to ensure the resulting URL stays under the maximum length.
+ *
+ * @param {string} body - The original body content
+ * @param {string} baseUrl - The URL without the body (including title and labels)
+ * @param {number|null} testSequenceNumber - Optional test sequence number to include in truncation message
+ * @returns {string} The truncated body that will keep the URL under the maximum length
+ */
+const truncateUrlBody = (body, baseUrl, testSequenceNumber = null) => {
+  const maxUrlLength = MAX_GITHUB_URL_LENGTH;
+  const truncationMessage = getTruncationMessage(testSequenceNumber);
+
+  // Multiply by 0.65 to account for encoding
+  const maxBodyLength = Math.floor(
+    (maxUrlLength - baseUrl.length - truncationMessage.length) * 0.65
+  );
+
+  return body.substring(0, maxBodyLength) + truncationMessage;
+};
+
 /**
  * Creates a link to open a new issue on the GitHub repository.
  *
@@ -183,10 +221,19 @@ const createIssueLink = ({
     body += `\n${conflictMarkdown}`;
   }
 
-  return (
-    `${GITHUB_ISSUES_URL}/issues/new?title=${encodeURI(title)}&` +
-    `labels=${labels}&body=${encodeURIComponent(body)}`
-  );
+  // Create the base URL without the body
+  const baseUrl = `${GITHUB_ISSUES_URL}/issues/new?title=${encodeURI(
+    title
+  )}&labels=${labels}&body=`;
+
+  let url = baseUrl + encodeURIComponent(body);
+
+  if (url.length > MAX_GITHUB_URL_LENGTH) {
+    body = truncateUrlBody(body, baseUrl, testSequenceNumber);
+    url = baseUrl + encodeURIComponent(body);
+  }
+
+  return url;
 };
 
 /**