Feed Example: Convert images to inline SVG (#2729)

Changes the images used for star ratings of restaurants in the feed example to inline SVG. Because the build process that converts to Jekyll for the production site separates images into a separate path, the links to the dynamically loaded image assets were being broken by the build process. With this change, the JavaScript is no longer dependent on paths to image files.
w3c · Jul 24, 2023 · 1d85d95 · 1d85d95
1 parent e716cc2
commit 1d85d95
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 11 deletions.
diff --git a/content/patterns/feed/examples/css/feedDisplay.css b/content/patterns/feed/examples/css/feedDisplay.css
@@ -79,3 +79,48 @@ body {
   padding: 10px;
   width: 100%;
 }
+
+.restaurant-rating svg g {
+  color: #ffde00;
+}
+
+.restaurant-rating svg .star {
+  stroke-width: 2px;
+  stroke: #f8951d;
+  fill-opacity: 0;
+}
+
+.restaurant-rating[data-rating-value="1"] svg .star-1 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="2"] svg .star-2 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="3"] svg .star-3 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="4"] svg .star-4 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="5"] svg .star-5 .star {
+  fill: currentcolor;
+  fill-opacity: 1;
+}
+
+@media (forced-colors: active) {
+  .restaurant-rating svg g {
+    color: currentcolor;
+  }
+
+  .restaurant-rating svg .star {
+    stroke: currentcolor;
+  }
+}
diff --git a/content/patterns/feed/examples/js/feedDisplay.js b/content/patterns/feed/examples/js/feedDisplay.js
@@ -207,18 +207,40 @@ aria.FeedDisplay.prototype.renderItemData = function (itemData) {
     '</div>';
 
   if (itemData.rating) {
+    const starText = `${itemData.rating} ${
+      itemData.rating === 1 ? 'star' : 'stars'
+    }`;
     var ratingID = 'restaurant-rating-' + this.feedSize;
     itemContent +=
       '<div class="restaurant-rating" id="' +
       ratingID +
-      '">' +
-      '<img class="restaurant-star-img" ' +
-      'alt="' +
-      itemData.rating +
-      ' stars" ' +
-      'src="imgs/rating-' +
+      '" data-rating-value="' +
       itemData.rating +
-      '.png">' +
+      '">' +
+      '<svg aria-label="' +
+      starText +
+      '" xmlns="http://www.w3.org/2000/svg" viewBox="38 -5 100 48" width="90" height="25">' +
+      '<defs>' +
+      '<g id="star">' +
+      '<polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 27.4,31.9 23.7,20.5 33.4,13.4 21.4,13.4 17.7,2.0 14.0,13.4" />' +
+      '</g>' +
+      '</defs>' +
+      '<g class="star-1 star-2 star-3 star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="0" y="0" />' +
+      '</g>' +
+      '<g class="star-2 star-3 star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="35" y="0" />' +
+      '</g>' +
+      '<g class="star-3 star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="70" y="0" />' +
+      '</g>' +
+      '<g class="star-4 star-5">' +
+      '<use class="star" xlink:href="#star" x="105" y="0" />' +
+      '</g>' +
+      '<g class="star-5">' +
+      '<use class="star" xlink:href="#star" x="140" y="0" />' +
+      '</g>' +
+      '</svg>' +
       '</div>';
     describedbyIDs.push(ratingID);
   }

diff --git a/test/tests/grid_data_grids.js b/test/tests/grid_data_grids.js
@@ -889,7 +889,7 @@ ariaTest(
           }
         }
 
-        // Test focus moves down
+        // Test focus moves up
         await sendKeyToGridcell(
           t,
           gridSelector,

diff --git a/test/tests/grid_layout_grids.js b/test/tests/grid_layout_grids.js
@@ -935,7 +935,7 @@ ariaTest(
         return document.activeElement;
       });
 
-      // Test focus to last element in row using key chord CONTROL+HOME
+      // Test focus to first element in row using key chord CONTROL+HOME
       await activeElement.sendKeys(Key.chord(Key.CONTROL, Key.HOME));
       activeElement = await t.context.session.executeScript(() => {
         return document.activeElement;

diff --git a/test/tests/treegrid_treegrid-1.js b/test/tests/treegrid_treegrid-1.js
@@ -722,12 +722,12 @@ ariaTest('END moves focus', exampleFile, 'key-end', async (t) => {
     'Sending END to first row should result on focus on last row'
   );
 
-  // Send HOME to first gridcell
+  // Send END to first gridcell
   await putFocusOnRow1Gridcell(t, 0);
   await sendKeyToGridcellAndWait(t, 0, 0, Key.END);
   t.true(
     await checkFocusOnGridcell(t, 0, 2),
-    "Sending HOME to first row's first gridcell should move focus to first row's last gridcell"
+    "Sending END to first row's first gridcell should move focus to first row's last gridcell"
   );
 });