Umn accessibility updates

app/assets/stylesheets/base/globals.scss

@@ -56,9 +56,11 @@ footer {
     border-radius: 0;
     border: none;
   }
+
   .modal-header {
     background: $school_main_color;
-    h4 {
+
+    h2 {
       color: white;
     }
   }

app/assets/stylesheets/base/media.scss

@@ -85,7 +85,8 @@
     em {
       padding: 2px 8px;
     }
-    h4 {
+
+    h2 {
       font-size: 18px;
       line-height: 23px;
       font-weight: 200;

app/assets/stylesheets/pages/admin.scss

@@ -2,6 +2,10 @@
   margin-top: 10px;
   background: none;
   border: 1px solid #ddd;
+
+  a {
+    color: #0056B3 !important;
+  }
 }
 
 .admin {

app/assets/stylesheets/pages/categories.scss

@@ -52,4 +52,14 @@
       text-align: center;
     }
   }
+}
+
+#refine-search {
+  display: block;
+  font-size: 1.17em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
 }

app/assets/stylesheets/pages/home.scss

@@ -43,4 +43,8 @@
       font-size: 13px;
     }
   }
+}
+
+#homepage-banner {
+  font-size: 29px;
 }

app/assets/stylesheets/pages/studies.scss

@@ -1,5 +1,20 @@
 @import "../mixins/multiline_truncate";
 
+.btn-primary-contrast {
+  background-color: #0056B3 !important;
+}
+
+.nav-link-contrast {
+  color: #0056B3 !important;
+
+}
+
+.center-text {
+  text-align: center;
+  padding-top: 25px;
+}
+
+
 .study-result-hud {
   padding-left: 0px;
 
@@ -16,6 +31,13 @@
       font-weight: 200;
     }
 
+    #refine-search {
+      margin: 10px 0;
+      position: relative;
+      color: white;
+      font-weight: 200;
+    }
+
     .gender-label {
       margin-top: 5px;
     }
@@ -77,7 +99,7 @@
     margin-bottom: 1em;
   }
 
