UHF-8804: Fix card accessibility issues

src/js/react/apps/linkedevents/components/SeeAllButton.tsx

@@ -12,7 +12,6 @@ function SeeAllButton() {
         data-hds-variant="secondary"
         href={eventsUrl}
         title={Drupal.t('Refine search in tapahtumat.hel.fi', {}, { context: 'Events search' })} />
-      <ExternalLink href={eventsUrl} title={<span>{Drupal.t('Open large version of the map', {}, {context: 'React search: result display'})}</span>} />
     </div>
   );
 }

src/js/react/common/Card.tsx

@@ -4,6 +4,7 @@ import type MetadataType from '@/types/MetadataType';
 import type TagType from '@/types/TagType';
 import Tags from './Tags';
 import Icon from './Icon';
+import ExternalLink from '@/react/common/ExternalLink';
 
 const Metarow = ({ icon, label, content, langAttribute } : MetadataType) => (
   <div className="card__meta">
@@ -87,20 +88,15 @@ function CardItem({
 
       <div className="card__text">
         <HeadingTag className="card__title">
-          <a href={cardUrl} className="card__link" {...cardUrlExternal && { 'data-is-external': 'true' }} rel="bookmark">
-            <span>{ cardTitle }</span>
-            {cardUrlExternal &&
-              <span className="link__type link__type--external" aria-label={`(${Drupal.t(
-                'Link leads to external service',
-                {},
-                { context: 'Explanation for screen-reader software that the icon visible next to this link means that the link leads to an external service.' },
-              )})`} />
-            }
-          </a>
+          {!cardUrlExternal ? (
+            <a href={cardUrl} className="card__link" rel="bookmark">{ cardTitle }</a>
+          ) : (
+            <ExternalLink href={cardUrl} title={cardTitle} className="card__link" rel="bookmark" />
+          )}
         </HeadingTag>
         {cardCategoryTag &&
           <div className="card__category">
-            <Tags tags={[cardCategoryTag]} />
+            <Tags tags={[cardCategoryTag]} insideCard />
           </div>
         }
 
@@ -156,7 +152,7 @@ function CardItem({
 
         {cardTags && cardTags.length > 0 &&
           <div className="card__tags">
-            <Tags tags={cardTags} langAttribute={langAttribute} />
+            <Tags tags={cardTags} langAttribute={langAttribute} insideCard />
           </div>
         }
       </div>

src/js/react/common/ExternalLink.tsx

@@ -4,9 +4,20 @@ type ExternalLinkProps = {
   title: string | JSX.Element;
   'data-hds-component'?: string;
   'data-hds-variant'?: string;
+  rel?: string;
 };
 
-const ExternalLink = ({ href, title, 'data-hds-component': dataHdsComponent, 'data-hds-variant': dataHdsVariant }: ExternalLinkProps) => {
+const ExternalLink = (
+  {
+    href,
+    title,
+    className,
+    'data-hds-component': dataHdsComponent,
+    'data-hds-variant': dataHdsVariant,
+    rel,
+  }: ExternalLinkProps
+) =>
+{
   const dataAttributes = {
     ...(dataHdsComponent && { 'data-hds-component': dataHdsComponent }),
     ...(dataHdsVariant && { 'data-hds-variant': dataHdsVariant }),
@@ -15,8 +26,10 @@ const ExternalLink = ({ href, title, 'data-hds-component': dataHdsComponent, 'da
   return (
     <a
       href={href}
+      className={className}
       data-is-external='true'
       {...dataAttributes}
+      rel={rel}
     >
       {title}
 

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>
   );
 }
 

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 %}

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}}>