jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remplacement du div onclick par un lien dans posts-loop (accessibilité)

Browse source 
La carte de post utilisait un div avec onclick="location.href=..." pour la navigation. Remplacé par un <a> sémantique avec le <a> interne du titre transformé en <span> pour éviter l'imbrication de liens invalide.
This commit is contained in:
Jalil Arfaoui 2026-02-17 09:45:34 +01:00
parent b9992ead61
commit 1c2f21363e
1 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/posts-loop.astro
View file

@ -15,20 +15,19 @@ const postsLoop = allPosts.slice(0, count).map((post) => {
{ {
postsLoop.map((post) => { postsLoop.map((post) => {
return ( return (
<div <a
class="relative border border-transparent border-dashed cursor-pointer p-7 group rounded-2xl" href={post.link}
onclick={`location.href = '${post.link}'`} class="relative block border border-transparent border-dashed p-7 group rounded-2xl no-underline text-inherit"
> >
<div class="absolute inset-0 z-20 w-full h-full duration-300 ease-out bg-white border border-dashed dark:bg-neutral-950 rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:-translate-x-1 group-hover:-translate-y-1" /> <div class="absolute inset-0 z-20 w-full h-full duration-300 ease-out bg-white border border-dashed dark:bg-neutral-950 rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:-translate-x-1 group-hover:-translate-y-1" />
<div class="absolute inset-0 z-10 w-full h-full duration-300 ease-out border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1" /> <div class="absolute inset-0 z-10 w-full h-full duration-300 ease-out border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600 group-hover:translate-x-1 group-hover:translate-y-1" />
<div class="relative z-30 duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"> <div class="relative z-30 duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1">
<h2 class="flex items-center mb-3"> <h2 class="flex items-center mb-3">
<a <span
href={post.link}
class="text-xl font-bold leading-tight tracking-tight sm:text-2xl dark:text-neutral-100" class="text-xl font-bold leading-tight tracking-tight sm:text-2xl dark:text-neutral-100"
> >
{post.title} {post.title}
</a> </span>
<svg <svg
class="group-hover:translate-x-0 flex-shrink-0 translate-y-0.5 -translate-x-1 w-2.5 h-2.5 stroke-current ml-1 transition-all ease-in-out duration-200 transform" class="group-hover:translate-x-0 flex-shrink-0 translate-y-0.5 -translate-x-1 w-2.5 h-2.5 stroke-current ml-1 transition-all ease-in-out duration-200 transform"
viewBox="0 0 13 15" viewBox="0 0 13 15"
@ -76,7 +75,7 @@ const postsLoop = allPosts.slice(0, count).map((post) => {
Posted on {post.dateFormatted} Posted on {post.dateFormatted}
</div> </div>
</div> </div>
</div> </a>
) )
}) })
} }