clickable URL

lib/reporter.js

@@ -164,6 +164,7 @@ const addAnyField = (error) =>
   });
 
 function recordPage(
+  prefix,
   url,
   label,
   startTime,
@@ -191,6 +192,7 @@ function recordPage(
     violations: axeResults.violations,
     time: elapsed[0] + elapsed[1] / 1000000000,
     screenshotFile,
+    prefix,
     url,
     label,
     order: index,

lib/testUrls.js

@@ -80,6 +80,7 @@ async function testPage({ page, data, worker }) {
   );
 
   recordPage(
+    prefix,
     url,
     label,
     startTime,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/patternfly-a11y",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Accessibility utilities for PatternFly.",
   "scripts": {
     "test": "node cli.js --prefix http://localhost:9000 --file ~/src/gatsby-theme-patternfly-org/patternfly-org-demo/.cache/fullscreenPages.json",

report/src/app/DataListItem.tsx

@@ -34,6 +34,17 @@ const DataListItemInternal = ({
       </a>
     </DataListCell>
   );
+  const urlCell = (
+    <DataListCell key={`url-${key}`} width={2}>
+      <a
+        href={`${val.prefix}${val.url}`}
+        target="_blank"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <span id={`url-${key}`}>{val.url}</span>
+      </a>
+    </DataListCell>
+  );
   const shouldToggle = () => {
     if (numIssues > 0) {
       toggle(key);
@@ -59,21 +70,8 @@ const DataListItemInternal = ({
         <DataListItemCells
           key={`cells-${key}`}
           dataListCells={[
-            // <DataListCell
-            //   key={`order-${key}`}
-            //   style={{ cursor: cursorStyle, maxWidth: "80px" }}
-            // >
-            //   <span id={`order-${key}`}>{val.order}</span>
-            // </DataListCell>,
-            <DataListCell
-              width={2}
-              key={`url-${key}`}
-              style={{ cursor: cursorStyle }}
-            >
-              <span id={`url-${key}`}>{val.url}</span>
-            </DataListCell>,
+            urlCell,
             <DataListCell
-              // width={2}
               key={`label-${key}`}
               style={{ cursor: cursorStyle }}
             >