Use collection.id to give name to list

eventua11y · Jun 29, 2024 · a98baf3 · a98baf3
1 parent 62be34e
commit a98baf3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/groupCoursesByCollection.js b/src/groupCoursesByCollection.js
@@ -13,6 +13,7 @@ console.log(courses);
           if (!collectionsMap[collection._id]) {
             collectionsMap[collection._id] = {
               title: collection.title,
+              id: collection._id,
               description: collection.description,
               courses: []
             };

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import groupCoursesByCollection from '../groupCoursesByCollection.js';
 import Course from '../components/Course.astro';
+import { generateUniqueId } from '../utils.js';
 
 // Fetching the courses data
 const groupedCourses = await groupCoursesByCollection();
@@ -11,11 +12,11 @@ const groupedCourses = await groupCoursesByCollection();
     <h1 class="sr-only">Accessibility Courses</h1>
     {groupedCourses.length > 0 ? (
       groupedCourses.map((collection) => (
-        <section class="collection">
-          <h2 class="collection__title">{collection.title}</h2>
-          <ul role="list" class="grid">
-            {collection.courses.map((course, index) => (
-              <li key={index}>
+        <section id={collection.id} class="collection">
+          <h2 id={`${collection.id}-heading`} class="collection__title">{collection.title}</h2>
+          <ul role="list" aria-labelledby={`${collection.id}-heading`} class="grid">
+            {collection.courses.map((course) => (
+              <li key={course._id}>
                 <Course course={course} />
               </li>
             ))}