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

Add aria labels

Browse source
This commit is contained in:
Yarmo Mackenbach 2021-06-09 13:58:36 +02:00
parent feccb171a9
commit a44a88fbea
No known key found for this signature in database
GPG key ID: 37367F4AF4087AD1
4 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/kx-claim.js
View file

@ -82,14 +82,14 @@ class Claim extends HTMLElement {
const profile_link = subsection_links_text.appendChild(document.createElement('p')); const profile_link = subsection_links_text.appendChild(document.createElement('p'));
if (claim.matches[0].profile.uri) { if (claim.matches[0].profile.uri) {
profile_link.innerHTML = `Profile link: <a rel="me" href="${claim.matches[0].profile.uri}">${claim.matches[0].profile.uri}</a>`; profile_link.innerHTML = `Profile link: <a rel="me" href="${claim.matches[0].profile.uri}" aria-label="link to profile">${claim.matches[0].profile.uri}</a>`;
} else { } else {
profile_link.innerHTML = `Profile link: not accessible from browser`; profile_link.innerHTML = `Profile link: not accessible from browser`;
} }
const proof_link = subsection_links_text.appendChild(document.createElement('p')); const proof_link = subsection_links_text.appendChild(document.createElement('p'));
if (claim.matches[0].proof.uri) { if (claim.matches[0].proof.uri) {
proof_link.innerHTML = `Proof link: <a href="${claim.matches[0].proof.uri}">${claim.matches[0].proof.uri}</a>`; proof_link.innerHTML = `Proof link: <a href="${claim.matches[0].proof.uri}" aria-label="link to profile">${claim.matches[0].proof.uri}</a>`;
} else { } else {
proof_link.innerHTML = `Proof link: not accessible from browser`; proof_link.innerHTML = `Proof link: not accessible from browser`;
} }
@ -109,6 +109,7 @@ class Claim extends HTMLElement {
const button_profileQR = subsection_qr_text.appendChild(document.createElement('button')); const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
button_profileQR.innerText = `Show profile QR`; button_profileQR.innerText = `Show profile QR`;
button_profileQR.setAttribute('onClick', `showQR('${claim.matches[0].profile.qr}', 'url')`); button_profileQR.setAttribute('onClick', `showQR('${claim.matches[0].profile.qr}', 'url')`);
button_profileQR.setAttribute('aria-label', `Show QR code linking to profile`);
} }
elContent.appendChild(document.createElement('hr')); elContent.appendChild(document.createElement('hr'));
@ -160,7 +161,7 @@ class Claim extends HTMLElement {
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'));
result_proxyUsed.innerHTML = `A proxy was used to fetch the proof: <a href="https://PLACEHOLDER__PROXY_HOSTNAME">PLACEHOLDER__PROXY_HOSTNAME</a>`; result_proxyUsed.innerHTML = `A proxy was used to fetch the proof: <a href="https://PLACEHOLDER__PROXY_HOSTNAME" aria-label="Link to proxy server">PLACEHOLDER__PROXY_HOSTNAME</a>`;
} }
// TODO Display errors // TODO Display errors

9
static/kx-key.js
View file

@ -33,7 +33,7 @@ class Key extends HTMLElement {
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'));
profile_link.innerHTML = `Key link: <a href="${data.key.uri}">${data.key.uri}</a>`; profile_link.innerHTML = `Key link: <a href="${data.key.uri}" aria-label="Link to cryptographic key">${data.key.uri}</a>`;
elContent.appendChild(document.createElement('hr')); elContent.appendChild(document.createElement('hr'));
@ -46,9 +46,10 @@ class Key extends HTMLElement {
subsection_qr_icon.setAttribute('aria-hidden', 'true'); subsection_qr_icon.setAttribute('aria-hidden', 'true');
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_fingerprintQR = subsection_qr_text.appendChild(document.createElement('button'));
button_profileQR.innerText = `Show OpenPGP fingerprint QR`; button_fingerprintQR.innerText = `Show OpenPGP fingerprint QR`;
button_profileQR.setAttribute('onClick', `showQR('${data.fingerprint}', 'fingerprint')`); button_fingerprintQR.setAttribute('onClick', `showQR('${data.fingerprint}', 'fingerprint')`);
button_fingerprintQR.setAttribute('aria-label', `Show QR code for cryptographic fingerprint`);
} }
} }

6
views/index.pug
View file

@ -34,10 +34,10 @@ block content
.narrow .narrow
#search.form-wrapper.card #search.form-wrapper.card
h2 Generate a profile h2#searchTitle Generate a profile
form(action="post") form(action="post")
label(for="query") Query for fingerprint or email identifier label#searchQuery(for="query") Query for fingerprint or email identifier
input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks") input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks" aria-labelledby="searchTitle searchQuery")
fieldset(aria-role="radiogroup").radio-wrapper fieldset(aria-role="radiogroup").radio-wrapper
legend Protocol legend Protocol

12
views/profile.pug
View file

@ -8,7 +8,7 @@ mixin generateUser(user, isPrimary)
each claim in user.claims each claim in user.claims
if claim.matches.length > 0 if claim.matches.length > 0
kx-claim.kx-item(data-claim=claim) kx-claim.kx-item(data-claim=claim)
details details(aria-label="Claim")
summary summary
.info .info
p.subtitle= claim.matches[0].serviceprovider.name p.subtitle= claim.matches[0].serviceprovider.name
@ -22,12 +22,12 @@ mixin generateUser(user, isPrimary)
div div
if (claim.matches[0].profile.uri) if (claim.matches[0].profile.uri)
p Profile link: p Profile link:
a(rel='me' href=claim.matches[0].profile.uri)= claim.matches[0].profile.uri a(rel='me' href=claim.matches[0].profile.uri aria-label="Link to profile")= claim.matches[0].profile.uri
else else
p Profile link: not accessible from browser p Profile link: not accessible from browser
if (claim.matches[0].proof.uri) if (claim.matches[0].proof.uri)
p Proof link: p Proof link:
a(rel='me' href=claim.matches[0].proof.uri)= claim.matches[0].proof.uri a(rel='me' href=claim.matches[0].proof.uri aria-label="Link to proof")= claim.matches[0].proof.uri
else else
p Proof link: not accessible from browser p Proof link: not accessible from browser
@ -117,7 +117,7 @@ block content
#profileProofs.card.card--transparent #profileProofs.card.card--transparent
h2 Key h2 Key
kx-key.kx-item(data-keydata=data.keyData) kx-key.kx-item(data-keydata=data.keyData)
details details(aria-label="Key")
summary summary
.info .info
p.subtitle= data.keyData.key.fetchMethod p.subtitle= data.keyData.key.fetchMethod
@ -127,12 +127,12 @@ block content
img(src='/static/img/link.png') img(src='/static/img/link.png')
div div
p Key link: p Key link:
a(href=data.keyData.key.uri)= data.keyData.key.uri a(href=data.keyData.key.uri aria-label="Link to cryptographic key")= data.keyData.key.uri
hr hr
.subsection .subsection
img(src='/static/img/qrcode.png') img(src='/static/img/qrcode.png')
div div
button(onClick=`showQR('${data.keyData.fingerprint}', 'fingerprint')`) Show OpenPGP fingerprint QR button(onClick=`showQR('${data.keyData.fingerprint}', 'fingerprint')` aria-label='Show QR code for cryptographic fingerprint') Show OpenPGP fingerprint QR
+generateUser(data.keyData.users[data.keyData.primaryUserIndex], true) +generateUser(data.keyData.users[data.keyData.primaryUserIndex], true)
each user, index in data.keyData.users each user, index in data.keyData.users