merchant-backoffice

commit 9988ca1c3e4fd4a5a2c9ce8abd28131e5b0c1a23
parent f0767d972b2cf84036c491d775ed703934b79d6c
Author: Christian Grothoff <christian@grothoff.org>
Date:   Tue, 18 Oct 2022 16:54:04 +0200

associate labels with inputs (fixes #7388)

Diffstat:
M
packages/bank/src/pages/home/index.tsx
 | 
46
+++++++++++++++++++++++++++++++++-------------

1 file changed, 33 insertions(+), 13 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -952,10 +952,12 @@ function PaytoWireTransfer(Props: any): VNode {
         <div class="pure-form"
              name="wire-transfer-form">
           <p>
-          {i18n`Receiver IBAN:`}&nbsp;
+          <label for="iban">{i18n`Receiver IBAN:`}</label>&nbsp;
           <input
             ref={focusInput}
             type="text"
+            id="iban"
+            name="iban"
             placeholder="CC0123456789"
             required
             pattern={ibanRegex}
@@ -965,9 +967,11 @@ function PaytoWireTransfer(Props: any): VNode {
                 iban: e.currentTarget.value,
               }))
             }} /><br /><br />
-          {i18n`Transfer subject:`}&nbsp;
+          <label for="subject">{i18n`Transfer subject:`}</label>&nbsp;
           <input
             type="text"
+            name="subject"
+            id="subject"
             placeholder="subject"
             required
             onInput={(e): void => {
@@ -976,9 +980,11 @@ function PaytoWireTransfer(Props: any): VNode {
                 subject: e.currentTarget.value,
               }))
             }} /><br /><br />
-          {i18n`Amount:`}&nbsp;
+          <label for="amount">{i18n`Amount:`}</label>&nbsp;
           <input
             type="text"
+            name="amount"
+            id="amount"
             placeholder="amount"
             required
             value={amountInput}
@@ -1050,9 +1056,11 @@ function PaytoWireTransfer(Props: any): VNode {
       <div class="pure-form"
            name="payto-form">
         <p>
-        {i18n`payto URI:`}&nbsp;
-        <input name="address"
+        <label for="address">{i18n`payto URI:`}</label>&nbsp;
+        <input
+          name="address"
           size={90}
+          id="address"
           value={rawPaytoInput}
           required
           placeholder={i18n`payto address`}
@@ -1119,8 +1127,10 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
       Please, authorize this operation by answering the following question.
     </Translate></p>
     <div>
-      <label>What is <em>{captchaNumbers.a} + {captchaNumbers.b}</em> ?&nbsp;</label>
+      <label for="answer">What is <em>{captchaNumbers.a} + {captchaNumbers.b}</em> ?&nbsp;</label>
       <input
+        name="answer"
+        id="answer"
         type="text"
         required
         onInput={(e): void => {
@@ -1282,10 +1292,10 @@ function WalletWithdraw(Props: any): VNode {
           class="pure-form"
           name="tform">
           <p>
-          {i18n`Amount to withdraw:`}&nbsp;
+          <label for="withdraw-amount">{i18n`Amount to withdraw:`}</label>&nbsp;
           <input
             type="text"
-            id="reserve-amount"
+            id="withdraw-amount"
             name="withdraw-amount"
             value={submitAmount}
             pattern={amountRegex}
@@ -1401,9 +1411,11 @@ function LoginForm(Props: any): VNode {
   <form action="javascript:void(0);" class="login-form">
     <div class="pure-form">
       <h2>{i18n`Please login!`}</h2>
-      <p class="unameFieldLabel loginFieldLabel formFieldLabel">{i18n`Username:`}</p>
+      <p class="unameFieldLabel loginFieldLabel formFieldLabel"><label for="username">{i18n`Username:`}</label></p>
       <input
         type="text"
+        name="username"
+        id="username"
         value={submitData && submitData.username}
         placeholder="Username"
         required
@@ -1414,9 +1426,11 @@ function LoginForm(Props: any): VNode {
           }))
         }}
       />
-      <p class="passFieldLabel loginFieldLabel formFieldLabel">{i18n`Password:`}</p>
+      <p class="passFieldLabel loginFieldLabel formFieldLabel"><label for="password">{i18n`Password:`}</a></p>
       <input
         type="password"
+        name="password"
+        id="password"
         value={submitData && submitData.password}
         placeholder="Password"
         required
@@ -1477,8 +1491,10 @@ function RegistrationForm(Props: any): VNode {
           <form action="javascript:void(0);" class="register-form">
           <div class="pure-form">
             <h2>{i18n`Please register!`}</h2>
-            <p class="unameFieldLabel registerFieldLabel formFieldLabel">{i18n`Username:`}</p>
+            <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-un">{i18n`Username:`}</label></p>
             <input
+              id="register-un"
+              name="register-un"
               type="text"
               placeholder="Username"
               value={submitData && submitData.username}
@@ -1491,9 +1507,11 @@ function RegistrationForm(Props: any): VNode {
                 }))
               }} />
             <br />
-            <p class="unameFieldLabel registerFieldLabel formFieldLabel">{i18n`Password:`}</p>
+            <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-pw">{i18n`Password:`}</label></p>
             <input
               type="password"
+              name="register-pw"
+              id="register-pw"
               placeholder="Password"
               value={submitData && submitData.password}
               required
@@ -1506,9 +1524,11 @@ function RegistrationForm(Props: any): VNode {
               }} />
             <br />
             {/*
-              {i18n`Phone number:`}
+              <label for="phone">{i18n`Phone number:`}</label>
               // FIXME: add input validation (must start with +, otherwise only numbers)
               <input
+                name="phone"
+                id="phone"
                 type="phone"
                 placeholder="+CC-123456789"
                 value={submitData && submitData.phone}