From d8746973107fb2845e8f8a9c0e69935087a6a384 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 25 Sep 2023 19:50:33 +0200 Subject: [PATCH 1/5] Remove redundant CSS properties set to none These are default values that aren't needed. --- app/assets/stylesheets/admin/menu.scss | 3 --- app/assets/stylesheets/budgets/ballot/investment.scss | 2 -- 2 files changed, 5 deletions(-) diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index 02c133a2e..74f816408 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/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; diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss index 1685f7eb5..5dc193fd0 100644 --- a/app/assets/stylesheets/budgets/ballot/investment.scss +++ b/app/assets/stylesheets/budgets/ballot/investment.scss @@ -40,8 +40,6 @@ span { color: inherit; - outline: 0; - text-decoration: none; } } } From f285dfcbac2e8f33fd337b35ddcdcac33bc86739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 25 Sep 2023 21:47:14 +0200 Subject: [PATCH 2/5] Simplify HTML in proposal/debates recommendations This way it's going to be easier to style the link on focus, since styles like `box-shadow` weren't working properly when we had an inline link with block elements inside, and adding the `display: inline-block` element to the link didn't play well with the layout we were using for the recommendations. We're also fixing the focus outline on recommendations, which didn't look properly because of the border added with: ``` .recommended-index { // (...) @include full-width-border(top, 1px solid #fafafa); } ``` The border was on top of the outline, breaking it. Increasing the `z-index` of the element containing the outline solves the issue. In a similar way, we're making sure the button to hide recommendations stays visible so it's easier to click it. --- .../budgets/groups_and_headings.scss | 24 +---------------- app/assets/stylesheets/layout.scss | 3 +++ app/assets/stylesheets/mixins/links.scss | 27 +++++++++++++++++++ app/views/shared/_recommended_index.html.erb | 8 +++--- 4 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 app/assets/stylesheets/mixins/links.scss diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss index 6372debb0..dafc3317c 100644 --- a/app/assets/stylesheets/budgets/groups_and_headings.scss +++ b/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; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index fcda6b480..b2f589353 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1986,11 +1986,13 @@ 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 { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); @@ -2003,6 +2005,7 @@ table { position: absolute; right: 12px; top: -18px; + z-index: 2; } // 20. Documents diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss new file mode 100644 index 000000000..e4fe18102 --- /dev/null +++ b/app/assets/stylesheets/mixins/links.scss @@ -0,0 +1,27 @@ +@mixin card { + position: relative; + + &:focus-within { + outline: $outline-focus; + + a:focus { + outline: none; + } + } + + a { + &::after, + &::before { + bottom: 0; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + &:hover { + text-decoration: none; + } + } +} diff --git a/app/views/shared/_recommended_index.html.erb b/app/views/shared/_recommended_index.html.erb index e7c7d3835..4447a9ae4 100644 --- a/app/views/shared/_recommended_index.html.erb +++ b/app/views/shared/_recommended_index.html.erb @@ -18,11 +18,9 @@ <% recommended.each_with_index do |recommended, index| %>
- <%= link_to recommended_path(recommended) do %> -
-

<%= recommended.title %>

-
- <% end %> +
+

<%= link_to recommended.title, recommended_path(recommended) %>

+
<% end %> From b15512f0258db995c5e02fb4053f25018d8a86df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Sep 2023 17:21:34 +0200 Subject: [PATCH 3/5] Fix focus outline on budget executions index The outline was invisible when we had the link containing block elements, and I didn't manage to fix it, so the easiest solution is to use an inline link and style the card with CSS. --- app/assets/stylesheets/participation.scss | 1 + .../budgets/executions/_investments.html.erb | 25 ++++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 75a8e93fa..7b92ac831 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1284,6 +1284,7 @@ } .budget-execution { + @include card; border: 1px solid $border; overflow: hidden; position: relative; diff --git a/app/views/budgets/executions/_investments.html.erb b/app/views/budgets/executions/_investments.html.erb index 4a8d20834..e0f3abfdd 100644 --- a/app/views/budgets/executions/_investments.html.erb +++ b/app/views/budgets/executions/_investments.html.erb @@ -5,19 +5,20 @@
<% investments.each do |investment| %>
-
- <%= link_to budget_investment_path(@budget, investment, anchor: "tab-milestones"), data: { "equalizer-watch": true } do %> - <%= render Budgets::Executions::ImageComponent.new(investment) %> -
-
-
<%= investment.title %>
- <%= investment.author.name %> -
-

