consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5255 from consuldemocracy/focus_contrast

Browse Source 
Increase links and buttons contrast on focus
This commit is contained in:
Javi Martín
2023-10-10 15:31:55 +02:00
committed by GitHub
parent db759bdd08 64edfe5c98
commit 664b7c853b
19 changed files with 144 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/_consul_settings.scss
View File

@@ -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;

2
app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss
View File

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

3
app/assets/stylesheets/admin/menu.scss
View File

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

2
app/assets/stylesheets/budgets/ballot/investment.scss
View File

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

24
app/assets/stylesheets/budgets/groups_and_headings.scss
View File

@@ -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;

2
app/assets/stylesheets/budgets/phases.scss
View File

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

16
app/assets/stylesheets/layout.scss
View File

@@ -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;

4
app/assets/stylesheets/layout/locale_switcher.scss
View File

@@ -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 {

1
app/assets/stylesheets/legislation.scss
View File

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

80
app/assets/stylesheets/mixins/links.scss Normal file
View File

@@ -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;
}
}
}

12
app/assets/stylesheets/mixins/sdg.scss
View File

@@ -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 {
outline: none;
img {
outline: $outline-focus;
}
a {
@include focus-outline-on-img;
}
}
}

2
app/assets/stylesheets/mixins/uploads.scss
View File

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

5
app/assets/stylesheets/participation.scss
View File

@@ -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;
}
}
}

5
app/assets/stylesheets/proposals/geozones.scss Normal file
View File

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

2
app/assets/stylesheets/sdg/help.scss
View File

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

2
app/assets/stylesheets/sdg/related_list_selector.scss
View File

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

11
app/components/proposals/geozones_component.html.erb
View File

@@ -1,6 +1,9 @@
<div class="sidebar-divider"></div>
<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 %>
<div class="proposals-geozones">
<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>

9
app/views/budgets/executions/_investments.html.erb
View File

@@ -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">
<%= link_to budget_investment_path(@budget, investment, anchor: "tab-milestones"), data: { "equalizer-watch": true } do %>
<div class="budget-execution" data-equalizer-watch>
<%= 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 %>

4
app/views/shared/_recommended_index.html.erb
View File

@@ -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 %>