Closes #3396: Makes clickable cards more accessible (#3463)

Co-authored-by: Joe Parsons <[email protected]> Co-authored-by: Chris Green <[email protected]> Co-authored-by: tadean <[email protected]>
az-digital · Jun 26, 2024 · cc3f49b · cc3f49b
1 parent b682286
commit cc3f49b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 7 deletions.
diff --git a/modules/custom/az_card/az_card.module b/modules/custom/az_card/az_card.module
@@ -35,6 +35,7 @@ function az_card_theme($existing, $type, $theme, $path) {
         'title' => NULL,
         'body' => NULL,
         'link' => NULL,
+        'link_url' => NULL,
         'title_style' => 'default',
         'title_alignment' => 'text-left',
         'title_level' => 'h3',

diff --git a/modules/custom/az_card/css/az-card-title-hover.css b/modules/custom/az_card/css/az-card-title-hover.css
@@ -6,3 +6,21 @@
   transform: scale(1.03);
   transition: ease .25s;
 }
+
+h2.card-title>a,
+h3.card-title>a,
+h4.card-title>a,
+h5.card-title>a,
+h6.card-title>a {
+  color: inherit;
+  text-decoration: inherit;
+  font-weight: inherit;
+}
+
+h2.card-title>a:hover,
+h3.card-title>a:hover,
+h4.card-title>a:hover,
+h5.card-title>a:hover,
+h6.card-title>a:hover {
+  text-decoration: underline;
+}
diff --git a/modules/custom/az_card/src/Plugin/Field/FieldFormatter/AZCardDefaultFormatter.php b/modules/custom/az_card/src/Plugin/Field/FieldFormatter/AZCardDefaultFormatter.php
@@ -123,6 +123,7 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
 
       // Link.
       $link_render_array = [];
+      $link_url = '';
       if ($item->link_title || $item->link_uri) {
         if (str_starts_with($item->link_uri ?? '', '/' . PublicStream::basePath())) {
           // Link to public file: use fromUri() to get the URL.
@@ -213,9 +214,7 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
           if (isset($card_defaults['card_title_display'])) {
             $title_display = $card_defaults['card_title_display'];
           }
-
         }
-
       }
 
       // Handle class keys that contained multiple classes.
@@ -239,6 +238,7 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
           '#langcode' => $item->getLangcode(),
         ],
         '#link' => $link_render_array,
+        '#link_url' => $link_url,
         '#title_style' => $title_style ?? 'default',
         '#title_level' => $title_level ?? 'h3',
         '#title_alignment' => $title_alignment ?? 'text-left',

diff --git a/modules/custom/az_card/src/Plugin/Field/FieldWidget/AZCardWidget.php b/modules/custom/az_card/src/Plugin/Field/FieldWidget/AZCardWidget.php
@@ -263,6 +263,7 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
       '#type' => 'textfield',
       '#title' => $this->t('Card Link Title'),
       '#default_value' => $item->link_title ?? NULL,
+      '#description' => $this->t('Make each link title unique for <a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html">best accessibility</a> of this content. Use the pattern <em>"verb" "noun"</em> to create helpful links. For example, "Explore Undergraduate Programs".'),
     ];
 
     $element['link_uri'] = [
@@ -292,7 +293,8 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
     ];
 
     if (!$item->isEmpty()) {
-      $button_name = implode('-', array_merge($field_parents,
+      $button_name = implode('-', array_merge(
+        $field_parents,
         [$field_name, $delta, 'toggle']
       ));
       // Extra card_actions wrapper needed for core delete ajax submit nesting.
@@ -432,8 +434,10 @@ public function validateCardLink(&$element, FormStateInterface $form_state, &$co
         // Url is valid, no conversion required.
         return;
       }
-      if (str_starts_with($element['#value'], '/' . PublicStream::basePath()) &&
-        file_exists('public:' . urldecode(str_replace(PublicStream::basePath(), '', $element['#value'])))) {
+      if (
+        str_starts_with($element['#value'], '/' . PublicStream::basePath()) &&
+        file_exists('public:' . urldecode(str_replace(PublicStream::basePath(), '', $element['#value'])))
+      ) {
         // Link to a public file which is confirmed to exist.
         return;
       }

diff --git a/modules/custom/az_card/templates/az-card.html.twig b/modules/custom/az_card/templates/az-card.html.twig
@@ -9,6 +9,7 @@
  * - title: The title field of a card.
  * - body: The body field of a card.
  * - link: The link field on a card.
+ * - link_url: The link URL only.
  * - title_style: The title style to use.
  * - title_alignment: The title alignment to use.
  * - title_level: The heading level to use.
@@ -26,7 +27,13 @@
       {{ media }}
       {% if title and title_style == 'title-on-image' %}
         <div class="card-img-overlay p-0 d-flex flex-column">
-          <{{ title_level }} class="bold mt-auto card-title bg-gradient-black text-white mb-0 p-card pt-8 {{ title_alignment }} {{ title_display }}">{{ title }}</{{ title_level }}>
+          <{{ title_level }} class="bold mt-auto card-title bg-gradient-black text-white mb-0 p-card pt-8 {{ title_alignment }} {{ title_display }}">
+            {% if link|render %}
+              <a href="{{ link_url }}">{{ title }}</a>
+            {% else %}
+              {{ title }}
+            {% endif %}
+          </{{ title_level }}>
         </div>
       {% endif %}
     </div>
@@ -40,7 +47,13 @@
   {% else %}
     <div class="card-body d-flex flex-column">
       {% if title and title_style == 'default' %}
-        <{{ title_level }} class="bold mt-0 mb-3 card-title {{ title_alignment }} {{ title_display }}">{{ title }}</{{ title_level }}>
+        <{{ title_level }} class="bold mt-0 mb-3 card-title {{ title_alignment }} {{ title_display }}">
+          {% if link|render %}
+            <a href="{{ link_url }}">{{ title }}</a>
+          {% else %}
+            {{ title }}
+          {% endif %}
+        </{{ title_level }}>
       {% endif %}
       {% if body %}
         <div class="card-text">{{ body }}</div>