Merge pull request #5255 from consuldemocracy/focus_contrast

Increase links and buttons contrast on focus

app/assets/stylesheets/_consul_settings.scss

@@ -115,7 +115,11 @@ $color-alert:       #a94442 !default;
 $pdf-primary:       #0300ff !default;
 $pdf-secondary:     #ff9e00 !default;
 
-$outline-focus:     3px solid #ffbf47 !default;
+$focus-middle:       #ffbf47 !default;
+$focus-outer:        $brand !default;
+$focus-inner-width:  1px !default;
+$focus-middle-width: 3px !default;
+$focus-outer-width:  2px !default;
 
 $input-height:      $line-height * 2 !default;
 

app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss

@@ -42,8 +42,8 @@
       &:focus,
       &:hover {
         @include brand-background;
+        @include no-outline;
         text-decoration: none;
-        outline: none;
       }
     }
   }

app/assets/stylesheets/admin/menu.scss

@@ -112,9 +112,6 @@
   }
 
   li {
-    margin: 0;
-    outline: 0;
-
     ul {
       margin-left: $line-height / 1.5;
       border-left: 1px solid $sidebar-hover;

app/assets/stylesheets/budgets/ballot/investment.scss

@@ -40,8 +40,6 @@
 
     span {
       color: inherit;
-      outline: 0;
-      text-decoration: none;
     }
   }
 }

app/assets/stylesheets/budgets/groups_and_headings.scss

