Avoid empty links in banners without content

This happened when previewing banners in the "new banner form", which
might cause accessibility issues when people access the list of links on
the page.

We were getting the following accessibility error:

```
link-name: Links must have discernible text (serious)
https://dequeuniversity.com/rules/axe/4.9/link-name?application=axeAPI

The following node violate this rule:

  Selector: a[href$="new"]
  HTML: <a href="/admin/banners/new"><h2></h2><h3></h3></a>
  Fix all of the following:
  - Element is in tab order and does not have accessible text
  Fix any of the following:
  - Element does not have text that is visible to screen readers
  - aria-label attribute does not exist or is empty
  - aria-labelledby attribute does not exist, references elements that
    do not exist or references elements that
  - Element has no title attribute
```
This commit is contained in:
Javi Martín
2024-04-03 23:32:16 +02:00
parent 545d858e3e
commit 75ef3e0a51
3 changed files with 15 additions and 5 deletions

View File

@@ -1,5 +1,3 @@
<% if banner %>
<div class="banner" style="background-color:<%= banner.background_color %>;">
<%= sanitize link, attributes: %w[href style] %>
</div>
<% end %>
<div class="banner" style="background-color:<%= banner.background_color %>;">
<%= sanitize link, attributes: %w[href style] %>
</div>

View File

@@ -13,6 +13,10 @@ class Shared::BannerComponent < ApplicationComponent
end
end
def render?
banner && (banner.title.present? || banner.description.present?)
end
private
def link

View File

@@ -31,6 +31,14 @@ describe Shared::BannerComponent do
expect(page).not_to have_content "Proposal banner"
end
it "does not render an empty banner" do
banner = build(:banner, title: "", description: "")
render_inline Shared::BannerComponent.new(banner)
expect(page).not_to be_rendered
end
context "several banners available in the same section" do
before do
create(:banner,