TheThomaas/my-online-cookbook
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

a11y improvement : only wrap card title in anchor tag

Browse source
This commit is contained in:
Maël Brunet 2021-05-30 11:45:19 +02:00
parent e2c932b1e4
commit c8082fc32c
3 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/_includes/layouts/home.njk
View file

@ -27,7 +27,7 @@ bodyClass: c-home
<div class="c-card__wrapper"> <div class="c-card__wrapper">
{% set favouriteRecipes = collections["Favourite ⭐"] | limit(4) %} {% set favouriteRecipes = collections["Favourite ⭐"] | limit(4) %}
{% for recipe in favouriteRecipes %} {% for recipe in favouriteRecipes %}
<a class="c-card" href="{{ recipe.url }}"> <div class="c-card">
{% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %} {% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %}
<div class="c-card__info"> <div class="c-card__info">
<div> <div>
@ -42,10 +42,10 @@ bodyClass: c-home
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="c-card__title-wrapper"> <a class="c-card__title-wrapper" href="{{ recipe.url }}">
<h3 class="c-card__title">{{ recipe.data.title }}</h3> <h3 class="c-card__title">{{ recipe.data.title }}</h3>
</div> </a>
</a> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

8
src/_includes/layouts/recipes-list.njk
View file

@ -16,7 +16,7 @@
<div class="c-card__wrapper"> <div class="c-card__wrapper">
{% for recipe in collections.recipes %} {% for recipe in collections.recipes %}
{% if not selectedTag or selectedTag in recipe.data.tags %} {# If we don't have a selectedTag, we are on the all recipes page #} {% if not selectedTag or selectedTag in recipe.data.tags %} {# If we don't have a selectedTag, we are on the all recipes page #}
<a class="c-card" href="{{ recipe.url }}"> <div class="c-card">
{% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %} {% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %}
<div class="c-card__info"> <div class="c-card__info">
<div> <div>
@ -31,10 +31,10 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="c-card__title-wrapper"> <a class="c-card__title-wrapper" href="{{ recipe.url }}">
<h3 class="c-card__title">{{ recipe.data.title }}</h3> <h3 class="c-card__title">{{ recipe.data.title }}</h3>
</div> </a>
</a> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>

42
src/scss/components/_card.scss
View file

@ -5,6 +5,7 @@
} }
.c-card { .c-card {
position: relative;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
@ -15,18 +16,6 @@
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
text-decoration: none; text-decoration: none;
color: var(--color-grey-900); color: var(--color-grey-900);
&:hover, &:focus {
outline: none;
box-shadow: var(--shadow-lg);
color: var(--color-grey-900);
text-decoration: none;
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--color-secondary),
var(--shadow-lg);
}
} }
.c-card__image { .c-card__image {
@ -77,6 +66,35 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 18px; padding: 12px 18px;
text-decoration: none;
color: var(--color-grey-900);
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 20px;
}
&:hover, &:focus {
text-decoration: none;
&::before {
outline: none;
box-shadow: var(--shadow-lg);
color: var(--color-grey-900);
text-decoration: none;
}
}
&:focus-visible {
&::before {
box-shadow: 0 0 0 2px var(--color-secondary), var(--shadow-lg);
}
}
} }
.c-card__title { .c-card__title {