@@ -9,13 +9,13 @@
 
   .heading {
     @include brand-color;
+    @include card;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
-    position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
@@ -26,31 +26,9 @@
       width: calc(100% / 6 - #{$spacing});
     }
 
-    &:focus-within {
-      outline: $outline-focus;
-
-      a:focus {
-        outline: none;
-      }
-    }
-
     a {
       font-weight: bold;
 
-      &::after,
-      &::before {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-
       &:hover::before {
         background: $light;
         z-index: -1;

app/assets/stylesheets/budgets/phases.scss

@@ -82,7 +82,7 @@
       }
 
       &:focus {
-        outline: none;
+        @include no-outline;
       }
 
       &[aria-selected="true"],

app/assets/stylesheets/layout.scss

@@ -102,20 +102,20 @@ button,
 [type="button"],
 [type="submit"] {
   &:focus {
-    outline: $outline-focus;
+    @include focus-outline;
   }
 
   &:focus-visible {
-    outline: $outline-focus;
+    @include focus-outline;
   }
 
   &:focus:not(:focus-visible) {
-    outline: none;
+    @include no-outline;
   }
 
   &:active,
   &:focus:active {
-    outline: $outline-focus;
+    @include focus-outline;
   }
 }
 
@@ -1135,6 +1135,7 @@ form {
 
   .notification-link {
     @include text-colored-link;
+    display: inline-block;
   }
 
   &:hover {
@@ -1986,13 +1987,15 @@ table {
   }
 
   .recommendation {
+    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
     padding: $line-height / 2;
+    z-index: 1;
 
-    &:hover {
+    &:hover:not(:focus-within) {
       box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
     }
   }
@@ -2003,6 +2006,7 @@ table {
   position: absolute;
   right: 12px;
   top: -18px;
+  z-index: 2;
 }
 
 // 20. Documents
@@ -2216,7 +2220,7 @@ table {
       }
     }
 
-    a:hover {
+    a:hover:not(:focus) {
       box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
       text-decoration: none;
 

app/assets/stylesheets/layout/locale_switcher.scss

@@ -36,11 +36,13 @@
       outline: none;
       padding-left: $line-height / 4;
       padding-right: calc(#{$line-height / 4} + 1em);
+      transition: none;
       width: auto;
 
       &:focus {
+        @include focus-outline;
         border: 0;
-        outline: $outline-focus;
+        transition: none;
       }
 
       option {

app/assets/stylesheets/legislation.scss

@@ -57,6 +57,7 @@
 
   h3 a {
     color: inherit;
+    display: inline-block;
     margin-bottom: 1rem;
   }
 }

app/assets/stylesheets/mixins/links.scss

@@ -0,0 +1,80 @@
+@mixin focus-outline {
+  $total-width: $focus-inner-width + $focus-middle-width + $focus-outer-width;
+
+  box-shadow: 0 0 0 $total-width $focus-outer;
+  outline: $focus-middle-width solid $focus-middle;
+  outline-offset: $focus-inner-width;
+}
+
+@mixin no-outline {
+  box-shadow: none;
+  outline: none;
+}
+
+@mixin focus-outline-on-img {
+  &:focus {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+
+  &:focus-visible {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    img {
+      @include no-outline;
+    }
+  }
+
+  &:active {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+
+  &:focus:active {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+}
+
+@mixin card {
+  position: relative;
+
+  &:focus-within {
+    @include focus-outline;
+
+    a:focus {
+      @include no-outline;
+    }
+  }
+
+  a {
+    &::after,
+    &::before {
+      bottom: 0;
+      content: "";
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/assets/stylesheets/mixins/sdg.scss

@@ -24,6 +24,10 @@
   a:hover .sdg-goal-icon {
     filter: brightness(90%);
   }
+
+  a {
+    @include focus-outline-on-img;
+  }
 }
 
 %sdg-goal-list {
@@ -47,12 +51,8 @@
       width: 100%;
     }
 
-    a:focus {
+    a {
-      outline: none;
+      @include focus-outline-on-img;
-
-      img {
-        outline: $outline-focus;
-      }
     }
   }
 }

app/assets/stylesheets/mixins/uploads.scss

@@ -22,7 +22,7 @@
       }
 
       &:focus-within label {
-        outline: $outline-focus;
+        @include focus-outline;
       }
     }
 

app/assets/stylesheets/participation.scss

@@ -464,6 +464,7 @@
 
     a {
       color: inherit;
+      display: inline-block;
     }
   }
 
@@ -1284,6 +1285,7 @@
 }
 
 .budget-execution {
+  @include card;
   border: 1px solid $border;
   overflow: hidden;
   position: relative;
@@ -1332,7 +1334,7 @@
     font-size: rem-calc(24);
   }
 
-  &:hover {
+  &:hover:not(:focus-within) {
     box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
   }
 }
@@ -1595,6 +1597,7 @@
 
     a {
       color: inherit;
+      display: inline-block;
     }
   }
 }

app/assets/stylesheets/proposals/geozones.scss

@@ -0,0 +1,5 @@
+.proposals-geozones {
+  a {
+    @include focus-outline-on-img;
+  }
+}

app/assets/stylesheets/sdg/help.scss

@@ -7,7 +7,7 @@
     li {
 
       &:focus {
-        outline: $outline-focus;
+        @include focus-outline;
       }
     }
   }

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -34,7 +34,7 @@
       @include element-invisible;
 
       &:focus + label {
-        outline: $outline-focus;
+        @include focus-outline;
       }
 
       &:checked + label img {

app/components/proposals/geozones_component.html.erb

@@ -1,6 +1,9 @@
 <div class="sidebar-divider"></div>
-<h2 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h2>
+
-<br>
+<div class="proposals-geozones">
-<%= link_to map_proposals_path, id: "map", title: t("shared.tags_cloud.districts_list") do %>
+  <h2 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h2>
+  <br>
+  <%= link_to map_proposals_path, id: "map", title: t("shared.tags_cloud.districts_list") do %>
     <%= image_tag(image_path_for("map.jpg"), alt: t("shared.tags_cloud.districts_list")) %>
-<% end %>
+  <% end %>
+</div>

app/views/budgets/executions/_investments.html.erb

@@ -5,19 +5,20 @@
     <div class="row" data-equalizer-on="medium" data-equalizer>
       <% investments.each do |investment| %>
         <div class="small-12 medium-6 large-4 column end margin-bottom">
-          <div class="budget-execution">
+          <div class="budget-execution" data-equalizer-watch>
-            <%= link_to budget_investment_path(@budget, investment, anchor: "tab-milestones"), data: { "equalizer-watch": true } do %>
             <%= render Budgets::Executions::ImageComponent.new(investment) %>
             <div class="budget-execution-info">
               <div class="budget-execution-content">
-                  <h5><%= investment.title %></h5>
+                <h5>
+                  <%= link_to investment.title,
+                              budget_investment_path(@budget, investment, anchor: "tab-milestones") %>
+                </h5>
                 <span class="author"><%= investment.author.name %></span>
               </div>
               <p class="price margin-top text-center">
                 <strong><%= investment.formatted_price %></strong>
               </p>
             </div>
-            <% end %>
           </div>
         </div>
       <% end %>

app/views/shared/_recommended_index.html.erb

@@ -18,11 +18,9 @@
 
       <% recommended.each_with_index do |recommended, index| %>
         <div class="small-12 medium-6 large-4 column end">
-          <%= link_to recommended_path(recommended) do %>
           <div class="recommendation" data-equalizer-watch>
-              <h3><%= recommended.title %></h3>
+            <h3><%= link_to recommended.title, recommended_path(recommended) %></h3>
           </div>
-          <% end %>
         </div>
       <% end %>