HGKeeper

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/

<!DOCTYPE html>

<html>

<head>

<title>libpurple oauth helper</title>

<script

src="https://code.jquery.com/jquery-3.2.1.min.js"

integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"

></script>

<link

href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

rel="stylesheet"

integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"

crossorigin="anonymous"

<link

rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

crossorigin="anonymous"

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

crossorigin="anonymous"

></script>

<style>

body {

margin-top: 1em;

}

.blur {

filter: blur(3px);

}

</style>

</head>

<body>

<img

src="/images/pidgin-circle-256.png"

class="img-responsive center-block"

</div>

<div class="panel-heading">About</div>

This page helps you to login your accounts that

require oauth authentication. Due to the way

OAuth2's implicit flow works, we do not have access

to, nor do we store, this access token.

</div>

<div class="panel-heading">Usage</div>

To use this page, click the copy button next to the

access token and paste it into the password entry

for the pidgin account you just enabled.

</div>

<strong>Warning!</strong> This access code is used to

access your account. Do not share it with anyone!

</div>

<button

class="btn btn-secondary"

type="button"

id="access_token_toggle"

onclick="toggleAccessToken()"

Show

</button>

</span>

<input

type="text"

class="blur form-control"

id="access_token"

<button

type="button"

class="btn btn-default"

aria-label="Copy to clipboard"

onclick="copyToClipboard();"

<span

class="glyphicon glyphicon-copy"

aria-hidden="true"

></span>

</button>

</span>

</div>

$(document).ready(function() {

// set the input box's value to the value of access_token in window.location.hash

var data = window.location.hash.slice(1);

var vars = data.split("&");

for (var i = 0; i < vars.length; i++) {

var parts = vars[i].split("=");

if (parts[0] == "access_token") {

// remove the hash from the url so we don't leak it.

window.location.hash = "";

// update the input box with the access token

var element = $("#access_token");

element.val(parts[1]);

element.select();

// stop processing

break;

}

});

function copyToClipboard(e) {

$("#access_token").select();

document.execCommand("copy");

}

function toggleAccessToken() {

var toggle = $("#access_token_toggle");

var token = $("#access_token");

if (toggle.text() == "Show") {

toggle.text("Hide");

token.removeClass("blur");

} else {

toggle.text("Show");

token.addClass("blur");

}

token.select();

}

</script>

</body>

</html>

pidgin/nest