From e683024807bf13634917aee1c56a5fc6c2cda79c Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Wed, 28 May 2025 18:24:27 +0300 Subject: [PATCH] Make remove social link buttons always actually buttons Remove buttons for existing links were labels of hidden checkboxes styled as buttons. That made them inaccessible by keyboard navigation. --- app/assets/javascripts/user.js | 25 ++++--- app/views/profiles/show.html.erb | 2 +- test/system/user_social_links_test.rb | 98 ++++++++++++++++++++++++++- 3 files changed, 113 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index c8e23a459..d03d686f5 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -12,26 +12,31 @@ $(function () { let map, marker, deleted_lat, deleted_lon, deleted_home_name, homeLocationNameGeocoder, savedLat, savedLon; if ($("#social_links").length) { - $("#add-social-link").click(function () { + $("#add-social-link").on("click", function () { const newIndex = -Date.now(); $("#social_links template").contents().clone().appendTo("#social_links") - .find("input").attr("name", `user[social_links_attributes][${newIndex}][url]`).trigger("focus") - .end().find("button").on("click", function () { - $(this).parent().remove(); - renumberSocialLinks(); - }); + .find("input").attr("name", `user[social_links_attributes][${newIndex}][url]`).trigger("focus"); renumberSocialLinks(); }); - $(".social_link_destroy input[type='checkbox']").change(function () { - $(this).parent().parent().addClass("d-none"); + $("#social_links").on("click", "button", function () { + const row = $(this).closest(".row"); + const [destroyCheckbox] = row.find(".social_link_destroy input[type='checkbox']"); + + if (destroyCheckbox) { + destroyCheckbox.checked = true; + row.addClass("d-none"); + } else { + row.remove(); + } + renumberSocialLinks(); }); $(".social_link_destroy input[type='checkbox']:checked").each(function () { - $(this).parent().parent().addClass("d-none"); + $(this).closest(".row").addClass("d-none"); }); renumberSocialLinks(); @@ -45,7 +50,7 @@ $(function () { $(this).find("input[type='text']") .attr("placeholder", inputLabel) .attr("aria-label", inputLabel); - $(this).find("label, button") + $(this).find("button") .attr("title", removeButtonLabel); }); } diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb index bacced4df..6862a1ed7 100644 --- a/app/views/profiles/show.html.erb +++ b/app/views/profiles/show.html.erb @@ -27,7 +27,7 @@
<%= social_link_form.text_field :url, :skip_label => true, :wrapper_class => "col-sm-8" %> <%= social_link_form.check_box :_destroy, :wrapper_class => "d-none social_link_destroy" %> - <%= social_link_form.label :_destroy, t(".social_links.remove"), :class => "btn btn-outline-primary col-sm-2 align-self-start" %> +
<% end %> diff --git a/test/system/user_social_links_test.rb b/test/system/user_social_links_test.rb index 3604a1985..5609987f8 100644 --- a/test/system/user_social_links_test.rb +++ b/test/system/user_social_links_test.rb @@ -9,7 +9,23 @@ class UserSocialLinksTest < ApplicationSystemTestCase visit user_path(@user) end - test "can add social links" do + test "can add and remove social link without submitting" do + within_content_body do + click_on "Edit Profile" + + assert_no_field "Social Profile Link 1" + + click_on "Add Social Link" + + assert_field "Social Profile Link 1" + + click_on "Remove Social Profile Link 1" + + assert_no_field "Social Profile Link 1" + end + end + + test "can add and remove social links" do within_content_body do click_on "Edit Profile" @@ -20,6 +36,86 @@ class UserSocialLinksTest < ApplicationSystemTestCase click_on "Update Profile" assert_link "example.com/user/fred" + + click_on "Edit Profile" + click_on "Remove Social Profile Link 1" + + assert_no_field "Social Profile Link 1" + + click_on "Update Profile" + + assert_no_link "example.com/user/fred" + end + end + + test "can control social links using keyboard without submitting" do + within_content_body do + click_on "Edit Profile" + click_on "Add Social Link" + + assert_field "Social Profile Link 1" + + send_keys :tab, :enter + + assert_no_field "Social Profile Link 1" + end + end + + test "can control social links using keyboard" do + within_content_body do + click_on "Edit Profile" + click_on "Add Social Link" + send_keys "https://example.com/user/typed" + click_on "Update Profile" + + assert_link "example.com/user/typed" + + click_on "Edit Profile" + find_field("Social Profile Link 1").click + send_keys :tab, :enter + + assert_no_field "Social Profile Link 1" + + click_on "Update Profile" + + assert_no_link "example.com/user/typed" + end + end + + test "can add and remove multiple links" do + within_content_body do + click_on "Edit Profile" + click_on "Add Social Link" + fill_in "Social Profile Link 1", :with => "https://example.com/a" + click_on "Add Social Link" + fill_in "Social Profile Link 2", :with => "https://example.com/b" + click_on "Add Social Link" + fill_in "Social Profile Link 3", :with => "https://example.com/c" + click_on "Update Profile" + + assert_link "example.com/a" + assert_link "example.com/b" + assert_link "example.com/c" + + click_on "Edit Profile" + + assert_field "Social Profile Link 1", :with => "https://example.com/a" + assert_field "Social Profile Link 2", :with => "https://example.com/b" + assert_field "Social Profile Link 3", :with => "https://example.com/c" + + click_on "Remove Social Profile Link 2" + + assert_field "Social Profile Link 1", :with => "https://example.com/a" + assert_field "Social Profile Link 2", :with => "https://example.com/c" + + click_on "Add Social Link" + fill_in "Social Profile Link 3", :with => "https://example.com/d" + click_on "Update Profile" + + assert_link "example.com/a" + assert_no_link "example.com/b" + assert_link "example.com/c" + assert_link "example.com/d" end end end -- 2.39.5