pidgin/nest

WCAG 2 fixes for contrast and empty header

2021-06-27, Jonathan Champ
c1fbb1f6b8e5
WCAG 2 fixes for contrast and empty header

Testing Done:
Ran WAVE tool browser extension. They have a no-install, web version at https://wave.webaim.org/

As an example, improvement goes from 3+24 errors to 2+0 errors on https://pidgin.im/contact/

The colors are directly-scaled, viable suggestions, but it would be possible to make the green more green by exchanging red/blue for green while maintaining the same level of contrast. As an example #0c8a0c might be a bit more vibrant green. Please let me know if you would like me to suggest other slight color variations.

Bugs closed: NEST-45

Reviewed at https://reviews.imfreedom.org/r/777/
{{ if (and .Site.Params.notificationMessage .Site.Params.notificationCode)}}
<script src="/js/js.cookie.min.js"></script>
<div id="notification-stage">
<div class="alert-bar notification-bar">
<i class="fas fa-exclamation"></i>
<div class="alert-bar-close-button"><i class="fas fa-times"></i></div>
<span>{{ .Site.Params.notificationMessage | safeHTML }}</span>
</div>
</div>
<script>
try {
var code = "{{ .Site.Params.notificationCode }}";
} catch (e) {
console.error("Error with cookie code", e);
}
if (code && code !== Cookies.get("hide-notification")) {
var bar = $(".notification-bar");
$(".padding.highlightable").prepend(bar);
$(".alert-bar-close-button").on("click", function(elem) {
Cookies.set("hide-notification", code);
bar.detach();
});
}
</script>
<style>
#notification-stage {
display: none;
}
.alert-bar {
font-weight: bold;
padding: 20px;
background-color: #0c8a0c;
color: white;
margin-bottom: 15px;
}
.alert-bar a {
color: black;
text-decoration: underline;
}
.alert-bar a:hover {
text-decoration: none;
}
.alert-bar-close-button {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.alert-bar-close-button:hover {
color: black;
}
</style>
{{ end }}