Mirroristas/mCaptcha
2
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-11-23 22:15:46 +00:00
Code Issues Packages Projects Releases 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; error: () => void;
}; };
export const messageText = (): messageTextReturn => { export const BEFORE = "I'm not a robot";
const beforeID = "widget__verification-text--before"; export const DURING = "Processing...";
const duringID = "widget__verification-text--during"; export const AFTER = "Verified!";
const errorID = "widget__verification-text--error"; export const ERROR = "Something went wrong";
const afterID = "widget__verification-text--after";
const before = new LazyElement(beforeID); export const messageText = (): messageTextReturn => {
const after = new LazyElement(afterID); const conatinerID = "widget__verification-text";
const during = new LazyElement(duringID);
const error = new LazyElement(errorID); const container = new LazyElement(conatinerID);
/** runner fn to display HTMLElement **/ /** runner fn to display HTMLElement **/
const showMsg = (e: HTMLElement) => (e.style.display = "block"); const showMsg = (value: string) => {
/** runner fn to hide HTMLElement **/ container.get().innerText = value;
const hideMsg = (e: HTMLElement) => (e.style.display = "none"); btn().ariaValueText = value;
};
return { return {
/** display "before" message **/ /** display "before" message **/
before: () => { before: () => {
showMsg(before.get()); showMsg(BEFORE);
hideMsg(after.get());
hideMsg(during.get());
hideMsg(error.get());
}, },
/** display "after" message **/ /** display "after" message **/
after: () => { after: () => {
hideMsg(before.get()); showMsg(AFTER);
showMsg(after.get());
hideMsg(during.get());
hideMsg(error.get());
}, },
/** display "during" message **/ /** display "during" message **/
during: () => { during: () => {
hideMsg(before.get()); showMsg(DURING);
hideMsg(after.get());
showMsg(during.get());
hideMsg(error.get());
}, },
/** display "error" message **/ /** display "error" message **/
error: () => { error: () => {
hideMsg(before.get()); showMsg(ERROR);
hideMsg(after.get());
hideMsg(during.get());
showMsg(error.get());
}, },
}; };
}; };

13
templates/widget/index.html
View File

@ -19,14 +19,15 @@ SPDX-License-Identifier: MIT OR Apache-2.0
</div> </div>
</noscript> </noscript>
<label class="widget__verification-container" for="widget__verification-checkbox"> <label class="widget__verification-container" for="widget__verification-checkbox">
<span id="widget__verification-text"
>I'm not a robot</span>
<input <input
id="widget__verification-checkbox" id="widget__verification-checkbox"
aria-valuenow="I'm not a robot"
aria-checked="false"
role="checkbox"
class="widget__verification-checkbox" class="widget__verification-checkbox"
type="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> </label>
<div class="widget__mcaptcha-details"> <div class="widget__mcaptcha-details">
<a href="<.= crate::PKG_HOMEPAGE .>" <a href="<.= crate::PKG_HOMEPAGE .>"
@ -54,6 +55,8 @@ SPDX-License-Identifier: MIT OR Apache-2.0
</div> </div>
</div> </div>
</form> </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> </main>
<.include!("./footer.html"); .> <.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> => { export const solveCaptchaRunner = async (e: Event): Promise<void> => {
const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill"); 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; let width = 0;
if (LOCK) { if (LOCK) {
@ -36,8 +42,9 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
LOCK = true; LOCK = true;
if (CONST.btn().checked == false) { if (CONST.btn().checked == false) {
width = 0; width = 0;
PROGRESS_FILL.style.width = `${width}%`; setWidth(width);
CONST.messageText().before(); CONST.messageText().before();
CONST.btn().ariaChecked = <any>false;
LOCK = false; LOCK = false;
return; return;
} }
@ -57,7 +64,7 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
if (resp.type === "work") { if (resp.type === "work") {
width = 80; width = 80;
PROGRESS_FILL.style.width = `${width}%`; setWidth(width);
console.log( console.log(
`Proof generated. Difficuly: ${config.difficulty_factor} Duration: ${resp.value.work.time}` `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; width = 90;
PROGRESS_FILL.style.width = `${width}%`; setWidth(width);
// 3. submit work // 3. submit work
const token = await sendWork(proof); const token = await sendWork(proof);
// 4. send token // 4. send token
sendToParent(token); sendToParent(token);
// 5. mark checkbox checked // 5. mark checkbox checked
CONST.btn().checked = true; CONST.btn().checked = true;
CONST.btn().ariaChecked = <any>true;
width = 100; width = 100;
PROGRESS_FILL.style.width = `${width}%`; setWidth(width);
CONST.messageText().after(); CONST.messageText().after();
LOCK = false; LOCK = false;
} }
if (resp.type === "progress") { if (resp.type === "progress") {
if (width < 80) { if (width < 80) {
width = (resp.nonce / max_recorded_nonce) * 100; width = (resp.nonce / max_recorded_nonce) * 100;
PROGRESS_FILL.style.width = `${width}%`; setWidth(width);
} }
console.log(`received nonce ${resp.nonce}`); console.log(`received nonce ${resp.nonce}`);
} }

33
templates/widget/main.scss
View File

@ -56,7 +56,8 @@ body {
.widget__verification-container { .widget__verification-container {
align-items: center; align-items: center;
display: none; display: flex;
flex-direction: row-reverse;
line-height: 30px; line-height: 30px;
font-size: 1rem; font-size: 1rem;
} }
@ -67,36 +68,6 @@ body {
margin: 0 10px; 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 { .widget__mcaptcha-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

20
templates/widget/tests/const.test.ts
View File

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

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

@ -11,25 +11,19 @@ export const checkbox = <HTMLInputElement>document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = CONST.btnId; checkbox.id = CONST.btnId;
const getMessages = (state: string) => { const getMessages = () => {
const msg = <HTMLElement>document.createElement("span"); 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; return msg;
}; };
export const beforeMsg = getMessages("before"); export const Msg = getMessages();
export const afterMsg = getMessages("after");
export const duringMsg = getMessages("during");
export const errorMsg = getMessages("error");
/** get base HTML with empty mCaptcha container */ /** get base HTML with empty mCaptcha container */
export const getBaseHtml = (): HTMLFormElement => { export const getBaseHtml = (): HTMLFormElement => {
const form = <HTMLFormElement>document.createElement("form"); const form = <HTMLFormElement>document.createElement("form");
form.appendChild(checkbox); form.appendChild(checkbox);
form.appendChild(beforeMsg); form.appendChild(Msg);
form.appendChild(duringMsg);
form.appendChild(afterMsg);
form.appendChild(errorMsg);
return form; return form;
}; };