From 2ca5f5c815d2ca673f36be787ae11b052fca6f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 29 Aug 2021 02:05:24 +0200
Subject: [PATCH] Add ARIA label and description to settings fields

These fields have no label associated to them. While it's more or less
obvious for sighted users that these fields are associated with the
table cell next to them, visually impaired users might not get that
association when using the screen reader in forms mode.

Note we're using `aria-label` instead of `aria-labelledby`. IMHO in this
case `aria-labelledby` is the superior method because it guarantees the
text is present for both sighted and visually impaired users. However,
testing for fields with no label other than the one provided by
`aria-labelledby` is hard since Capybara has no support for this
attribute.

So we're using `aria-label` and testing the presence of the text on the
page (with the `within "tr", text:` statements) as well as the ARIA
label (with the `fill_in` statements).
---
 .../admin/settings/_settings_form.html.erb    |  6 +++-
 .../admin/settings/_settings_table.html.erb   |  2 +-
 spec/system/admin/settings_spec.rb            | 30 +++++++++----------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/views/admin/settings/_settings_form.html.erb b/app/views/admin/settings/_settings_form.html.erb
index 1b8bc2027..33e9ab8f1 100644
--- a/app/views/admin/settings/_settings_form.html.erb
+++ b/app/views/admin/settings/_settings_form.html.erb
@@ -1,7 +1,11 @@
 <%= form_for([:admin, setting]) do |f| %>
   <%= f.hidden_field :tab, id: dom_id(setting, :tab), value: tab if defined?(tab) %>
   <div class="small-12 medium-6 large-8 column">
-    <%= f.text_area :value, label: false, id: dom_id(setting, :value) %>
+    <%= f.text_area :value,
+      label: false,
+      id: dom_id(setting, :value),
+      "aria-label": strip_tags(t("settings.#{setting.key}")),
+      "aria-describedby": dom_id(setting, :description) %>
   </div>
   <div class="small-12 medium-6 large-4 column">
     <%= f.submit(t("admin.settings.index.update_setting"), class: "button hollow expanded") %>
diff --git a/app/views/admin/settings/_settings_table.html.erb b/app/views/admin/settings/_settings_table.html.erb
index d46c5237d..b3015525f 100644
--- a/app/views/admin/settings/_settings_table.html.erb
+++ b/app/views/admin/settings/_settings_table.html.erb
@@ -11,7 +11,7 @@
         <td class="small-6">
           <strong><%= t("settings.#{setting.key}") %></strong>
           <br>
-          <span class="small">
+          <span id="<%= dom_id(setting, :description) %>" class="small">
             <%= t("settings.#{setting.key}_description", default: t("admin.settings.no_description")) %>
           </span>
         </td>
diff --git a/spec/system/admin/settings_spec.rb b/spec/system/admin/settings_spec.rb
index 74c90a760..8160d4043 100644
--- a/spec/system/admin/settings_spec.rb
+++ b/spec/system/admin/settings_spec.rb
@@ -14,12 +14,12 @@ describe "Admin settings", :admin do
   end
 
   scenario "Update" do
-    setting = create(:setting, key: "super.users.first")
+    create(:setting, key: "super.users.first")
 
     visit admin_settings_path
 
-    within("#edit_setting_#{setting.id}") do
-      fill_in "value_setting_#{setting.id}", with: "Super Users of level 1"
+    within "tr", text: "First" do
+      fill_in "First", with: "Super Users of level 1"
       click_button "Update"
     end
 
@@ -173,13 +173,13 @@ describe "Admin settings", :admin do
       end
 
       scenario "On #tab-remote-census-configuration" do
-        remote_census_setting = create(:setting, key: "remote_census.general.whatever")
+        create(:setting, key: "remote_census.general.whatever")
 
         visit admin_settings_path
         find("#remote-census-tab").click
 
-        within("#edit_setting_#{remote_census_setting.id}") do
-          fill_in "value_setting_#{remote_census_setting.id}", with: "New value"
+        within "tr", text: "Whatever" do
+          fill_in "Whatever", with: "New value"
           click_button "Update"
         end
 
@@ -189,13 +189,13 @@ describe "Admin settings", :admin do
     end
 
     scenario "On #tab-configuration" do
-      configuration_setting = Setting.create!(key: "whatever")
+      Setting.create!(key: "whatever")
 
       visit admin_settings_path
       find("#tab-configuration").click
 
-      within("#edit_setting_#{configuration_setting.id}") do
-        fill_in "value_setting_#{configuration_setting.id}", with: "New value"
+      within "tr", text: "Whatever" do
+        fill_in "Whatever", with: "New value"
         click_button "Update"
       end
 
@@ -209,13 +209,13 @@ describe "Admin settings", :admin do
       end
 
       scenario "On #tab-map-configuration" do
-        map_setting = Setting.create!(key: "map.whatever")
+        Setting.create!(key: "map.whatever")
 
         visit admin_settings_path
         click_link "Map configuration"
 
-        within("#edit_setting_#{map_setting.id}") do
-          fill_in "value_setting_#{map_setting.id}", with: "New value"
+        within "tr", text: "Whatever" do
+          fill_in "Whatever", with: "New value"
           click_button "Update"
         end
 
@@ -225,13 +225,13 @@ describe "Admin settings", :admin do
     end
 
     scenario "On #tab-proposals" do
-      proposal_dashboard_setting = Setting.create!(key: "proposals.whatever")
+      Setting.create!(key: "proposals.whatever")
 
       visit admin_settings_path
       find("#proposals-tab").click
 
-      within("#edit_setting_#{proposal_dashboard_setting.id}") do
-        fill_in "value_setting_#{proposal_dashboard_setting.id}", with: "New value"
+      within "tr", text: "Whatever" do
+        fill_in "Whatever", with: "New value"
         click_button "Update"
       end