fix: repair tabbing and outline highlight (UEK-i-team#45)

* fix: repair bad looking outlines * fix: disable tabbing on sidebar when its hidden * feature: create custom outline highlight
KubloPL · Mar 11, 2024 · 586f5ee · 586f5ee
1 parent b481753
commit 586f5ee
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 27 deletions.
diff --git a/src/assets/styles/baseStyles.scss b/src/assets/styles/baseStyles.scss
@@ -1,26 +1,38 @@
+@import '../../assets/styles/theme';
+
 @font-face {
   font-family: 'Helvetica', sans-serif;
 }
 
-*,*::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-html{
+:focus-visible {
+  outline-style: outset;
+  outline-color: $pink_100;
+  outline-width: 3px;
+  border-radius: 3px;
+  outline-offset: 2px;
+}
+
+html {
   font-size: 62.5%;
   scroll-behavior: smooth;
 }
 
-body{
+body {
   font-family: 'Helvetica', sans-serif;
   font-size: 1.6rem;
-  margin: 0; 
+  margin: 0;
   background-size: cover;
   background-repeat: repeat-y;
   height: 100vh;
-  transition: background-image .5s ease;
+  transition: background-image 0.5s ease;
 }
 
 @media (min-width: 768px) {

diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
@@ -81,6 +81,8 @@ $white_100_75: rgba(255, 255, 255, 0.75);
 
 $pink_50: #f9dbfb;
 
+$pink_100: #fa75ff;
+
 $violet_50: #d7cffc;
 
 $violet_80: #140d19;

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -46,25 +46,25 @@
 }
 
 .containerIconsLight {
-  height: 100%;
+  display: flex;
+  gap: 7px;
+  padding-top: 5px;
 
   a * {
-    position: relative;
+    display: flex;
     width: 20px;
-    margin-top: 5px;
-    margin-right: 7px;
   }
 }
 
 .containerIconsDark {
-  height: 100%;
+  display: flex;
+  gap: 7px;
+  padding-top: 5px;
 
   a * {
-    filter: invert(100%);
-    position: relative;
+    display: flex;
     width: 20px;
-    margin-top: 5px;
-    margin-right: 7px;
+    filter: invert(100%);
   }
 }
 

diff --git a/src/components/SidebarMenu/SidebarMenu.js b/src/components/SidebarMenu/SidebarMenu.js
@@ -63,23 +63,31 @@ export const SidebarMenu = ({ isVisible, onToggle }) => {
             : containerHiddenLight
         }
       >
-        <button className={close} onClick={onToggle}>
+        <button
+          className={close}
+          onClick={onToggle}
+          tabIndex={isVisible ? 0 : -1}
+        >
           <CloseSVG />
         </button>
         <div className={menu}>
           <div className={menuItem}>
-            <Link to="/">{t('home')}</Link>
+            <Link to="/" tabIndex={isVisible ? 0 : -1}>
+              {t('home')}
+            </Link>
           </div>
           <div
             onClick={handleToggleProjects}
             className={areProjectsVisible ? menuItemProjects : menuItem}
           >
-            <button>
+            <button tabIndex={isVisible ? 0 : -1}>
               <CaronSVG
                 className={areProjectsVisible ? caronItem : caronItemRotated}
               />
               <span>
-                <Link to="/">{t('projects')}</Link>
+                <Link to="/" tabIndex={isVisible ? 0 : -1}>
+                  {t('projects')}
+                </Link>
               </span>
             </button>
           </div>
@@ -91,7 +99,9 @@ export const SidebarMenu = ({ isVisible, onToggle }) => {
             >
               <div className={menuItemDecoration}></div>
               <span>
-                <Link to="/">{t('navMap')}</Link>
+                <Link to="/" tabIndex={isVisible ? 0 : -1}>
+                  {t('navMap')}
+                </Link>
               </span>
             </div>
             <div
@@ -101,25 +111,33 @@ export const SidebarMenu = ({ isVisible, onToggle }) => {
             >
               <div className={menuItemDecoration}></div>
               <span>
-                <Link to="/">{t('secretProject')}</Link>
+                <Link to="/" tabIndex={isVisible ? 0 : -1}>
+                  {t('secretProject')}
+                </Link>
               </span>
             </div>
           </div>
           <div className={menuItem}>
-            <Link to="/news/">{t('news')}</Link>
+            <Link to="/news/" tabIndex={isVisible ? 0 : -1}>
+              {t('news')}
+            </Link>
           </div>
           <div className={menuItem}>
-            <Link to="/">{t('joinUs')}</Link>
+            <Link to="/" tabIndex={isVisible ? 0 : -1}>
+              {t('joinUs')}
+            </Link>
           </div>
           <div className={menuItem}>
-            <Link to="/">{t('contact')}</Link>
+            <Link to="/" tabIndex={isVisible ? 0 : -1}>
+              {t('contact')}
+            </Link>
           </div>
         </div>
         <div className={socialMedia}>
-          <a href={GITHUB_LINK}>
+          <a href={GITHUB_LINK} tabIndex={isVisible ? 0 : -1}>
             <GithubSVG />
           </a>
-          <a href={FACEBOOK_LINK}>
+          <a href={FACEBOOK_LINK} tabIndex={isVisible ? 0 : -1}>
             <FacebookSVG />
           </a>
         </div>

diff --git a/src/components/SidebarMenu/SidebarMenu.module.scss b/src/components/SidebarMenu/SidebarMenu.module.scss
@@ -101,9 +101,9 @@
     padding: 0px 24px;
     height: 200px;
     height: 40px;
+    gap: 12px;
     a * {
       display: block;
-      margin-right: 12px;
       filter: invert(100%);
       height: 100%;
       max-width: 40px;
@@ -219,9 +219,9 @@
     padding: 0px 24px;
     height: 200px;
     height: 40px;
+    gap: 12px;
     a * {
       display: block;
-      margin-right: 12px;
       filter: invert(100%);
       height: 100%;
       max-width: 40px;