Embed feature [2] (#479)

* Address PR feedback shared in w3c/aria-practices#2569 * Account for invalid title being provided for pattern * style.css update
w3c · Jan 11, 2023 · f4667c7 · f4667c7
1 parent 1885ac1
commit f4667c7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/server/apps/embed.js b/server/apps/embed.js
@@ -70,6 +70,7 @@ const getLatestReportsForPattern = async pattern => {
                     }
                     testPlanVersion {
                         id
+                        title
                         updatedAt
                         testPlan {
                             id
@@ -80,9 +81,14 @@ const getLatestReportsForPattern = async pattern => {
         `
     });
 
-    const testPlanReports = data.testPlanReports.filter(
-        report => report.testPlanVersion.testPlan.id === pattern
-    );
+    let title;
+
+    const testPlanReports = data.testPlanReports.filter(report => {
+        if (report.testPlanVersion.testPlan.id === pattern) {
+            title = report.testPlanVersion.title;
+            return true;
+        }
+    });
 
     const latestTestPlanVersionId = testPlanReports.sort(
         (a, b) =>
@@ -125,6 +131,7 @@ const getLatestReportsForPattern = async pattern => {
     });
 
     return {
+        title,
         allBrowsers,
         allAtVersionsByAt,
         latestTestPlanVersionId,
@@ -134,9 +141,15 @@ const getLatestReportsForPattern = async pattern => {
 };
 
 app.get('/reports/:pattern', async (req, res) => {
+    // In the instance where an editor doesn't want to display a certain title
+    // as it has defined when importing into the ARIA-AT database for being too
+    // verbose, etc. eg. `Link Example 1 (span element with text content)`
+    // Usage: https://aria-at.w3.org/embed/reports/command-button?title=Link+Example+(span+element+with+text+content)
+    const queryTitle = req.query.title;
     const pattern = req.params.pattern;
     const protocol = process.env.ENVIRONMENT === 'dev' ? 'http://' : 'https://';
     const {
+        title,
         allBrowsers,
         allAtVersionsByAt,
         latestTestPlanVersionId,
@@ -146,6 +159,7 @@ app.get('/reports/:pattern', async (req, res) => {
     res.render('main', {
         layout: 'index',
         dataEmpty: Object.keys(reportsByAt).length === 0,
+        title: queryTitle || title || 'Pattern Not Found',
         pattern,
         status,
         allBrowsers,

diff --git a/server/handlebars/public/style.css b/server/handlebars/public/style.css
@@ -6,6 +6,14 @@ body {
     width: 100%;
 }
 
+h3#report-title {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 18px;
+}
+
 #copied-message {
     align-self: center;
 }

diff --git a/server/handlebars/views/main.hbs b/server/handlebars/views/main.hbs
@@ -1,5 +1,6 @@
 <div id="main">
     {{#if dataEmpty}}
+        <h3 id="report-title">{{title}}</h3>
         <div id="no-data-container">
             <div id="no-data-content-container">
                  There is no data for this pattern.
@@ -8,7 +9,8 @@
     {{/if}}
     {{#unless dataEmpty}}
         {{#if (isCandidate status)}}
-        <div id="embded-report-status-container">
+        <h3 id="report-title">{{title}}</h3>
+        <div id="embed-report-status-container">
             <div id="candidate-title"><h3>Candidate Report</h3></div>
             <div id="candidate-content-container">
                 The information in this report generated from candidate tests.
@@ -21,7 +23,7 @@
             </div>
         </div>
         {{else}}
-        <div id="embded-report-status-container">
+        <div id="embed-report-status-container">
             <div id="candidate-title" class="recommended"><h3>Recommended Report</h3></div>
             <div id="candidate-content-container">
                 The information in this report is generated from recommended tests.