From 80828bd553eb980187bb90e30eda679aafcf67b9 Mon Sep 17 00:00:00 2001
From: "A. Wilcox" <AWilcox@Wilcox-Tech.com>
Date: Tue, 2 Dec 2025 16:04:49 -0600
Subject: [PATCH] app: Give placeholder text sufficient contrast

* Override user-agent styling for placeholder text to ensure it has
  sufficient contrast.  #757575 has a contrast ratio of 4.6:1.

* Use 'form-select' class on all <SELECT/> elements.  Bootstrap's
  styling ensures a white background instead of the Mac gradient used
  by some user agents on the Mac OS.  The gradient would have lowered
  the ratio to 3.76:1.

* Remove duplicated CSS rules from application.scss for maintainability.

Closes: ADA-397
---
 app/assets/stylesheets/application.scss | 72 ++-----------------------
 app/views/forms/insert_form.html.erb    |  4 +-
 app/views/forms/search_form.html.erb    |  4 +-
 app/views/home/admin_users.html.erb     |  2 +-
 app/views/items/edit.html.erb           |  4 +-
 app/views/users/edit.html.erb           |  2 +-
 6 files changed, 12 insertions(+), 76 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8a6c3a6..a4d1319 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -54,7 +54,6 @@ a:hover, a:active, a:focus {
   border-color: lightgrey;
 }
 
-
 .table-header {
   background-color: #e5e7e9;
   color: #3b3b3b;
@@ -80,6 +79,10 @@ input[type="text"], input[type="date"], input[type="time"], select {
   box-sizing: border-box;
 }
 
+input::placeholder, select::placeholder {
+  color: #757575;
+}
+
 input[type="text"], select {
   width: 100%;
 }
@@ -108,18 +111,6 @@ label {
   padding: 8px;
 }
 
-.btn-danger,
-.btn-primary,
-.btn-secondary {
-  box-shadow: none !important;
-  color: white !important;
-}
-
-.btn-link:hover {
-  text-decoration: none;
-}
-
-
 .desc {
   max-width: 100px;
 }
@@ -217,61 +208,6 @@ label {
   }
 }
 
