Use heading name as link text

Using the name instead of using the name and the price is IMHO more
consistent with the rest of the application, particularly for screen
reader users. Writing texts clicking those links is also easier.

I think the main reason why we used the price as part of the link was so
the clickable area was bigger. We can accomplish the same result with
CSS.

app/assets/stylesheets/budgets/groups_and_headings.scss

@@ -13,6 +13,8 @@
     border-radius: rem-calc(3);
     margin-bottom: $line-height / 2;
     margin-left: $spacing;
+    padding: $line-height / 2;
+    position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
@@ -23,22 +25,37 @@
       width: calc(100% / 6 - #{$spacing});
     }
 
-    a {
+    &:focus-within {
-      display: block;
+      outline: $outline-focus;
-      padding: $line-height / 2;
 
-      &:hover {
+      a:focus {
-        background: $highlight;
+        outline: none;
-        text-decoration: none;
       }
     }
 
-    .heading-name {
+    a {
-      padding: $line-height / 2;
+
+      &::after,
+      &::before {
+        bottom: 0;
+        content: "";
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:hover::before {
+        background: $highlight;
+        z-index: -1;
+      }
     }
 
     span {
-      color: $text;
       display: block;
       font-size: $small-font-size;
     }

app/components/budgets/groups_and_headings_component.html.erb

@@ -4,16 +4,13 @@
     <ul class="headings-list">
       <% group.headings.sort_by_name.each do |heading| %>
         <li class="heading">
-          <% unless budget.informing? || budget.finished? %>
+          <%= link_to_unless(
-            <%= link_to budget_investments_path(budget.id,
+            (budget.informing? || budget.finished?),
-                                                heading_id: heading.id) do %>
+            heading.name,
-              <%= heading_name_and_price_html(heading) %>
+            budget_investments_path(budget.id, heading_id: heading.id)
-            <% end %>
+          ) %>
-          <% else %>
+
-            <div class="heading-name">
+          <%= price(heading) %>
-              <%= heading_name_and_price_html(heading) %>
-            </div>
-          <% end %>
         </li>
       <% end %>
     </ul>

app/components/budgets/groups_and_headings_component.rb

@@ -7,10 +7,7 @@ class Budgets::GroupsAndHeadingsComponent < ApplicationComponent
 
   private
 
-    def heading_name_and_price_html(heading)
+    def price(heading)
-      tag.div do
+      tag.span(budget.formatted_heading_price(heading))
-        concat(heading.name + " ")
-        concat(tag.span(budget.formatted_heading_price(heading)))
-      end
     end
 end

spec/system/budgets/budgets_spec.rb

@@ -118,7 +118,7 @@ describe "Budgets" do
       visit budgets_path
 
       within("#budget_info") do
-        expect(page).not_to have_link "#{heading.name} €1,000,000"
+        expect(page).not_to have_link heading.name
         expect(page).to have_content "#{heading.name} €1,000,000"
 
         expect(page).not_to have_link("List of all investment projects")
@@ -136,7 +136,7 @@ describe "Budgets" do
       visit budgets_path
 
       within("#budget_info") do
-        expect(page).not_to have_link "#{heading.name} €1,000,000"
+        expect(page).not_to have_link heading.name
         expect(page).to have_content "#{heading.name} €1,000,000"
 
         expect(page).to have_css("div.map")

spec/system/budgets/investments_spec.rb

@@ -1230,7 +1230,7 @@ describe "Budget Investments" do
 
       first(:link, "Participatory budgeting").click
 
-      click_link "More hospitals €666,666"
+      click_link "More hospitals"
 
       within("#budget_investment_#{investment1.id}") do
         expect(page).to have_content investment1.title