mirrors/mCaptcha
1
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-02-16 16:39:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: add aria labels to widget progress bar and checkbox

Browse source
This commit is contained in:
Aravinth Manivannan 2024-02-03 19:18:36 +05:30
parent 5722a5327c
commit 9cf0eb596a
No known key found for this signature in database
GPG key ID: F8F50389936984FF
6 changed files with 49 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
templates/widget/const.ts
View file

@ -56,53 +56,41 @@ type messageTextReturn = {
error: () => void;
};
export const messageText = (): messageTextReturn => {
const beforeID = "widget__verification-text--before";
const duringID = "widget__verification-text--during";
const errorID = "widget__verification-text--error";
const afterID = "widget__verification-text--after";
export const BEFORE = "I'm not a robot";
export const DURING = "Processing...";
export const AFTER = "Verified!";
export const ERROR = "Something went wrong";
const before = new LazyElement(beforeID);
const after = new LazyElement(afterID);
const during = new LazyElement(duringID);
const error = new LazyElement(errorID);
export const messageText = (): messageTextReturn => {
const conatinerID = "widget__verification-text";
const container = new LazyElement(conatinerID);
/** runner fn to display HTMLElement **/
const showMsg = (e: HTMLElement) => (e.style.display = "block");
/** runner fn to hide HTMLElement **/
const hideMsg = (e: HTMLElement) => (e.style.display = "none");
const showMsg = (value: string) => {
container.get().innerText = value;
btn().ariaValueText = value;
};
return {
/** display "before" message **/
before: () => {
showMsg(before.get());
hideMsg(after.get());
hideMsg(during.get());
hideMsg(error.get());
showMsg(BEFORE);
},
/** display "after" message **/
after: () => {
hideMsg(before.get());
showMsg(after.get());
hideMsg(during.get());
hideMsg(error.get());
showMsg(AFTER);
},
/** display "during" message **/
during: () => {
hideMsg(before.get());
hideMsg(after.get());
showMsg(during.get());
hideMsg(error.get());
showMsg(DURING);
},
/** display "error" message **/
error: () => {
hideMsg(before.get());
hideMsg(after.get());
hideMsg(during.get());
showMsg(error.get());
showMsg(ERROR);
},
};
};

13
templates/widget/index.html
View file

@ -19,14 +19,15 @@ SPDX-License-Identifier: MIT OR Apache-2.0
</div>
</noscript>
<label class="widget__verification-container" for="widget__verification-checkbox">
<span id="widget__verification-text"
>I'm not a robot</span>
<input
id="widget__verification-checkbox"
aria-valuenow="I'm not a robot"
aria-checked="false"
role="checkbox"
class="widget__verification-checkbox"
type="checkbox" />
<span id="widget__verification-text--before">I'm not a robot</span>
<span id="widget__verification-text--during">Processing...</span>
<span id="widget__verification-text--after">Verified!</span>
<span id="widget__verification-text--error">Something went wrong</span>
</label>
<div class="widget__mcaptcha-details">
<a href="<.= crate::PKG_HOMEPAGE .>"
@ -54,6 +55,8 @@ SPDX-License-Identifier: MIT OR Apache-2.0
</div>
</div>
</form>
<div class="progress__bar"><div class="progress__fill"></div></div>
<div class="progress__bar"><div
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
role="progressbar" class="progress__fill"></div></div>
</main>
<.include!("./footer.html"); .>

18
templates/widget/index.ts
View file

@ -25,6 +25,12 @@ export const registerVerificationEventHandler = (): void => {
export const solveCaptchaRunner = async (e: Event): Promise<void> => {
const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill");
const setWidth = (width: number) => {
PROGRESS_FILL.style.width = `${width}%`;
PROGRESS_FILL.ariaValueNow = <any>parseInt(<any>width);
};
let width = 0;
if (LOCK) {
@ -36,8 +42,9 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
LOCK = true;
if (CONST.btn().checked == false) {
width = 0;
PROGRESS_FILL.style.width = `${width}%`;
setWidth(width);
CONST.messageText().before();
CONST.btn().ariaChecked = <any>false;
LOCK = false;
return;
}
@ -57,7 +64,7 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
if (resp.type === "work") {
width = 80;
PROGRESS_FILL.style.width = `${width}%`;
setWidth(width);
console.log(
`Proof generated. Difficuly: ${config.difficulty_factor} Duration: ${resp.value.work.time}`
);
@ -72,22 +79,23 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
};
width = 90;
PROGRESS_FILL.style.width = `${width}%`;
setWidth(width);
// 3. submit work
const token = await sendWork(proof);
// 4. send token
sendToParent(token);
// 5. mark checkbox checked
CONST.btn().checked = true;
CONST.btn().ariaChecked = <any>true;
width = 100;
PROGRESS_FILL.style.width = `${width}%`;
setWidth(width);
CONST.messageText().after();
LOCK = false;
}
if (resp.type === "progress") {
if (width < 80) {
width = (resp.nonce / max_recorded_nonce) * 100;
PROGRESS_FILL.style.width = `${width}%`;
setWidth(width);
}
console.log(`received nonce ${resp.nonce}`);
}

33
templates/widget/main.scss
View file

@ -56,7 +56,8 @@ body {
.widget__verification-container {
align-items: center;
display: none;
display: flex;
flex-direction: row-reverse;
line-height: 30px;
font-size: 1rem;
}
@ -67,36 +68,6 @@ body {
margin: 0 10px;
}
#widget__verification-text--during {
display: none;
}
#widget__verification-text--after {
display: none;
color: green;
}
#widget__verification-text--error {
display: none;
color: red;
}
.widget__verification-checkbox:checked ~ #widget__verification-text--before {
display: none;
}
.widget__verification-checkbox:checked ~ #widget__verification-text--during {
display: none;
}
.widget__verification-checkbox:checked ~ #widget__verification-text--error {
display: none;
}
.widget__verification-checkbox:checked ~ #widget__verification-text--after {
display: block;
}
.widget__mcaptcha-details {
display: flex;
flex-direction: column;

22
templates/widget/tests/const.test.ts
View file

@ -5,7 +5,7 @@
import * as CONST from "../const";
import {getBaseHtml, sitekey, checkbox} from "./setupTests";
import { getBaseHtml, sitekey, checkbox } from "./setupTests";
import * as TESTElements from "./setupTests";
it("const works", () => {
@ -17,29 +17,17 @@ it("const works", () => {
// display after
CONST.messageText().after();
expect(TESTElements.afterMsg.style.display).toBe("block");
expect(TESTElements.beforeMsg.style.display).toBe("none");
expect(TESTElements.duringMsg.style.display).toBe("none");
expect(TESTElements.errorMsg.style.display).toBe("none");
expect(TESTElements.Msg.innerText).toBe(CONST.AFTER);
// display before
CONST.messageText().before();
expect(TESTElements.afterMsg.style.display).toBe("none");
expect(TESTElements.beforeMsg.style.display).toBe("block");
expect(TESTElements.duringMsg.style.display).toBe("none");
expect(TESTElements.errorMsg.style.display).toBe("none");
expect(TESTElements.Msg.innerText).toBe(CONST.BEFORE);
// display during
CONST.messageText().during();
expect(TESTElements.afterMsg.style.display).toBe("none");
expect(TESTElements.beforeMsg.style.display).toBe("none");
expect(TESTElements.duringMsg.style.display).toBe("block");
expect(TESTElements.errorMsg.style.display).toBe("none");
expect(TESTElements.Msg.innerText).toBe(CONST.DURING);
// display error
CONST.messageText().error();
expect(TESTElements.afterMsg.style.display).toBe("none");
expect(TESTElements.beforeMsg.style.display).toBe("none");
expect(TESTElements.duringMsg.style.display).toBe("none");
expect(TESTElements.errorMsg.style.display).toBe("block");
expect(TESTElements.Msg.innerText).toBe(CONST.ERROR);
});

16
templates/widget/tests/setupTests.ts
View file

@ -11,25 +11,19 @@ export const checkbox = <HTMLInputElement>document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = CONST.btnId;
const getMessages = (state: string) => {
const getMessages = () => {
const msg = <HTMLElement>document.createElement("span");
msg.id = `widget__verification-text--${state}`;
msg.id = "widget__verification-text";
msg.innerText = "I'm not a robot";
return msg;
};
export const beforeMsg = getMessages("before");
export const afterMsg = getMessages("after");
export const duringMsg = getMessages("during");
export const errorMsg = getMessages("error");
export const Msg = getMessages();
/** get base HTML with empty mCaptcha container */
export const getBaseHtml = (): HTMLFormElement => {
const form = <HTMLFormElement>document.createElement("form");
form.appendChild(checkbox);
form.appendChild(beforeMsg);
form.appendChild(duringMsg);
form.appendChild(afterMsg);
form.appendChild(errorMsg);
form.appendChild(Msg);
return form;
};