feat: Refactor editable cell to use button for submission and improve…

… accessibility
phac-nml · Dec 18, 2024 · 7525a14 · 7525a14
1 parent 719964c
commit 7525a14
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/app/components/samples/editable_cell.rb b/app/components/samples/editable_cell.rb
@@ -6,11 +6,30 @@ class EditableCell < Component
     with_collection_parameter :field
 
     erb_template <<~ERB
-      <td id="<%= dom_id(@sample, @field) %>">
-        <%= form_with(url: editable_namespace_project_sample_metadata_field_path(@sample.project.namespace.parent, @sample.project, @sample), method: :get) do |form| %>
+      <td id="<%= dom_id(@sample, @field) %>"
+          class="relative"
+          role="gridcell">
+        <%= form_with(
+              url: editable_namespace_project_sample_metadata_field_path(
+                @sample.project.namespace.parent,
+                @sample.project,
+                @sample
+              ),
+              method: :get,
+              class: "w-full"
+            ) do |form| %>
+
           <%= form.hidden_field :field, value: @field %>
           <%= form.hidden_field :format, value: "turbo_stream" %>
-          <%= form.submit @sample.metadata[@field]  || "", class: "cursor-pointer p-4 hover:bg-slate-50 dark:hover:bg-slate-600 focus:ring-4 focus:outline-none focus:ring-primary-200 dark:focus:ring-primary-700 w-full text-left", autofocus: @autofocus %>
+
+          <button type="submit"
+                  class="w-full p-4 text-left cursor-pointer hover:bg-slate-50 focus:ring-4 focus:outline-none focus:ring-primary-200 dark:hover:bg-slate-600 dark:focus:ring-primary-700"
+                  aria-label="Edit <%= @field %> value"
+                  <%= "autofocus" if @autofocus %>>
+            <span class="block truncate">
+              <%= @sample.metadata[@field] || "" %>
+            </span>
+          </button>
         <% end %>
       </td>
     ERB