Move visually hidden space inside element

The final decision on how to properly handle the space between the visible and hidden text hasn't been made yet but the general consensus upstream is that it's better inside the visually hidden span than before it. This might be revisited again when a decision has been made and the solution presented in #403 can be used instead.
x-govuk · Mar 10, 2023 · 1e6ebca · 1e6ebca
1 parent 9455ab6
commit 1e6ebca
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/app/components/govuk_component/summary_list_component/action_component.rb b/app/components/govuk_component/summary_list_component/action_component.rb
@@ -20,7 +20,7 @@ def render?
 
   def call
     link_to(href, **html_attributes) do
-      safe_join([action_text, visually_hidden_span].compact, " ")
+      safe_join([action_text, visually_hidden_span].compact)
     end
   end
 
@@ -37,6 +37,6 @@ def action_text
   end
 
   def visually_hidden_span
-    tag.span(visually_hidden_text, class: "govuk-visually-hidden") if visually_hidden_text.present?
+    tag.span(%( #{visually_hidden_text}), class: "govuk-visually-hidden") if visually_hidden_text.present?
   end
 end
diff --git a/spec/components/govuk_component/configuration/summary_list_configuration_spec.rb b/spec/components/govuk_component/configuration/summary_list_configuration_spec.rb
@@ -37,8 +37,8 @@
           end
         end
 
-        specify "renders a span with the visually hidden text" do
-          expect(rendered_content).to have_tag("span", text: visually_hidden_text, with: { class: "govuk-visually-hidden" })
+        specify "renders a span with the visually hidden text with a leading space" do
+          expect(rendered_content).to have_tag("span", text: %( #{visually_hidden_text}), with: { class: "govuk-visually-hidden" })
         end
       end
 

diff --git a/spec/components/govuk_component/summary_list_component_spec.rb b/spec/components/govuk_component/summary_list_component_spec.rb
@@ -357,9 +357,9 @@
                 class: "row-1-custom-action-1-class",
                 "data-id" => "row-1-action-1-data-id"
               },
-              text: /Change/
+              text: /\AChange/
             }) do
-              with_tag("span", with: { class: "govuk-visually-hidden" }, text: "name")
+              with_tag("span", with: { class: "govuk-visually-hidden" }, text: " name")
             end
           end
         end
@@ -376,8 +376,8 @@
                   class: "row-2-custom-action-1-class",
                   "data-id" => "row-2-action-1-data-id"
                 },
-                text: /Change/
-              }) { with_tag("span", with: { class: "govuk-visually-hidden" }, text: "address") }
+                text: /\AChange/
+              }) { with_tag("span", with: { class: "govuk-visually-hidden" }, text: " address") }
 
               with_tag("a", {
                 class: "govuk-link",
@@ -386,8 +386,8 @@
                   class: "row-2-custom-action-2-class",
                   "data-id" => "row-2-action-2-data-id"
                 },
-                text: /Delete/
-              }) { with_tag("span", with: { class: "govuk-visually-hidden" }, text: "address") }
+                text: /\ADelete/
+              }) { with_tag("span", with: { class: "govuk-visually-hidden" }, text: " address") }
             end
           end
         end