improved accessible naming for resource icons in project pages (hackf…

…orla#6972)
aadilahmed · Jun 11, 2024 · ac65fb4 · ac65fb4
1 parent e971e5b
commit ac65fb4
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/_includes/resource-card.html b/_includes/resource-card.html
@@ -2,9 +2,9 @@
 {% assign image = include.image %}
 {% assign name = include.name %}
 {% assign lowercaseName = include.name | downcase %}
+{% assign hyphenatedName = lowercaseName | replace: ' ', '-' %}
 
-
-<a href="{{ url }}" class='resource-link' target="_blank" rel="noopener noreferrer">
+<a href="{{ url }}" class='resource-link' target="_blank" rel="noopener noreferrer" aria-labelledby="resource-title-{{hyphenatedName}}">
     <li class='resource-card'>
         <!--Where the images will be-->
         <div {% if image %} class='resource-img resource-img-provided' {% else %} role="img" aria-label="{{name}}" class='resource-img' {% endif %}>
@@ -22,11 +22,11 @@
         </div>
         <div class='resource-body'>
             {% if lowercaseName == 'github' %}
-                <h4 class='resource-title'>
+                <h4 id="resource-title-{{hyphenatedName}}" class='resource-title'>
                     GitHub
                 </h4>
             {% else %}
-                <h4 class='resource-title'>
+                <h4 id="resource-title-{{hyphenatedName}}" class='resource-title'>
                     {{ name }}
                 </h4>
             {% endif %}