Fix banner link on Chromium 101

After upgrading to Chrome/Chromium 101, the test "Cross-Site Scripting
protection banner URL" was failing with the message:

Element <a>...</a> is not clickable (...) Other element would receive
the click: <div class="banner" style="background-color:#FF0000;">...</
div>

The reason was that, when using the structure of a link with one <h2>
and one <h3> inside, previous versions of Chrome/Chromium considered the
margin between the <h2> and the <h3> part of the link.  Version 101 does
the same thing Firefox does and so clicking on the space between the
<h2> and the <h3> doesn't result in clicking the link.

In order to keep the previous behavior, we're adding a `display: block`
tag to a link.

Note that, in the future, we might change the structure of the banner,
since using <h3> as a subheading is discouraged by the W3C, and we
aren't sure about the usability of making the whole banner clickable.
But, for now, we're just fixing the issue so our test suite is green
again.
This commit is contained in:
Javi Martín
2022-05-02 15:11:20 +02:00
parent fef39cad24
commit e4e359339f

View File

@@ -7,13 +7,17 @@
content: none;
}
a > * {
a {
display: block;
> * {
padding: 0 rem-calc(16);
&:empty {
display: none;
}
}
}
+ .budget-header,
+ .budgets-index > .budget-header,