fix: add AA WCAG compliant link styling

oxen-io · Oct 8, 2024 · 672fd6d · 672fd6d
1 parent 2309ab7
commit 672fd6d
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/apps/foundation/app/(Site)/blog/page.tsx b/apps/foundation/app/(Site)/blog/page.tsx
@@ -19,7 +19,7 @@ export const dynamic = 'force-static';
 async function ReadMoreText() {
   const blogDictionary = await getTranslations('blog');
   return (
-    <span className="group-hover:border-b-session-green group-hover:text-session-text-black hover:border-b-session-green border-b-session-black mt-1 w-max border-b text-sm group-hover:border-b-2">
+    <span className="group-hover:decoration-session-green decoration-session-black mt-1 w-max text-sm underline">
       {blogDictionary('readMore')}
     </span>
   );

diff --git a/packages/sanity-cms/components/SanityPortableText.tsx b/packages/sanity-cms/components/SanityPortableText.tsx
@@ -51,7 +51,7 @@ export const basicComponents: BasicComponentsType = {
   },
   marks: {
     link: ({ children, value }) => (
-      <NavLink href={value.href} className="text-session-green-dark hover:text-session-green">
+      <NavLink href={value.href} unStyled className="text-session-green-link hover:underline">
         {children}
       </NavLink>
     ),

diff --git a/packages/ui/styles/global.css b/packages/ui/styles/global.css
@@ -32,6 +32,7 @@
             rgba(188, 200, 193, 1) 100%
     );
     --session-green-dark: #00aa59;
+    --session-green-link: #008547;
     --session-disabled: #939393;
 
     /* Definitions */

diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
@@ -53,6 +53,7 @@ export default {
         session: {
           green: 'var(--session-green)',
           'green-dark': 'var(--session-green-dark)',
+          'green-link': 'var(--session-green-link)',
           black: 'var(--session-black)',
           white: 'var(--session-white)',
           text: 'var(--session-text)',