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