UHF-8804: Fix card accessibility issues

City-of-Helsinki · Sep 9, 2024 · c425eca · c425eca
1 parent a9843b3
commit c425eca
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/src/js/react/common/Card.tsx b/src/js/react/common/Card.tsx
@@ -100,7 +100,7 @@ function CardItem({
         </HeadingTag>
         {cardCategoryTag &&
           <div className="card__category">
-            <Tags tags={[cardCategoryTag]} />
+            <Tags tags={[cardCategoryTag]} insideCard />
           </div>
         }
 
@@ -156,7 +156,7 @@ function CardItem({
 
         {cardTags && cardTags.length > 0 &&
           <div className="card__tags">
-            <Tags tags={cardTags} langAttribute={langAttribute} />
+            <Tags tags={cardTags} langAttribute={langAttribute} insideCard />
           </div>
         }
       </div>

diff --git a/src/js/react/common/Tags.tsx b/src/js/react/common/Tags.tsx
@@ -1,29 +1,34 @@
+import React from 'react';
 import type TagType from '@/types/TagType';
 
 interface TagsProps {
   tags: Array<TagType>;
   isInteractive?: boolean;
   langAttribute?: any;
+  insideCard?: boolean;
 }
 
-export function Tags({ tags, isInteractive, langAttribute }: TagsProps): JSX.Element {
+export function Tags({ tags, isInteractive, langAttribute, insideCard }: TagsProps): JSX.Element {
   const typeClass = isInteractive ? 'content-tags__tags--interactive' : 'content-tags__tags--static';
 
-  return (
-    <section
-      className="content-tags content-tags--card"
-      aria-label={
-        Drupal.t('Tags', {}, { context: 'Label for screen reader software users explaining that this is a list of tags related to this page.' })
-      }>
-      <ul className={`content-tags__tags ${typeClass}`}>
-        {tags.map((item: TagType, key: number) => (
-          <li key={`{item.tag}-${key}`} className={`content-tags__tags__tag ${item.color ? `content-tags__tags__tag--${item.color}` : ''}`} {...langAttribute}>
-            <span>{item.tag}</span>
-          </li>
-        ),
-        )}
-      </ul>
-    </section>
+  // When inside a card, use a div instead of a section to avoid duplicating the aria-label description on each card.
+  const Element = insideCard ? 'div' : 'section';
+
+  return React.createElement(
+    Element,
+    {
+      className: 'content-tags content-tags--card',
+      'aria-label': Drupal.t('Tags', {}, { context: 'Label for screen reader software users explaining that this is a list of tags related to this page.' }),
+      role: insideCard ? 'group' : undefined, // When inside a card, use role="group" to group the tags together.
+    },
+    <ul className={`content-tags__tags ${typeClass}`}>
+      {tags.map((item: TagType, key: number) => (
+        <li key={`{item.tag}-${key}`} className={`content-tags__tags__tag ${item.color ? `content-tags__tags__tag--${item.color}` : ''}`} {...langAttribute}>
+          <span>{item.tag}</span>
+        </li>
+      ),
+      )}
+    </ul>
   );
 }
 

diff --git a/templates/component/card.twig b/templates/component/card.twig
@@ -99,7 +99,7 @@
 
     {% if card_tags %}
       <div class="card__tags">
-        {% embed '@hdbt/misc/tag-list.twig' with { tags: card_tags, addSpan: true, tag_container_class: ' content-tags--card' } %}
+        {% embed '@hdbt/misc/tag-list.twig' with { tags: card_tags, addSpan: true, tag_container_class: ' content-tags--card', inside_card: true } %}
         {% endembed %}
       </div>
     {% endif %}

diff --git a/templates/misc/tag-list.twig b/templates/misc/tag-list.twig
@@ -1,3 +1,10 @@
+{% set element = 'section' %}
+{% set role = '' %}
+{% if inside_card %}
+  {% set element = 'div' %}
+  {% set role = 'role="group"' %}
+{% endif %}
+
 {% if type == 'interactive' %}
   {% set type_class = 'content-tags__tags--interactive' %}
 {% else %}
@@ -6,7 +13,7 @@
 
 {% set content_tags_id = 'hdbt-content_tags_id-' ~ random() %}
 
-<section class="content-tags {{ tag_container_class }}"  aria-labelledby="{{ content_tags_id }}">
+<{{element}} {{role}} class="content-tags {{ tag_container_class }}"  aria-labelledby="{{ content_tags_id }}">
   <span id="{{ content_tags_id }}" class="is-hidden" {{ alternative_language ? create_attribute(({ 'lang': lang_attributes.fallback_lang, 'dir': lang_attributes.fallback_dir })) }}>
     {{ 'Tags'|t({}, {'context': 'Label for screen reader software users explaining that this is a list of tags related to this page.'}) }}
   </span>
@@ -20,4 +27,4 @@
       {% endfor %}
     {% endblock %}
   </ul>
-</section>
+</{{element}}>