feat: add aria labels to widget progress bar and checkbox

This commit is contained in:
Aravinth Manivannan
2024-02-03 19:18:36 +05:30
parent 5722a5327c
commit 9cf0eb596a
6 changed files with 49 additions and 97 deletions

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);
},
};
};