diff --git a/static/kx-claim.js b/static/kx-claim.js index e721952..a9e5c0b 100644 --- a/static/kx-claim.js +++ b/static/kx-claim.js @@ -82,14 +82,14 @@ class Claim extends HTMLElement { const profile_link = subsection_links_text.appendChild(document.createElement('p')); if (claim.matches[0].profile.uri) { - profile_link.innerHTML = `Profile link: ${claim.matches[0].profile.uri}`; + profile_link.innerHTML = `Profile link: ${claim.matches[0].profile.uri}`; } else { profile_link.innerHTML = `Profile link: not accessible from browser`; } const proof_link = subsection_links_text.appendChild(document.createElement('p')); if (claim.matches[0].proof.uri) { - proof_link.innerHTML = `Proof link: ${claim.matches[0].proof.uri}`; + proof_link.innerHTML = `Proof link: ${claim.matches[0].proof.uri}`; } else { 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')); button_profileQR.innerText = `Show profile QR`; 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')); @@ -160,7 +161,7 @@ class Claim extends HTMLElement { const subsection_info_text = subsection_info.appendChild(document.createElement('div')); const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p')); - result_proxyUsed.innerHTML = `A proxy was used to fetch the proof: PLACEHOLDER__PROXY_HOSTNAME`; + result_proxyUsed.innerHTML = `A proxy was used to fetch the proof: PLACEHOLDER__PROXY_HOSTNAME`; } // TODO Display errors diff --git a/static/kx-key.js b/static/kx-key.js index 3c8c6db..e79f355 100644 --- a/static/kx-key.js +++ b/static/kx-key.js @@ -33,7 +33,7 @@ class Key extends HTMLElement { const subsection_links_text = subsection_links.appendChild(document.createElement('div')); const profile_link = subsection_links_text.appendChild(document.createElement('p')); - profile_link.innerHTML = `Key link: ${data.key.uri}`; + profile_link.innerHTML = `Key link: ${data.key.uri}`; elContent.appendChild(document.createElement('hr')); @@ -46,9 +46,10 @@ class Key extends HTMLElement { subsection_qr_icon.setAttribute('aria-hidden', 'true'); const subsection_qr_text = subsection_qr.appendChild(document.createElement('div')); - const button_profileQR = subsection_qr_text.appendChild(document.createElement('button')); - button_profileQR.innerText = `Show OpenPGP fingerprint QR`; - button_profileQR.setAttribute('onClick', `showQR('${data.fingerprint}', 'fingerprint')`); + const button_fingerprintQR = subsection_qr_text.appendChild(document.createElement('button')); + button_fingerprintQR.innerText = `Show OpenPGP fingerprint QR`; + button_fingerprintQR.setAttribute('onClick', `showQR('${data.fingerprint}', 'fingerprint')`); + button_fingerprintQR.setAttribute('aria-label', `Show QR code for cryptographic fingerprint`); } } diff --git a/views/index.pug b/views/index.pug index 6c37a0d..ab9260d 100644 --- a/views/index.pug +++ b/views/index.pug @@ -34,10 +34,10 @@ block content .narrow #search.form-wrapper.card - h2 Generate a profile + h2#searchTitle Generate a profile form(action="post") - label(for="query") Query for fingerprint or email identifier - input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks") + label#searchQuery(for="query") Query for fingerprint or email identifier + input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks" aria-labelledby="searchTitle searchQuery") fieldset(aria-role="radiogroup").radio-wrapper legend Protocol diff --git a/views/profile.pug b/views/profile.pug index da3eb80..21a63ec 100644 --- a/views/profile.pug +++ b/views/profile.pug @@ -8,7 +8,7 @@ mixin generateUser(user, isPrimary) each claim in user.claims if claim.matches.length > 0 kx-claim.kx-item(data-claim=claim) - details + details(aria-label="Claim") summary .info p.subtitle= claim.matches[0].serviceprovider.name @@ -22,12 +22,12 @@ mixin generateUser(user, isPrimary) div if (claim.matches[0].profile.uri) 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 p Profile link: not accessible from browser if (claim.matches[0].proof.uri) 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 p Proof link: not accessible from browser @@ -117,7 +117,7 @@ block content #profileProofs.card.card--transparent h2 Key kx-key.kx-item(data-keydata=data.keyData) - details + details(aria-label="Key") summary .info p.subtitle= data.keyData.key.fetchMethod @@ -127,12 +127,12 @@ block content img(src='/static/img/link.png') div 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 .subsection img(src='/static/img/qrcode.png') 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) each user, index in data.keyData.users