From 0d113488a7c23c9410c1e392f97561a65b7426fd Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 09:25:28 -0600
Subject: [PATCH] Add focus states

---
 app/components/ContentLockup.js | 2 +-
 app/components/FeatureGrid.js   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index fbdb486..2474f8c 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -80,7 +80,7 @@ const ContentLockup = ({
       {variant === "feature" && linkText && (
         <a
           href={linkHref || "#"}
-          className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors"
+          className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[#171717] rounded-sm px-1 py-0.5"
         >
           {linkText}
         </a>
diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index 8d29827..7c6c4fa 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -8,9 +8,10 @@ const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
     <div className="p-0 lg:p-[var(--spacing-scale-064)]">
       <section
-        className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] ${className}`}
+        className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`}
         aria-labelledby="feature-grid-headline"
         role="region"
+        tabIndex={-1}
       >
         <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
           {/* Feature Content Lockup */}