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).
This commit is contained in:
Javi Martín
2021-08-29 02:05:24 +02:00
parent ead5eac67f
commit 2ca5f5c815
3 changed files with 21 additions and 17 deletions

View File

@@ -1,7 +1,11 @@
<%= form_for([:admin, setting]) do |f| %> <%= form_for([:admin, setting]) do |f| %>
<%= f.hidden_field :tab, id: dom_id(setting, :tab), value: tab if defined?(tab) %> <%= f.hidden_field :tab, id: dom_id(setting, :tab), value: tab if defined?(tab) %>
<div class="small-12 medium-6 large-8 column"> <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>
<div class="small-12 medium-6 large-4 column"> <div class="small-12 medium-6 large-4 column">
<%= f.submit(t("admin.settings.index.update_setting"), class: "button hollow expanded") %> <%= f.submit(t("admin.settings.index.update_setting"), class: "button hollow expanded") %>

View File

@@ -11,7 +11,7 @@
<td class="small-6"> <td class="small-6">
<strong><%= t("settings.#{setting.key}") %></strong> <strong><%= t("settings.#{setting.key}") %></strong>
<br> <br>
<span class="small"> <span id="<%= dom_id(setting, :description) %>" class="small">
<%= t("settings.#{setting.key}_description", default: t("admin.settings.no_description")) %> <%= t("settings.#{setting.key}_description", default: t("admin.settings.no_description")) %>
</span> </span>
</td> </td>

View File

@@ -14,12 +14,12 @@ describe "Admin settings", :admin do
end end
scenario "Update" do scenario "Update" do
setting = create(:setting, key: "super.users.first") create(:setting, key: "super.users.first")
visit admin_settings_path visit admin_settings_path
within("#edit_setting_#{setting.id}") do within "tr", text: "First" do
fill_in "value_setting_#{setting.id}", with: "Super Users of level 1" fill_in "First", with: "Super Users of level 1"
click_button "Update" click_button "Update"
end end
@@ -173,13 +173,13 @@ describe "Admin settings", :admin do
end end
scenario "On #tab-remote-census-configuration" do 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 visit admin_settings_path
find("#remote-census-tab").click find("#remote-census-tab").click
within("#edit_setting_#{remote_census_setting.id}") do within "tr", text: "Whatever" do
fill_in "value_setting_#{remote_census_setting.id}", with: "New value" fill_in "Whatever", with: "New value"
click_button "Update" click_button "Update"
end end
@@ -189,13 +189,13 @@ describe "Admin settings", :admin do
end end
scenario "On #tab-configuration" do scenario "On #tab-configuration" do
configuration_setting = Setting.create!(key: "whatever") Setting.create!(key: "whatever")
visit admin_settings_path visit admin_settings_path
find("#tab-configuration").click find("#tab-configuration").click
within("#edit_setting_#{configuration_setting.id}") do within "tr", text: "Whatever" do
fill_in "value_setting_#{configuration_setting.id}", with: "New value" fill_in "Whatever", with: "New value"
click_button "Update" click_button "Update"
end end
@@ -209,13 +209,13 @@ describe "Admin settings", :admin do
end end
scenario "On #tab-map-configuration" do scenario "On #tab-map-configuration" do
map_setting = Setting.create!(key: "map.whatever") Setting.create!(key: "map.whatever")
visit admin_settings_path visit admin_settings_path
click_link "Map configuration" click_link "Map configuration"
within("#edit_setting_#{map_setting.id}") do within "tr", text: "Whatever" do
fill_in "value_setting_#{map_setting.id}", with: "New value" fill_in "Whatever", with: "New value"
click_button "Update" click_button "Update"
end end
@@ -225,13 +225,13 @@ describe "Admin settings", :admin do
end end
scenario "On #tab-proposals" do scenario "On #tab-proposals" do
proposal_dashboard_setting = Setting.create!(key: "proposals.whatever") Setting.create!(key: "proposals.whatever")
visit admin_settings_path visit admin_settings_path
find("#proposals-tab").click find("#proposals-tab").click
within("#edit_setting_#{proposal_dashboard_setting.id}") do within "tr", text: "Whatever" do
fill_in "value_setting_#{proposal_dashboard_setting.id}", with: "New value" fill_in "Whatever", with: "New value"
click_button "Update" click_button "Update"
end end