update

Author: RadonCoding

index.html

@@ -39,16 +39,25 @@ <h1 class="portfolio__title">RadonCoding</h1>
           >
         </div>
         <nav class="portfolio__contacts">
-          <a class="portfolio__contact" href="https://github.com/RadonCoding">
+          <a
+            class="portfolio__contact"
+            href="https://github.com/RadonCoding"
+            aria-label="Open GitHub"
+          >
             <i class="bi bi-github"></i>
-            <span class="portfolio__contact-content">Open GitHub</span>
+            <span class="portfolio__contact-content" aria-hidden="true"
+              >Open GitHub</span
+            >
           </a>
           <a
             class="portfolio__contact portfolio__contact--copy"
             data-copy="radonreborn"
+            aria-label="Copy Username"
           >
             <i class="bi bi-discord"></i>
-            <span class="portfolio__contact-content">Copy Username</span>
+            <span class="portfolio__contact-content" aria-hidden="true"
+              >Copy Username</span
+            >
           </a>
         </nav>
       </section>

src/style.css

@@ -245,6 +245,7 @@ section {
   cursor: pointer;
   text-decoration: none;
   container-type: size;
+  overflow: visible;
   transition: all 0.2s ease-in-out;
 }
 
@@ -272,11 +273,17 @@ section {
   border-radius: var(--rounded-xs);
   white-space: nowrap;
   opacity: 0;
-  transform: translateX(-50%);
+  visibility: hidden;
+  transform: translateX(-50%) translateY(var(--space-3xs));
+  transition: all 0.2s ease-in-out;
+  pointer-events: none;
 }
 
-.portfolio__contact:hover .portfolio__contact-content {
+.portfolio__contact:hover .portfolio__contact-content,
+.portfolio__contact:focus .portfolio__contact-content {
   opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
 }
 
 .portfolio__contact--copy:active {