-  h4{
+  h2 {
     a {
       text-decoration: underline;
       //font-weight: bold;
@@ -153,7 +175,7 @@
   .study {
     position: relative;
 
-    label {
+    .attribute-label {
       color: #404d5b;
     }
 
@@ -255,11 +277,20 @@
   margin-top: 1.5em;
 }
 
+@media only screen and (max-width: 480px) {
+
+  .study-photo {
+    width: 100%;
+    float: none;
+    margin-left: 0px !important;
+  }
+}
+
 .study-photo {
   max-width: 500px;
 }
 
 .refine-search::placeholder {
   color: white;
   opacity: .5;
-}
+}

app/controllers/admin/showcase_items_controller.rb

@@ -51,6 +51,6 @@ def destroy
 
   private
     def item_params
-      params.require(:showcase_item).permit(:name, :title, :caption, :url, :active, :showcase_image, :sort_order)
+      params.require(:showcase_item).permit(:name, :title, :caption, :url, :active, :showcase_image, :sort_order, :alt_text)
     end
 end

app/helpers/studies_helper.rb

@@ -231,10 +231,10 @@ def render_attribute(settings, key, page, attribute, new_line = false)
 
     if page == 'show' && setting.display_on_show && !(setting.display_if_null_on_show == false && (attribute.nil? || attribute.blank?))
       #configured to show up on the page unless attribute is nil
-      rendered = rendered + '<label class="nomargin strong">' + setting.attribute_label + '</label> ' if setting.display_label_on_show
+      rendered = rendered + '<span class="nomargin strong attribute-label">' + setting.attribute_label + '</span> ' if setting.display_label_on_show
       rendered = rendered + open_tag + attribute.to_s + close_tag
     elsif page == 'list' && setting.display_on_list && !(setting.display_if_null_on_list == false && (attribute.nil? || attribute.blank?))
-      rendered = rendered + '<label class="nomargin strong">' + setting.attribute_label + '</label> ' if setting.display_label_on_list
+      rendered = rendered + '<span class="nomargin strong attribute-label">' + setting.attribute_label + '</span> ' if setting.display_label_on_list
       rendered = rendered + open_tag + attribute.to_s + close_tag
     end
     rendered = '<div data-attribute-name=' + setting.attribute_key + '>' + rendered + '</div>' unless rendered == ''

app/models/showcase_item.rb

@@ -2,4 +2,13 @@ class ShowcaseItem < ApplicationRecord
 	has_one_attached :showcase_image
 
 	validates :showcase_image, content_type: [:png, :jpg, :jpeg]
+
+	def alt_text_value 
+		if !alt_text.nil?
+			alt_text
+		else
+			""
+		end
+	end
+
 end

app/views/admin/disease_sites/index.html.erb

@@ -1,15 +1,15 @@
 <div class="admin">
   <div class="clearfix">
-    <h3 class="float-left">Disease Sites</h3>
-    <div class="float-right header-button"><%= link_to 'Add Site', new_admin_disease_site_path, class: 'btn btn-school'%></div>  
+    <h1 class="float-left">Disease Sites</h1>
+    <div class="float-right header-button"><%= link_to 'Add Site', new_admin_disease_site_path, class: 'btn btn-school'%></div>
   </div>
   <p class="description">The site section allows the administrator to add different disease sites to the system.  These disease sites can then be tagged on a particular trial.</p>
-
   <table class="table table-bordered table-trials">
+    <caption>Disease Sites</caption>
     <tr>
       <th>Disease Site Name</th>
       <th>Group</th>
-      <th></th>
+      <th>Actions</th>
     </tr>
     <% if @sites.empty? %>
       <tr>

app/views/admin/disease_sites/new.html.erb

@@ -1,4 +1,4 @@
 <div class="admin">
-  <h3>Add Site</h3>
+  <h1>Add Site</h1>
   <%= render 'form' %>
 </div>

app/views/admin/groups/_form.html.erb

@@ -3,28 +3,30 @@
   <label for="subgroups">
     Subgroups
   </label>
-  <select name="group[subgroups][]" multiple="true" id="subgroups" class="select2 tags">
+  <select aria-label='subgroups' name="group[subgroups][]" multiple="true" id="subgroups" class="select2 tags">
     <%= options_for_select(Subgroup.distinct_values, @group.subgroups.map { |sg| sg.name }) %>
   </select>
   <hr/>
-
   <div class="form-group">
-    <label>Filters</label>
+    <p>Filters</p>
     <%= f.input :children, label: 'Children (age < 18 years)' %>
     <%= f.input :adults, label: 'Adults (age >= 18 years)' %>
-    <label for='group_heathy_volunteers' data-toggle= 'popover' data-title= 'Healthy Volunteer' data-content= 'A person who does not have the condition or disease being studied.' data-placement='top'>Healthy Volunteers <i class="fa-solid fa-circle-question"></i></label>
+    <%= f.label :healthy_volunteers %>
+    <%= f.hint  "A person who does not have the condition or disease being studied."%>
     <%= f.input :healthy_volunteers, as: :select, collection: [['Please Select',''],['Yes',true],['No',false]], label: false, include_blank: false %>
   </div>
-
   <hr/>
-
-  <label>Choose all conditions that apply</label><br>
-  <%= f.collection_check_boxes :condition_ids, @conditions, :id, :condition, :item_wrapper_class => 'd-block checkbox' %>
+  <fieldset >
+    <legend>Conditions</legend>
+    <%= f.collection_check_boxes :condition_ids, @conditions, :id, :condition, item_label_class: 'form-check' do |x|%>
+      <%= x.check_box %> <%=x.object.condition %>
+    <% end %>
+  </fieldset>
   <div class="controls">
     <%= f.submit 'Save Group', class: 'btn btn-school' %>
     <%= link_to 'Back to group admin', admin_groups_path, class: 'btn btn-outline-secondary' %>
     <% if params[:action] == 'edit' %>
-      <%= link_to 'Export to Excel', edit_admin_group_path(id: params[:id], format: 'csv'), class: 'btn btn-success' %>
+      <%= link_to 'Export to Excel', edit_admin_group_path(id: params[:id], format: 'csv'), class: 'btn btn-school' %>
     <% end%>
   </div>
 <% end %>

app/views/admin/groups/edit.html.erb

@@ -1,4 +1,4 @@
 <div class="admin">
-  <h3>Edit Group</h3>
+  <h1>Edit Group</h1>
   <%= render 'form' %>
 </div>

app/views/admin/groups/index.html.erb

@@ -1,28 +1,24 @@
 <div class="admin">
   <div class="clearfix">
-    <h3 class="float-left">Groups</h3>
+    <h1 class="float-left">Groups</h1>
     <div class="float-right header-button">
       <%= link_to 'Add Group', new_admin_group_path, class: 'btn btn-school' %>
     </div>
   </div>
-
   <p class="description">The groups section allows the administrator to map many conditions from ClinicalTrials.gov into a single grouping which is displayed in the categories section of the site.  The idea is that groups would make it easier for the public to navigate through many different conditions within a single area of study.</p>
-
   <div class="alert alert-info">
     <p>Note: When changing groups the trials must be re-indexed to reflect the changes. This process can take up to 5 min to complete.  If you have made changes to the groups, please re-index by pressing the button below.</p>
   </div>
-
   <div class="clearfix">
     <div class="float-right">
-      <%= link_to '<i class="fa-solid fa-refresh"></i> Re-Index Trials Now'.html_safe, admin_group_reindex_path, class: 'btn btn-success btn-reindex' %>
+      <%= link_to '<i class="fa-solid fa-refresh"></i> Re-Index Trials Now'.html_safe, admin_group_reindex_path, class: 'btn btn-primary btn-primary-contrast' %>
     </div>
   </div>
-
-  <table class="table table-boredered table-trials">
+  <table class="table table-bordered table-trials">
     <tr>
       <th>Group Name</th>
       <th>Condition Count</th>
-      <th></th>
+      <th>Actions</th>
     </tr>
     <% if @groups.empty? %>
       <tr>
@@ -34,7 +30,7 @@
         <td><%= g.group_name %></td>
         <td><%= g.condition_groups.size %></td>
         <td>
-          <%= link_to 'Edit', edit_admin_group_path(g.id), class: 'btn btn-primary' %>
+          <%= link_to 'Edit', edit_admin_group_path(g.id), class: 'btn btn-primary btn-primary-contrast' %>
           <%= link_to 'Delete', admin_group_path(g.id), method: 'delete', class: 'btn btn-danger', data: { confirm:"Are you sure you want to delete this group?" }%>
         </td>
       </tr>

app/views/admin/groups/new.html.erb

@@ -1,4 +1,4 @@
 <div class="admin">
-  <h3>Add Group</h3>
+  <h1>Add Group</h1>
   <%= render 'form' %>
 </div>

app/views/admin/reports/index.html.erb

@@ -1,10 +1,10 @@
 <div class="admin">
   <div class="clearfix">
-    <h3 class="float-left">Reports</h3>
+    <h1 class="float-left">Reports</h1>
   </div>
   <p class="description">Available reports.</p>
   <ul>
-    <li><a href="<%= admin_trial_recent_as_path %>">Recent Trials</a></li>
-    <li><a href="<%= admin_reports_recent_conditions_path %>">Recent Conditions</a></li>
+    <li><a class='nav-link-contrast' href="<%= admin_trial_recent_as_path %>">Recent Trials</a></li>
+    <li><a class='nav-link-contrast'  href="<%= admin_reports_recent_conditions_path %>">Recent Conditions</a></li>
   </ul>
 </div>

app/views/admin/showcase_items/_form.html.erb

@@ -5,36 +5,34 @@
     <%= f.input :sort_order, as: :integer, label: 'Order' %>
     <%= f.input :title, hint: '<small><i>(Heading for the showcase item.)</i></small>'.html_safe %>
     <%= f.input :caption, hint: '<small><i>(Text for the showcase item.)</i></small>'.html_safe %>
+    <%= f.input :alt_text, hint: '<small><i>(Alt text for the showcase item.)</i></small>'.html_safe%>
     <div class="form-group optional">
       <label class="control-label optional" for="showcase_item_showcase_image">Image Upload</label><br/>
       <%= f.file_field :showcase_image %>
     </div>
     <%= f.input :url, label: 'URL', hint: '<small><i>(URL that the "Learn More" button will link to.)</i></small>'.html_safe %>
   </div>
-
   <% if @item.showcase_image.attached? || !@item.url.blank? %>
-  		<h4>Preview</h4>
-
-      <div class="col-md-4 card border-0">
-        <div class="card-text">
-          <% unless !@item.showcase_image.attached? && @item.url.blank? %>
-            <% if @item.showcase_image.attached? %>
-              <%= image_tag @item.showcase_image, class: 'w-100' %>
-            <% end %>
+    <h2>Preview</h2>
+    <div class="col-md-4 card border-0">
+      <div class="card-text">
+        <% unless !@item.showcase_image.attached? && @item.url.blank? %>
+          <% if @item.showcase_image.attached? %>
+            <%= image_tag @item.showcase_image, class: 'w-100', alt: @item.alt_text %>
           <% end %>
-        </div>
-        <div class="card-header align-items-center justify-content-center h-100"> 
-          <h5 class="caption-title"><%= @item.title.to_s %></h5>
-          <span style="float: right; position: relative; bottom: 0;">
+        <% end %>
+      </div>
+      <div class="card-header align-items-center justify-content-center h-100">
+        <h3 class="caption-title"><%= @item.title.to_s %></h3>
+        <span style="float: right; position: relative; bottom: 0;">
           <%= link_to 'Learn More', @item.url, class: 'btn btn-secondary' %>
         </span>
-        </div>
       </div>
-  	</div>
-  <% end %>
-
-  <div class="controls">
-    <%= f.submit 'Save', class: 'btn btn-school' %>
-    <%= link_to 'Back to Showcase', admin_showcase_items_path, class: 'btn btn-secondary' %>
+    </div>
   </div>
+<% end %>
+<div class="controls">
+  <%= f.submit 'Save', class: 'btn btn-school' %>
+  <%= link_to 'Back to Showcase', admin_showcase_items_path, class: 'btn btn-secondary' %>
+</div>
 <% end %>

app/views/admin/showcase_items/edit.html.erb

@@ -1,4 +1,4 @@
 <div class="admin">
-  <h3>Edit Showcase Item</h3>
+  <h1>Edit Showcase Item</h1>
   <%= render 'form' %>
 </div>