diff --git a/.Jules/palette.md b/.Jules/palette.md
index cb6ae28..dc7e31b 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -40,3 +40,7 @@
 ## 2026-02-18 - External Link Indicators
 **Learning:** Exposing hidden content & using distinct indicators for external links improves discoverability and sets clear expectations.
 **Action:** Use an `ExternalLinkIcon` (e.g., arrow up-right) for external links in lists to differentiate them from internal navigation.
+
+## 2026-03-08 - Keyboard parity for hover interactions
+**Learning:** Adding animation classes only to hover states (e.g., `group-hover:translate-x-1`) means keyboard users miss out on visual interaction feedback when focusing on links or buttons.
+**Action:** Always pair `hover` or `group-hover` interactive classes with equivalent `focus-visible` or `group-focus-visible` classes to ensure equitable visual feedback for keyboard navigation.
diff --git a/src/components/HomepageContent/index.js b/src/components/HomepageContent/index.js
index 92f03db..ad4291d 100644
--- a/src/components/HomepageContent/index.js
+++ b/src/components/HomepageContent/index.js
@@ -38,7 +38,8 @@ function ExternalLinkIcon({ className }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={className}
-      aria-hidden="true"
+      role="img"
+      aria-label="(opens in new tab)"
     >
       <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
       <polyline points="15 3 21 3 21 9" />
@@ -63,9 +64,9 @@ function Section({ title, items }) {
                       <Link to={item.link} className="inline-flex items-center gap-1 group">
                         {item.title}
                         {isExternal ? (
-                          <ExternalLinkIcon className="transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" />
+                          <ExternalLinkIcon className="transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 group-focus-visible:translate-x-1 group-focus-visible:-translate-y-1" />
                         ) : (
-                          <ArrowIcon className="transition-transform group-hover:translate-x-1" />
+                          <ArrowIcon className="transition-transform group-hover:translate-x-1 group-focus-visible:translate-x-1" />
                         )}
                       </Link>
                     ) : (
@@ -95,7 +96,7 @@ function LatestPost() {
             <h3>
               <Link to={latestPost.url} className="inline-flex items-center gap-1 group">
                 {latestPost.title}
-                <ArrowIcon className="transition-transform group-hover:translate-x-1" />
+                <ArrowIcon className="transition-transform group-hover:translate-x-1 group-focus-visible:translate-x-1" />
               </Link>
             </h3>
             <small>
@@ -119,7 +120,7 @@ function LatestPost() {
               aria-label={`Read more about ${latestPost.title}`}
             >
               Read More
-              <ArrowIcon className="transition-transform group-hover:translate-x-1" />
+              <ArrowIcon className="transition-transform group-hover:translate-x-1 group-focus-visible:translate-x-1" />
             </Link>
           </div>
         </div>