From 7af08bb4ce076a4b10de72c4c1fcc038fa757d4c Mon Sep 17 00:00:00 2001
From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= <arnaudgs@gmail.com>
Date: Wed, 20 Nov 2024 16:27:44 +0100
Subject: [PATCH] fix cards and mobile nav
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>
---
 stories/molecules/Card.stories.js                    | 4 ++--
 themes/xen-project/assets/css/molecules/buttons.scss | 4 ++--
 themes/xen-project/assets/css/molecules/card.scss    | 9 ++++++++-
 themes/xen-project/layouts/partials/card.html        | 4 ++--
 themes/xen-project/layouts/partials/latest-news.html | 4 ++--
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/stories/molecules/Card.stories.js b/stories/molecules/Card.stories.js
index 4e245e8..1015477 100644
--- a/stories/molecules/Card.stories.js
+++ b/stories/molecules/Card.stories.js
@@ -46,7 +46,7 @@ export const Card = {
       ${["", "card--news", "card--bg"].map(
         (cls) => html`
         <div class="card ${cls}">
-          <a href="/newpage" class="card__link" aria-label="Read more"></a>
+          <a href="/newpage" class="card__link" aria-hidden="true" tabindex="-1"></a>
           <div class="card__label">Conversation Card ${cls.replace(/card--/g, "")}</div>
           <div class="card__date">aug, 5th 2024</div>
           <div class="card__tags">
@@ -62,7 +62,7 @@ export const Card = {
             by <a href="/">John Doe</a>
           </div>
           <div class="card__actions">
-            <a href="/newpage"
+            <a href="/newpage" 
               >Join <i class="fas fa-arrow-up-right-from-square"></i
             ></a>
             <a href="/" >Join
diff --git a/themes/xen-project/assets/css/molecules/buttons.scss b/themes/xen-project/assets/css/molecules/buttons.scss
index 6df6e3f..65e8c81 100644
--- a/themes/xen-project/assets/css/molecules/buttons.scss
+++ b/themes/xen-project/assets/css/molecules/buttons.scss
@@ -70,7 +70,7 @@
 
   &:hover,
   &.hover,
-  body .card:hover & {
+  body .card:not(:has(.card__actions a:nth-child(2))):hover & {
     --color-primary: var(--color-hover);
     --icon-left: 0.3em;
   }
@@ -140,7 +140,7 @@
     }
 
     &:hover::before,
-    body .card:hover &::before {
+    body .card:not(:has(.card__actions a:nth-child(2))):hover &::before {
       transform: scaleX(1);
     }
   }
diff --git a/themes/xen-project/assets/css/molecules/card.scss b/themes/xen-project/assets/css/molecules/card.scss
index ee404a7..4277bf7 100644
--- a/themes/xen-project/assets/css/molecules/card.scss
+++ b/themes/xen-project/assets/css/molecules/card.scss
@@ -23,7 +23,7 @@
   flex-direction: column;
   gap: 10px;
   position: relative;
-  cursor: pointer;
+  //cursor: pointer;
 
   img {
     max-width: 100%;
@@ -62,6 +62,13 @@
     z-index: 1;
   }
 
+  &:has(.card__actions a:nth-child(2)) {
+    .card__link {
+      display: none;
+    }
+    /* some other styles are applied to the "card__actions a" in buttons.scss file */
+  }
+
   /* Pour que les autres liens restent cliquables */
   &__tags a,
   &__author a,
diff --git a/themes/xen-project/layouts/partials/card.html b/themes/xen-project/layouts/partials/card.html
index 3794932..1f66b3f 100644
--- a/themes/xen-project/layouts/partials/card.html
+++ b/themes/xen-project/layouts/partials/card.html
@@ -3,7 +3,7 @@
 
 
 <div class="card {{ .class }}">
-  <a href="{{ .link }}" class="card__link" aria-label="Read more about {{ .title }}"></a>
+  <a href="{{ .link }}" class="card__link"  aria-hidden="true" tabindex="-1"></a>
   {{ if .titleLevel }}
     <h{{ .titleLevel }} class="card__label">{{ .title | safeHTML }}</h{{ .titleLevel }}>
   {{ else }}
@@ -23,7 +23,7 @@
         {{ .linkText | default $defaultLinkText }} <i class="fas {{ .linkIcon | default $defaultIcon }}"></i>
       </a>
       {{ if .secondaryLink }}
-        <a href="{{ .secondaryLink }}" class="join-button btn btn-tertiary">
+        <a href="{{ .secondaryLink }}" class="join-button btn btn-tertiary" aria-label="{{ .secondaryLinkText | default $defaultLinkText }} about {{ .title }}">
           {{ .secondaryLinkText | default $defaultLinkText }}
           <i class="fas {{ .secondaryLinkIcon | default $defaultIcon }}"></i>
         </a>
diff --git a/themes/xen-project/layouts/partials/latest-news.html b/themes/xen-project/layouts/partials/latest-news.html
index 98f6834..95bf0b0 100644
--- a/themes/xen-project/layouts/partials/latest-news.html
+++ b/themes/xen-project/layouts/partials/latest-news.html
@@ -7,7 +7,7 @@
   </div>
   <script type="text/html" class="latest-news-template">
     <div class="carousel-item card card--news">
-      <a href="${_.url}" class="card__link" aria-label="Read more about ${_.title}"></a>
+      <a href="${_.url}" class="card__link" aria-hidden="true" tabindex="-1"></a>
       <div class="card__label">${_.title}</div>
       ${_.tags ? `
       <div class="card__date">${XenSiteUtils.formatDate(_.published_at)}</div>
@@ -23,7 +23,7 @@
       </div>
       ` : ""}
       <div class="card__actions">
-        <a href="${_.url}" class="join-button btn btn-tertiary">
+        <a href="${_.url}" class="join-button btn btn-tertiary" aria-label="Read more about ${_.title}">
           Read more
           <i class="fas fa-arrow-up-right-from-square"></i>
         </a>
-- 
2.39.5