widget: aria-label i18n keys

docs/guide/widget.md

@@ -83,6 +83,8 @@ You can change the text on each label of the widget by setting the `data-cap-i18
 ></cap-widget>
 ```
 
+`verify-aria-label`, `verifying-aria-label`, `verified-aria-label`, `error-aria-label` are also supported for screen readers.
+
 ## Customizing the widget
 
 ### fetch function
@@ -119,7 +121,8 @@ cap-widget {
   --cap-checkbox-border-radius: 6px;
   --cap-checkbox-background: #fafafa91;
   --cap-checkbox-margin: 2px;
-  --cap-font: system, -apple-system, "BlinkMacSystemFont", ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", "Ubuntu", "arial", sans-serif;
+  --cap-font: system, -apple-system, "BlinkMacSystemFont", ".SFNSText-Regular", "San Francisco",
+    "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", "Ubuntu", "arial", sans-serif;
   --cap-spinner-color: #000;
   --cap-spinner-background-color: #eee;
   --cap-spinner-thickness: 5px;
@@ -128,4 +131,4 @@ cap-widget {
   --cap-credits-font-size: 12px;
   --cap-opacity-hover: 0.8;
 }
-```
+```

widget/src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cap.js/widget",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Client-side widget for Cap, a lightweight, modern open-source CAPTCHA alternative designed using SHA-256 PoW.",
   "keywords": [
     "security",

widget/src/src/cap.js

@@ -143,7 +143,7 @@
 
         this.#div.setAttribute(
           "aria-label",
-          "Verifying you're a human, please wait"
+          this.getI18nText("verifying-aria-label", "Verifying you're a human, please wait")
         );
 
         this.dispatchEvent("progress", { progress: 0 });
@@ -189,14 +189,14 @@
 
           this.#div.setAttribute(
             "aria-label",
-            "We have verified you're a human, you may now continue"
+            this.getI18nText("verified-aria-label", "We have verified you're a human, you may now continue")
           );
 
           return { success: true, token: this.token };
         } catch (err) {
           this.#div.setAttribute(
             "aria-label",
-            "An error occurred, please try again"
+            this.getI18nText("error-aria-label", "An error occurred, please try again")
           );
           this.error(err.message);
           throw err;
@@ -309,7 +309,7 @@
       this.#div.classList.add("captcha");
       this.#div.setAttribute("role", "button");
       this.#div.setAttribute("tabindex", "0");
-      this.#div.setAttribute("aria-label", "Click to verify you're a human");
+      this.#div.setAttribute("aria-label", this.getI18nText("verify-aria-label", "Click to verify you're a human"));
       this.#div.setAttribute("aria-live", "polite");
       this.#div.setAttribute("disabled", "true");
       this.#div.innerHTML = `<div class="checkbox"></div><p>${this.getI18nText(