Use just the banner title as the banner link text
We were using an <a> tag wrapping the whole content of the banner in
order to make the whole banner clickable. However, that made the text of
the link less concise, affecting people using screen readers. So,
instead, we're using the `card` mixin, which we introduced in commit
f285dfcba.
We're making this change now because the HTML5 Sanitizer that we're
about to enable in the next commit was handling the whitespace inside
the banner differently, causing one test to fail, and we didn't find a
different way to fix it.
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
.banner {
|
||||
@include full-width-background;
|
||||
@include card;
|
||||
padding: 0 rem-calc(16);
|
||||
|
||||
.debates-list &::before,
|
||||
.proposals-list &::before,
|
||||
@@ -7,18 +9,21 @@
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
> * {
|
||||
padding: 0 rem-calc(16);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
&,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
> :empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .budget-header,
|
||||
+ .budgets-index > .budget-header,
|
||||
+ .jumbo {
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<div class="banner" style="background-color:<%= banner.background_color %>;">
|
||||
<%= sanitize link, attributes: %w[href style] %>
|
||||
<%= sanitize banner_content, attributes: %w[href style] %>
|
||||
</div>
|
||||
|
||||
@@ -19,10 +19,8 @@ class Shared::BannerComponent < ApplicationComponent
|
||||
|
||||
private
|
||||
|
||||
def link
|
||||
link_to banner.target_url do
|
||||
tag.h2(banner.title, style: "color:#{banner.font_color}") +
|
||||
tag.h3(banner.description, style: "color:#{banner.font_color}")
|
||||
end
|
||||
def banner_content
|
||||
tag.h2(link_to(banner.title, banner.target_url), style: "color:#{banner.font_color}") +
|
||||
tag.h3(banner.description, style: "color:#{banner.font_color}")
|
||||
end
|
||||
end
|
||||
|
||||
@@ -86,7 +86,7 @@ describe "Admin banners magement", :admin do
|
||||
visit proposals_path
|
||||
|
||||
expect(page).to have_content "Such banner"
|
||||
expect(page).to have_link "Such banner many text wow link", href: "https://www.url.com"
|
||||
expect(page).to have_link "Such banner", href: "https://www.url.com"
|
||||
end
|
||||
|
||||
scenario "Publish a banner with a translation different than the current locale" do
|
||||
|
||||
Reference in New Issue
Block a user