From 7514b11bb7926b1be463478cae37e0beda01acb5 Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Tue, 5 Nov 2024 11:36:47 +0100
Subject: [PATCH] Improve accessibility with better color contrast

Fixes Lighthouse accessibility violations, particularly for form hint
text that was difficult to read in dark mode.

- Make extra-small text darker in both light and dark themes for better
  readability
- Adjust dark theme colors to better work with non-black background:
  - Change some text color from 500 to 400
  - Update link color from `blue-600` to `blue-500`
---
 app/views/active_admin/_site_footer.html.erb              | 4 ++--
 app/views/active_admin/shared/_resource_comments.html.erb | 2 +-
 plugin.js                                                 | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/active_admin/_site_footer.html.erb b/app/views/active_admin/_site_footer.html.erb
index 39b8b77c560..0aace1f875a 100644
--- a/app/views/active_admin/_site_footer.html.erb
+++ b/app/views/active_admin/_site_footer.html.erb
@@ -1,7 +1,7 @@
-<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 border-t dark:border-gray-800">
+<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 dark:text-gray-400 border-t dark:border-gray-800">
   <%= I18n.t(
         "active_admin.powered_by",
-        active_admin: link_to("Active Admin", "https://activeadmin.info", class: "text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-400 no-underline"),
+        active_admin: link_to("Active Admin", "https://activeadmin.info", class: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 no-underline"),
         version: ActiveAdmin::VERSION
       ).html_safe %>
 </div>
diff --git a/app/views/active_admin/shared/_resource_comments.html.erb b/app/views/active_admin/shared/_resource_comments.html.erb
index 0be17031cc1..bc1ab330bcd 100644
--- a/app/views/active_admin/shared/_resource_comments.html.erb
+++ b/app/views/active_admin/shared/_resource_comments.html.erb
@@ -25,7 +25,7 @@
           <span class="font-semibold">
             <%= comment.author ? auto_link(comment.author) : I18n.t("active_admin.comments.author_missing") %>
           </span>
-          <span class="text-xs text-gray-400">
+          <span class="text-xs text-gray-500 dark:text-gray-400">
             <%= pretty_format comment.created_at %>
           </span>
         </div>
diff --git a/plugin.js b/plugin.js
index 9f24a5f2811..18ab68c931a 100644
--- a/plugin.js
+++ b/plugin.js
@@ -316,7 +316,7 @@ export default plugin(
         '@apply bg-gray-50 border border-gray-300 text-gray-900 rounded-md focus:ring-blue-500 focus:border-blue-500 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500': {}
       },
       'a': {
-        '@apply text-blue-600 underline underline-offset-[.2rem]': {}
+        '@apply text-blue-600 dark:text-blue-500 underline underline-offset-[.2rem]': {}
       },
     });
     addComponents({
@@ -509,7 +509,7 @@ export default plugin(
         '@apply sr-only': {}
       },
       '.formtastic :where(.inline-hints)': {
-        '@apply text-gray-500 mt-2': {}
+        '@apply text-gray-500 dark:text-gray-400 mt-2': {}
       },
       '.formtastic :where(.errors)': {
         '@apply p-4 mb-6 rounded-md space-y-2 bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300': {}