- <%= investment.formatted_price %> -

+
+ <%= render Budgets::Executions::ImageComponent.new(investment) %> +
+
+
+ <%= link_to investment.title, + budget_investment_path(@budget, investment, anchor: "tab-milestones") %> +
+ <%= investment.author.name %>
- <% end %> +

+ <%= investment.formatted_price %> +

+
<% end %> From d3eeffded1ee91923098e1c4d577308526a238d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Sep 2023 17:34:04 +0200 Subject: [PATCH 4/5] Fix focus outline on links containing images In some cases, like SDG icons and the proposals map, the image was bigger than the link containing it, resulting in a funny-looking outline on focus. For reasons I don't understand, using `&:active,&:focus:active` didn't compile to the CSS I was expecting, so I'm repeating the same code for these two separate cases. --- app/assets/stylesheets/mixins/links.scss | 40 +++++++++++++++++++ app/assets/stylesheets/mixins/sdg.scss | 12 +++--- .../stylesheets/proposals/geozones.scss | 5 +++ .../proposals/geozones_component.html.erb | 13 +++--- 4 files changed, 59 insertions(+), 11 deletions(-) create mode 100644 app/assets/stylesheets/proposals/geozones.scss diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss index e4fe18102..9163c627a 100644 --- a/app/assets/stylesheets/mixins/links.scss +++ b/app/assets/stylesheets/mixins/links.scss @@ -1,3 +1,43 @@ +@mixin focus-outline-on-img { + &:focus { + outline: none; + + img { + outline: $outline-focus; + } + } + + &:focus-visible { + outline: none; + + img { + outline: $outline-focus; + } + } + + &:focus:not(:focus-visible) { + img { + outline: none; + } + } + + &:active { + outline: none; + + img { + outline: $outline-focus; + } + } + + &:focus:active { + outline: none; + + img { + outline: $outline-focus; + } + } +} + @mixin card { position: relative; diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss index ecb5de882..76442f551 100644 --- a/app/assets/stylesheets/mixins/sdg.scss +++ b/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 { - outline: none; - - img { - outline: $outline-focus; - } + a { + @include focus-outline-on-img; } } } diff --git a/app/assets/stylesheets/proposals/geozones.scss b/app/assets/stylesheets/proposals/geozones.scss new file mode 100644 index 000000000..c259d7614 --- /dev/null +++ b/app/assets/stylesheets/proposals/geozones.scss @@ -0,0 +1,5 @@ +.proposals-geozones { + a { + @include focus-outline-on-img; + } +} diff --git a/app/components/proposals/geozones_component.html.erb b/app/components/proposals/geozones_component.html.erb index efcbb7e93..8acfa91b6 100644 --- a/app/components/proposals/geozones_component.html.erb +++ b/app/components/proposals/geozones_component.html.erb @@ -1,6 +1,9 @@
-

<%= t("shared.tags_cloud.districts") %>

-
-<%= 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 %> + +
+

<%= t("shared.tags_cloud.districts") %>