-.form-group.required label:after {
-  content: "*";
-  color: #ee0000;
-  margin-left: 0.25rem;
-}
-
-a, a:link, a:visited {
-  box-shadow: inset 0 -4px 0 #FDB515;
-  transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
-  text-decoration: none;
-  color: black;
-
-  &.no-link-style {
-    box-shadow: none;
-  }
-
-  li & {
-    box-shadow: inset 0 -2px 0 #FDB515;
-
-    .navbar-nav & {
-      box-shadow: none;
-    }
-  }
-}
-
-a:hover, a:active, a:focus {
-  background: #FDB515;
-
-  &.no-link-style {
-    background: none;
-  }
-}
-
-.tblheader {
-  font-weight: bold;
-  color: blue;
-}
-
-// Some of the styles above were butchering Bootstrap buttons in tables
-.btn-danger,
-.btn-primary,
-.btn-secondary {
-  box-shadow: none !important;
-  color: white !important;
-}
-
-.btn-link:hover {
-  text-decoration: none;
-}
-
-.btn.btn-primary:disabled {
-  background-color: lightgrey;
-  border-color: lightgrey;
-}
-
 .page {
   padding-left: 2px;
   padding-right: 2px;
diff --git a/app/views/forms/insert_form.html.erb b/app/views/forms/insert_form.html.erb
index 55d8424..a350174 100644
--- a/app/views/forms/insert_form.html.erb
+++ b/app/views/forms/insert_form.html.erb
@@ -7,7 +7,7 @@
   <%= form_with(url: items_path, local: true, multipart: true) do |form| %>
     <div class="form-group required">
       <%= form.label(:item_type, 'Item type:') %>
-      <%= form.select(:item_type, options_for_select(@item_type_layout), { prompt: 'Select a type' }, { required: true }) %>
+      <%= form.select(:item_type, options_for_select(@item_type_layout), { prompt: 'Select a type' }, { required: true, class: 'form-select' }) %>
     </div>
 
     <div class="form-group required">
@@ -37,7 +37,7 @@
 
     <div class="form-group required">
       <%= form.label(:location, 'Held at location:') %>
-      <%= form.select(:location, options_for_select(@locations_layout), { prompt: 'Select a location' }, { required: true }) %>
+      <%= form.select(:location, options_for_select(@locations_layout), { prompt: 'Select a location' }, { required: true, class: 'form-select' }) %>
     </div>
 
     <div style="padding-top: 8px; padding-bottom: 8px;">
diff --git a/app/views/forms/search_form.html.erb b/app/views/forms/search_form.html.erb
index 8c6fc74..244f64c 100644
--- a/app/views/forms/search_form.html.erb
+++ b/app/views/forms/search_form.html.erb
@@ -10,7 +10,7 @@
 
     <div>
       <%= form.label(:item_type, 'Item type:') %>
-      <%= form.select(:item_type, item_type_options, include_blank: true) %>
+      <%= form.select(:item_type, item_type_options, { include_blank: true }, { class: 'form-select' }) %>
     </div>
     <div>
       <%= form.label(:keyword, 'Keywords:') %>
@@ -18,7 +18,7 @@
     </div>
     <div>
       <%= form.label(:location, 'Location:') %>
-      <%= form.select(:location, location_options, include_blank: true) %>
+      <%= form.select(:location, location_options, { include_blank: true }, { class: 'form-select' }) %>
     </div>
 
     <fieldset>
diff --git a/app/views/home/admin_users.html.erb b/app/views/home/admin_users.html.erb
index 3b492bd..9430fc2 100644
--- a/app/views/home/admin_users.html.erb
+++ b/app/views/home/admin_users.html.erb
@@ -6,7 +6,7 @@
   <%= form_with(url: user_insert_path, local: true) do |form| %>
 
     <%= form.label(:user_role, 'User role:') %> <span style="color: #ee0000"> * </span>
-    <%= form.select(:user_role, options_for_select(User::ROLES), include_blank: true, required: true) %>
+    <%= form.select(:user_role, options_for_select(User::ROLES), { include_blank: true }, { required: true, class: 'form-select' }) %>
 
     <%= form.label(:user_name, 'User name:') %><span style="color: #ee0000"> * </span>
     <%= form.text_field :user_name, placeholder: 'John Smith', required: true %>
diff --git a/app/views/items/edit.html.erb b/app/views/items/edit.html.erb
index cae6324..aa904a0 100644
--- a/app/views/items/edit.html.erb
+++ b/app/views/items/edit.html.erb
@@ -7,7 +7,7 @@
     <%= form.hidden_field(:id, value: @item.id) %> <%# TODO: just do this the Rails way %>
     <div class="form-group required">
       <%= form.label(:item_type, 'Item type:') %>
-      <%= form.select(:item_type, options_for_select(@item_type_layout, @item.item_type), {}, { required: true }) %>
+      <%= form.select(:item_type, options_for_select(@item_type_layout, @item.item_type), {}, { required: true, class: 'form-select' }) %>
     </div>
 
     <div class="form-group required">
@@ -38,7 +38,7 @@
 
     <div class="form-group required">
       <%= form.label(:location, 'Held at location:') %>
-      <%= form.select(:location, options_for_select(@locations_layout, @item.location), {}, { required: true }) %>
+      <%= form.select(:location, options_for_select(@locations_layout, @item.location), {}, { required: true, class: 'form-select' }) %>
     </div>
 
     <div style="padding-top: 8px; padding-bottom: 8px;">
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index a7659b7..5165cab 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -3,7 +3,7 @@
   <%= form_with(url: user_path, method: :put, local: true) do |form| %>
 
     <%= form.label(:user_role, "User role:") %>
-    <%= form.select(:user_role, options_for_select(User::ROLES, @user.user_role)) %>
+    <%= form.select(:user_role, options_for_select(User::ROLES, @user.user_role), {}, { class: 'form-select' }) %>
 
     <%= form.label(:user_name, "User name:") %>
     <%= form.text_field :user_name, value: @user.user_name %>