feat: add a11y support for focusable elements

fbuireu · Sep 12, 2024 · 2aab17e · 2aab17e
1 parent 59324f0
commit 2aab17e
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 11 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -28,9 +28,6 @@ import Welcome from "@modules/home/components/welcome/Welcome.astro";
 // todo: add comments section
 // todo: content bar https://x.com/anatudor/status/1798615928420344018?t=m-9Hn_qO58wltQejaEMHNg&s=19
 // todo: svg scroll offset driven animation in background
-// todo: mess with line-heights (test (https://dev.to/carmenansio/creating-a-modular-typography-scale-with-css-2d29)
-// todo: mess with vertical rythm (https://notadesigner.io/p/vertical-rhythm)
-// todo: https://daverupert.com/2024/01/focus-visible-love/
 // valorar idea de que semblin 2 pagines(https://www.behance.net/gallery/177718861/Photography-Portfolio-Layout-(Download)?tracking_source=search_projects|writing+portfolio&l=2)
 ---
 <BaseLayout>

diff --git a/src/ui/modules/core/components/articleCard/article-card.css b/src/ui/modules/core/components/articleCard/article-card.css
@@ -12,8 +12,8 @@
     position: absolute;
     width: 100%;
     z-index: 1;
-
-    &:hover ~ .article-card__item .article-card__tag__item {
+    
+    &:is(:hover, :focus-visible) ~ .article-card__item .article-card__tag__item {
         translate: 0 0;
     }
 }

diff --git a/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css b/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css
@@ -8,7 +8,7 @@
         z-index: 10;
     }
 
-    &:has(a:hover) ~ .article-card__tags__list .article-card__tag__item {
+    :has(a:is(:hover, :focus-visible)) ~ .article-card__tags__list .article-card__tag__item {
         translate: 0 0;
     }
 }

diff --git a/.../modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css b/.../modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css
@@ -6,7 +6,8 @@
     text-transform: lowercase;
     z-index: 10;
 
-    &:hover .article-card__tag__item {
+    &:hover .article-card__tag__item,
+    &:has(.article-card__tag__item:focus-visible) .article-card__tag__item{
         translate: 0 0;
     }
 }
diff --git a/...odules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx b/...odules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx
@@ -22,10 +22,12 @@ const SLIDER_CONFIG: SwiperOptions = {
 		1024: {
 			slidesPerView: 4,
 			spaceBetween: 32,
+			loop: false,
 		},
 		720: {
 			slidesPerView: 2,
 			spaceBetween: 32,
+			loop: true,
 		},
 		320: {
 			slidesPerView: 1,

diff --git a/...les/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx b/...les/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx
@@ -21,10 +21,12 @@ const SLIDER_CONFIG: SwiperOptions = {
 		1024: {
 			slidesPerView: 3,
 			spaceBetween: 32,
+			loop: false,
 		},
 		720: {
 			slidesPerView: 2,
 			spaceBetween: 32,
+			loop: true,
 		},
 		320: {
 			slidesPerView: 1,

diff --git a/src/ui/modules/core/components/scrollTop/scroll-top.css b/src/ui/modules/core/components/scrollTop/scroll-top.css
@@ -18,6 +18,9 @@
     width: fit-content;
 
     svg {
+        --color: light-dark(inherit, var(--white));
+        color: var(--color);
+        fill: var(--color);
         height: 3rem;
         padding: 0.50rem;
         rotate: 0.25turn;

diff --git a/src/ui/styles/base/base.css b/src/ui/styles/base/base.css
@@ -3,8 +3,12 @@
         transition-behavior: allow-discrete;
 
         &::selection {
-            background-color: var(--primary-main);
-            color: var(--white);
+            background-color: var(--primary-light-2);
+            color: var(--neutral-main);
+        }
+        &:focus-visible {
+            outline: 2px solid var(--primary-main);
+            outline-offset: 2px;
         }
     }
 

diff --git a/src/ui/styles/global/variables.css b/src/ui/styles/global/variables.css
@@ -27,7 +27,7 @@
         --global-max-width: 1440px;
         --base-font-size: 16px;
         --base-vertical-rhythm-factor: 2.75;
-        --base-vertical-rhythm: 0.725rem;
+        --base-vertical-rhythm: 1.125;
         --base-line-height: calc(var(--base-font-size) * var(--base-vertical-rhythm-factor) * var(--base-vertical-rhythm));
         --global-border-radius: 0.25rem;
         --grid-extra-small: 575px;

diff --git a/src/ui/styles/vendor/swiper.css b/src/ui/styles/vendor/swiper.css
@@ -1,8 +1,9 @@
 @layer overrides.swiper {
     .swiper {
         padding-bottom: 8rem !important;
+        overflow: clip;
     }
-
+    
     .latest-articles-initialized,
     .related-articles-initialized {
         .swiper-wrapper {