+
+ <%= 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 %> +
From 64edfe5c98037165c56d02d242598b65d18eb4a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Sep 2023 18:28:02 +0200 Subject: [PATCH 5/5] Increase links and buttons contrast on focus The Web Content Accessibility Guidelines version 2.1 added a success criterion called Non-text Contrast [1], which mentions that the focus indicator must contrast with the background, and version 2.2 introduced a specific one regarding focus appearance [2]. According to that criterion, the focus indicator: * is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component * has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states. Our current solution for highlighting elements on focus has a couple of issues: * It doesn't offer enough contrast against the default white background (1.6:1) * It offers even less contrast against other backgrounds, like the homepage banner or the featured proposals/debates Making the color of the outline darker would increase the contrast against these backgrounds, but it would reduce the contrast against other backgrounds like our default brand color. For this reason, most modern browsers use a special double outline with two different colors [3], and we're choosing to combine an outline and a box shadow to emulate it, using the brand color as the second color. However, this double-colored outline doesn't work so well when focusing on dark buttons surrounded by a light background, so instead we're using a triple outline, which works well on any color combination [4]. Since I feel that making the third outline 2px wide makes the overall outline too wide, I'm making the inner outline just 1px wide since that's enough to prevent edge cases. Note that Foundation adds a transition for the `box-shadow` property on `select` controls, which gets in the way of the focus we use on the language selector. So we're removing the transition. Also note that the box-shadow style didn't work properly with the box-shadow we added on the `:hover` status on cards, so we're changing the code in order to cover this case. Finally, note that the box-shadow isn't displayed properly on multiline links (in Chrome, not even with `box-decoration-break: clone`), like the ones in debates/proposals/polls/investments/processes titles, so we're changing the style of these links to `inline-block`. [1] https://www.w3.org/TR/WCAG21/#non-text-contrast [2] https://www.w3.org/TR/WCAG22/#focus-appearance [3] https://www.sarasoueidan.com/blog/focus-indicators/#examining-(current)-browser-focus-indicators-against-wcag-requirements [4] https://www.erikkroes.nl/blog/the-universal-focus-state/ --- app/assets/stylesheets/_consul_settings.scss | 6 +++- .../headings/group_switcher.scss | 2 +- app/assets/stylesheets/budgets/phases.scss | 2 +- app/assets/stylesheets/layout.scss | 13 +++---- .../stylesheets/layout/locale_switcher.scss | 4 ++- app/assets/stylesheets/legislation.scss | 1 + app/assets/stylesheets/mixins/links.scss | 35 +++++++++++++------ app/assets/stylesheets/mixins/uploads.scss | 2 +- app/assets/stylesheets/participation.scss | 4 ++- app/assets/stylesheets/sdg/help.scss | 2 +- .../sdg/related_list_selector.scss | 2 +- 11 files changed, 48 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 150e9efdd..bbf168e92 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/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; diff --git a/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss b/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss index e0c4109f3..c873c0e69 100644 --- a/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss +++ b/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; } } } diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index a3f95ef04..7c67897a6 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -82,7 +82,7 @@ } &:focus { - outline: none; + @include no-outline; } &[aria-selected="true"], diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b2f589353..ea7bba8bc 100644 --- a/app/assets/stylesheets/layout.scss +++ b/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 { @@ -1994,7 +1995,7 @@ table { padding: $line-height / 2; z-index: 1; - &:hover { + &:hover:not(:focus-within) { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); } } @@ -2219,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; diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss index 5b2bc8076..c403d15cc 100644 --- a/app/assets/stylesheets/layout/locale_switcher.scss +++ b/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 { diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss index 699fe3417..6a9c728cf 100644 --- a/app/assets/stylesheets/legislation.scss +++ b/app/assets/stylesheets/legislation.scss @@ -57,6 +57,7 @@ h3 a { color: inherit; + display: inline-block; margin-bottom: 1rem; } } diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss index 9163c627a..5a841c062 100644 --- a/app/assets/stylesheets/mixins/links.scss +++ b/app/assets/stylesheets/mixins/links.scss @@ -1,39 +1,52 @@ +@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 { - outline: none; + @include no-outline; img { - outline: $outline-focus; + @include focus-outline; } } &:focus-visible { - outline: none; + @include no-outline; img { - outline: $outline-focus; + @include focus-outline; } } &:focus:not(:focus-visible) { img { - outline: none; + @include no-outline; } } &:active { - outline: none; + @include no-outline; img { - outline: $outline-focus; + @include focus-outline; } } &:focus:active { - outline: none; + @include no-outline; img { - outline: $outline-focus; + @include focus-outline; } } } @@ -42,10 +55,10 @@ position: relative; &:focus-within { - outline: $outline-focus; + @include focus-outline; a:focus { - outline: none; + @include no-outline; } } diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss index 692ec9b05..04db8ad91 100644 --- a/app/assets/stylesheets/mixins/uploads.scss +++ b/app/assets/stylesheets/mixins/uploads.scss @@ -22,7 +22,7 @@ } &:focus-within label { - outline: $outline-focus; + @include focus-outline; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 7b92ac831..21a68e186 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -464,6 +464,7 @@ a { color: inherit; + display: inline-block; } } @@ -1333,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); } } @@ -1596,6 +1597,7 @@ a { color: inherit; + display: inline-block; } } } diff --git a/app/assets/stylesheets/sdg/help.scss b/app/assets/stylesheets/sdg/help.scss index 0d9b94df1..32608ac62 100644 --- a/app/assets/stylesheets/sdg/help.scss +++ b/app/assets/stylesheets/sdg/help.scss @@ -7,7 +7,7 @@ li { &:focus { - outline: $outline-focus; + @include focus-outline; } } } diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 08f3a2438..5a959e576 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/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 {