myriation/keyoxide-web
1
0
Fork 0
forked from Mirrors/keyoxide-web
Code Pull requests Activity

Improve accessibility

Browse source
This commit is contained in:
Yarmo Mackenbach 2021-06-07 11:47:09 +02:00
parent f930d96b5f
commit 30aac09032
No known key found for this signature in database
GPG key ID: 37367F4AF4087AD1
4 changed files with 35 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/kx-claim.js
View file

@ -62,6 +62,7 @@ class Claim extends HTMLElement {
subsection_alert.setAttribute('class', 'subsection'); subsection_alert.setAttribute('class', 'subsection');
const subsection_alert_icon = subsection_alert.appendChild(document.createElement('img')); const subsection_alert_icon = subsection_alert.appendChild(document.createElement('img'));
subsection_alert_icon.setAttribute('src', '/static/img/alert-decagram.png'); subsection_alert_icon.setAttribute('src', '/static/img/alert-decagram.png');
subsection_alert_icon.setAttribute('alt', '');
const subsection_alert_text = subsection_alert.appendChild(document.createElement('div')); const subsection_alert_text = subsection_alert.appendChild(document.createElement('div'));
const message = subsection_alert_text.appendChild(document.createElement('p')); const message = subsection_alert_text.appendChild(document.createElement('p'));
@ -74,6 +75,7 @@ class Claim extends HTMLElement {
subsection_links.setAttribute('class', 'subsection'); subsection_links.setAttribute('class', 'subsection');
const subsection_links_icon = subsection_links.appendChild(document.createElement('img')); const subsection_links_icon = subsection_links.appendChild(document.createElement('img'));
subsection_links_icon.setAttribute('src', '/static/img/link.png'); subsection_links_icon.setAttribute('src', '/static/img/link.png');
subsection_links_icon.setAttribute('alt', '');
const subsection_links_text = subsection_links.appendChild(document.createElement('div')); const subsection_links_text = subsection_links.appendChild(document.createElement('div'));
const profile_link = subsection_links_text.appendChild(document.createElement('p')); const profile_link = subsection_links_text.appendChild(document.createElement('p'));
@ -98,6 +100,7 @@ class Claim extends HTMLElement {
subsection_qr.setAttribute('class', 'subsection'); subsection_qr.setAttribute('class', 'subsection');
const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img')); const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png'); subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png');
subsection_qr_icon.setAttribute('alt', '');
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div')); const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
const button_profileQR = subsection_qr_text.appendChild(document.createElement('button')); const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
@ -112,12 +115,14 @@ class Claim extends HTMLElement {
subsection_status.setAttribute('class', 'subsection'); subsection_status.setAttribute('class', 'subsection');
const subsection_status_icon = subsection_status.appendChild(document.createElement('img')); const subsection_status_icon = subsection_status.appendChild(document.createElement('img'));
subsection_status_icon.setAttribute('src', '/static/img/decagram.png'); subsection_status_icon.setAttribute('src', '/static/img/decagram.png');
subsection_status_icon.setAttribute('alt', '');
const subsection_status_text = subsection_status.appendChild(document.createElement('div')); const subsection_status_text = subsection_status.appendChild(document.createElement('div'));
const verification = subsection_status_text.appendChild(document.createElement('p')); const verification = subsection_status_text.appendChild(document.createElement('p'));
if (claim.status === 'verified') { if (claim.status === 'verified') {
verification.innerHTML = `Claim verification has completed.`; verification.innerHTML = `Claim verification has completed.`;
subsection_status_icon.setAttribute('src', '/static/img/check-decagram.png'); subsection_status_icon.setAttribute('src', '/static/img/check-decagram.png');
subsection_status_icon.setAttribute('alt', '');
} else { } else {
verification.innerHTML = `Claim verification is in progress…`; verification.innerHTML = `Claim verification is in progress…`;
return; return;
@ -130,6 +135,7 @@ class Claim extends HTMLElement {
subsection_result.setAttribute('class', 'subsection'); subsection_result.setAttribute('class', 'subsection');
const subsection_result_icon = subsection_result.appendChild(document.createElement('img')); const subsection_result_icon = subsection_result.appendChild(document.createElement('img'));
subsection_result_icon.setAttribute('src', '/static/img/shield-search.png'); subsection_result_icon.setAttribute('src', '/static/img/shield-search.png');
subsection_result_icon.setAttribute('alt', '');
const subsection_result_text = subsection_result.appendChild(document.createElement('div')); const subsection_result_text = subsection_result.appendChild(document.createElement('div'));
const result = subsection_result_text.appendChild(document.createElement('p')); const result = subsection_result_text.appendChild(document.createElement('p'));
@ -143,6 +149,7 @@ class Claim extends HTMLElement {
subsection_info.setAttribute('class', 'subsection'); subsection_info.setAttribute('class', 'subsection');
const subsection_info_icon = subsection_info.appendChild(document.createElement('img')); const subsection_info_icon = subsection_info.appendChild(document.createElement('img'));
subsection_info_icon.setAttribute('src', '/static/img/information.png'); subsection_info_icon.setAttribute('src', '/static/img/information.png');
subsection_info_icon.setAttribute('alt', '');
const subsection_info_text = subsection_info.appendChild(document.createElement('div')); const subsection_info_text = subsection_info.appendChild(document.createElement('div'));
const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p')); const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p'));

7
static/styles.css
View file

@ -60,6 +60,7 @@ header {
} }
header a.logo { header a.logo {
width: 64px; width: 64px;
height: 64px;
margin: 0 0.8rem; margin: 0 0.8rem;
font-size: 1.6rem; font-size: 1.6rem;
text-transform: uppercase; text-transform: uppercase;
@ -329,7 +330,9 @@ footer h1 {
font-weight: bold; font-weight: bold;
} }
footer a { footer a {
display: inline-block;
color: var(--purple-100); color: var(--purple-100);
height: 48px;
} }
code { code {
@ -408,8 +411,8 @@ form input[type="radio"] + label:hover {
} }
form input[type="radio"]:checked + label { form input[type="radio"]:checked + label {
color: #fff; color: #fff;
background-color: var(--purple-500); background-color: var(--purple-600);
border: solid 2px var(--purple-500); border: solid 2px var(--purple-600);
} }
input[type="button"], input[type="submit"], button, a.button { input[type="button"], input[type="submit"], button, a.button {

10
views/index.pug
View file

@ -1,10 +1,10 @@
extends templates/base.pug extends templates/base.pug
block js block js
script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8') script(type='application/javascript' defer src='/static/openpgp.min.js' charset='utf-8')
script(type='application/javascript' src='/static/doip.js' charset='utf-8') script(type='application/javascript' defer src='/static/doip.min.js' charset='utf-8')
script(type='application/javascript' src='/static/kx-claim.js' charset='utf-8') script(type='application/javascript' defer src='/static/kx-claim.js' charset='utf-8')
script(type='application/javascript' src='/static/scripts.js' charset='utf-8') script(type='application/javascript' defer src='/static/scripts.js' charset='utf-8')
block content block content
.demo.narrow .demo.narrow
@ -19,7 +19,7 @@ block content
.inProgress .inProgress
.content .content
.subsection .subsection
img(src='/static/img/link.png') img(src='/static/img/link.png' alt='')
div div
if (demoData.matches[0].profile.uri) if (demoData.matches[0].profile.uri)
p Profile link: p Profile link:

33
views/templates/base.pug
View file

@ -1,20 +1,23 @@
doctype html doctype html
head html(lang='en')
meta(charset='utf-8') head
meta(name='viewport' content='width=device-width, initial-scale=1') meta(charset='utf-8')
meta(name='theme-color' content='#fff') meta(name='viewport' content='width=device-width, initial-scale=1')
link(rel='shortcut icon' href='/favicon.svg') meta(name='theme-color' content='#fff')
title= (title ? title : 'Keyoxide') meta(name='description' content='Modern and secure platform to manage a decentralized identity based on cryptographic keys')
link(rel='shortcut icon' href='/favicon.svg')
title= (title ? title : 'Keyoxide')
include ../partials/header.pug
main
.container
block content
include ../partials/footer.pug
link(rel='stylesheet' href='/static/styles.css') link(rel='stylesheet' href='/static/styles.css')
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css' integrity='sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=' crossorigin='anonymous') link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css' integrity='sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=' crossorigin='anonymous')
block css block css
include ../partials/header.pug block js
main
.container
block content
include ../partials/footer.pug
block js