Allow tags to be removed with the keyboard

We improved accessibility by overwriting the setIcon method in the library.
Now we render a button and add the aria-label attribute.

app/assets/javascripts/sdg/related_list_selector.js

@@ -18,6 +18,11 @@
           }
         };
 
+        amsify_suggestags.setIcon = function() {
+          var remove_tag_text = $(".sdg-related-list-selector .input").data("remove-tag-text");
+          return '<button aria-label="' + remove_tag_text + '" class="remove-tag ' + this.classes.removeTag.substring(1) + '">&#10006;</button>';
+        };
+
         amsify_suggestags._settings({
           suggestions: $(".sdg-related-list-selector .input").data("suggestions-list"),
           whiteList: true,

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -32,6 +32,14 @@
     margin-top: $line-height / 2;
   }
 
+  .remove-tag {
+    color: $white;
+
+    &:focus {
+      outline: $outline-focus;
+    }
+  }
+
   h3 {
     @include header-font-size(h4);
   }

app/components/sdg/related_list_selector_component.html.erb

@@ -12,7 +12,8 @@
                       class: "input",
                       placeholder: t("sdg.related_list_selector.placeholder"),
                       hint: t("sdg.related_list_selector.hint"),
-                      data: { "suggestions-list": sdg_related_suggestions } %>
+                      data: { "suggestions-list": sdg_related_suggestions,
+                              "remove-tag-text": t("sdg.related_list_selector.remove_tag") } %>
   </div>
 
   <div class="help-section callout primary hide">

config/locales/en/sdg.yml

@@ -438,3 +438,4 @@ en:
         title: "Which SDGs and targets are aligned with my %{record}?"
       hint: "You can introduce the code of a specific goal/target or a text to find one"
       placeholder: "Write a goal or target code or description"
+      remove_tag: "Remove"

config/locales/es/sdg.yml

@@ -438,3 +438,4 @@ es:
         title: "¿Qué ODS y metas se alinean con mi %{record}?"
       hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno"  
       placeholder: "Escribe las etiquetas que desees"
+      remove_tag: "Eliminar"

spec/rails_helper.rb

@@ -46,5 +46,6 @@ Capybara.register_driver :headless_chrome do |app|
 end
 
 Capybara.exact = true
+Capybara.enable_aria_label = true
 
 OmniAuth.config.test_mode = true

spec/system/sdg_management/relations_spec.rb

@@ -219,11 +219,11 @@ describe "SDG Relations", :js do
       visit sdg_management_edit_legislation_process_path(process)
 
       within "span[data-val='2']" do
-        find(".amsify-remove-tag").click
+        click_button "Remove"
       end
 
       within "span[data-val='3.3']" do
-        find(".amsify-remove-tag").click
+        click_button "Remove"
       end
 
       click_button "Update Process"
@@ -334,13 +334,13 @@ describe "SDG Relations", :js do
 
         visit sdg_management_edit_legislation_process_path(process)
         within "span[data-val='1']" do
-          find(".amsify-remove-tag").click
+          click_button "Remove"
         end
 
         expect(find("li[data-code='1']")["aria-checked"]).to eq "true"
 
         within "span[data-val='1.1']" do
-          find(".amsify-remove-tag").click
+          click_button "Remove"
         end
 
         expect(find("li[data-code='1']")["aria-checked"]).to eq "false"
@@ -366,7 +366,7 @@ describe "SDG Relations", :js do
         within(".help-section") { expect(page).to have_content "No Poverty" }
 
         within "span[data-val='1']" do
-          find(".amsify-remove-tag").click
+          click_button "Remove"
         end
 
         expect(page).not_to have_content "No Poverty"