fix: ARIA and HTML feature reports are errantly combined and incorrectly named in the first column of the top-level report page

client/components/App/App.jsx

@@ -71,7 +71,10 @@ const App = () => {
                 <Nav.Link
                   as={Link}
                   to="/reports"
-                  aria-current={location.pathname.startsWith('/report')}
+                  aria-current={
+                    location.pathname.startsWith('/report') ||
+                    location.pathname.startsWith('/aria-html-feature')
+                  }
                 >
                   AT Interoperability Reports
                 </Nav.Link>

client/components/Reports/AriaHtmlFeatureDetailReport.jsx

@@ -10,12 +10,12 @@ import PageStatus from '../common/PageStatus';
 import { ARIA_HTML_FEATURE_DETAIL_REPORT_QUERY } from './queries';
 
 const AriaHtmlFeatureDetailReport = () => {
-  const { atId, browserId, refId } = useParams();
+  const { atId, browserId, refId, refType } = useParams();
 
   const { loading, data, error } = useQuery(
     ARIA_HTML_FEATURE_DETAIL_REPORT_QUERY,
     {
-      variables: { refId, atId, browserId },
+      variables: { refId, refType, atId, browserId },
       fetchPolicy: 'cache-and-network'
     }
   );
@@ -57,6 +57,12 @@ const AriaHtmlFeatureDetailReport = () => {
     return nameA.localeCompare(nameB);
   });
 
+  let downloadURI = `/api/metrics/aria-html-features/details.csv?refId=${refId}&at=${encodeURIComponent(
+    at.name
+  )}&browser=${encodeURIComponent(browser.name)}`;
+  if (refType)
+    downloadURI = `${downloadURI}&refType=${encodeURIComponent(refType)}`;
+
   return (
     <>
       <Helmet>
@@ -135,14 +141,7 @@ const AriaHtmlFeatureDetailReport = () => {
           </tbody>
         </Table>
 
-        <Button
-          href={`/api/metrics/aria-html-features/details.csv?refId=${refId}&at=${encodeURIComponent(
-            at.name
-          )}&browser=${encodeURIComponent(browser.name)}`}
-          download
-          variant="primary"
-          className="mb-3"
-        >
+        <Button href={downloadURI} download variant="primary" className="mb-3">
           Download CSV
         </Button>
 

client/components/Reports/FeatureSupportTable.jsx

@@ -14,11 +14,11 @@ const FeatureSupportTable = ({ featureData, featureLabel }) => {
   const dataByFeature = {};
   const links = {};
   for (const row of featureData) {
-    if (!dataByFeature[row.refId]) {
-      dataByFeature[row.refId] = {};
+    if (!dataByFeature[row.rawValue]) {
+      dataByFeature[row.rawValue] = {};
     }
-    links[row.refId] = { href: row.value, text: row.linkText };
-    dataByFeature[row.refId][columnName(row)] = row;
+    links[row.rawValue] = { href: row.value, text: row.linkText };
+    dataByFeature[row.rawValue][columnName(row)] = row;
   }
 
   const keys = Object.keys(dataByFeature).sort();
@@ -54,7 +54,7 @@ const FeatureSupportTable = ({ featureData, featureLabel }) => {
 
                 if (!row) return <td key={key + col}>{none}</td>;
 
-                const detailLink = `/aria-html-feature/${row.atId}/${row.browserId}/${key}`;
+                const detailLink = `/aria-html-feature/${row.atId}/${row.browserId}/${key}/${row.type}`;
                 return (
                   <td key={key + col}>
                     <Link

client/components/Reports/Reports.jsx

@@ -44,7 +44,7 @@ const Reports = () => {
         <KeyMetricsBanner />
         <section className={clsx(reportsStyles.contentSection)}>
           <h1>Assistive Technology Interoperability Reports</h1>
-          <p>Loading...</p>
+          <p>Loading ...</p>
         </section>
       </Container>
     );

client/components/Reports/queries.js

@@ -35,7 +35,6 @@ export const REPORTS_PAGE_QUERY = gql`
         }
       }
     }
-
     ariaHtmlFeaturesMetrics {
       ariaFeaturesPassedCount
       ariaFeaturesCount
@@ -49,7 +48,9 @@ export const REPORTS_PAGE_QUERY = gql`
         refId
         type
         linkText
+        rawLinkText
         value
+        rawValue
         total
         passed
         failed
@@ -61,7 +62,9 @@ export const REPORTS_PAGE_QUERY = gql`
         refId
         type
         linkText
+        rawLinkText
         value
+        rawValue
         total
         passed
         failed
@@ -73,7 +76,9 @@ export const REPORTS_PAGE_QUERY = gql`
         refId
         type
         linkText
+        rawLinkText
         value
+        rawValue
         total
         passed
         failed
@@ -89,7 +94,9 @@ export const REPORTS_PAGE_QUERY = gql`
         refId
         type
         linkText
+        rawLinkText
         value
+        rawValue
         total
         passed
         failed
@@ -186,11 +193,13 @@ export const ARIA_HTML_FEATURE_DETAIL_REPORT_QUERY = gql`
   ${BROWSER_FIELDS}
   query AriaHtmlFeatureDetailReport(
     $refId: String!
+    $refType: String
     $atId: ID!
     $browserId: ID!
   ) {
     ariaHtmlFeatureDetailReport(
       refId: $refId
+      refType: $refType
       atId: $atId
       browserId: $browserId
     ) {

client/routes/index.js

@@ -63,6 +63,11 @@ export default () => (
       path="/aria-html-feature/:atId/:browserId/:refId"
       element={<AriaHtmlFeatureDetailReport />}
     />
+    <Route
+      exact
+      path="/aria-html-feature/:atId/:browserId/:refId/:refType"
+      element={<AriaHtmlFeatureDetailReport />}
+    />
     <Route
       exact
       path="/candidate-review"