first passdev/sebasjm/a11y-test

3 files changed, 58 insertions, 29 deletions

diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index f3ffcd157..5f1b9b688 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -36,6 +36,11 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
     prev[d].push(cur)
     return prev
   }, {} as Record<string, typeof transactions>)
+  /**
+   * FIXME: create an abstraction of a table with accessible feature
+   * multi column multi header and subheaders
+   * Also responsiveness
+   */
   return (
     <div class="px-4 mt-4">
       <div class="sm:flex sm:items-center">
@@ -44,28 +49,41 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
         </div>
       </div>
       <div class="-mx-4 mt-5 ring-1 ring-gray-300 sm:mx-0 rounded-lg min-w-fit bg-white">
-        <table class="min-w-full divide-y divide-gray-300">
+        <table class="min-w-full divide-y divide-gray-300" summary={i18n.str`List of all transfer received and sent related to this account sorted by date with the latest on top.`}>
           <thead>
             <tr>
-              <th scope="col" class="pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Date`}</th>
-              <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Amount`}</th>
-              <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Counterpart`}</th>
-              <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Subject`}</th>
+              <th id="transfer-date" scope="col" class="pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">
+                {i18n.str`Date`}
+              </th>
+              <th id="transfer-counterpart" scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">
+                {i18n.str`Counterpart`}
+              </th>
+              <th id="transfer-subject" scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">
+                {i18n.str`Subject`}
+              </th>
+              <th id="transfer-amount" scope="col" class="hidden sm:table-cell px-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">
+                {i18n.str`Amount`}
+              </th>
             </tr>
           </thead>
           <tbody>
-            {Object.entries(txByDate).map(([date, txs], idx) => {
+            {Object.entries(txByDate).map(([date, txs], idxGr) => {
               return <Fragment>
                 <tr class="border-t border-gray-200">
-                  <th colSpan={4} scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3">
+                  <th colSpan={4} scope="colgroup"
+                    class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3"
+                    id={`transfer-date-${idxGr}`}
+                    headers={`transfer-date`}
+                  >
                     {date}
                   </th>
                 </tr>
-                {txs.map(item => {
+                {txs.map((item, idxTx) => {
                   const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss", { locale: dateLocale })
-                  return (<tr key={idx} class="border-b border-gray-200 last:border-none">
-                    <td class="relative py-2 pl-2 pr-2 text-sm ">
-                      <div class="font-medium text-gray-900">{time}</div>
+                  return (<tr key={idxTx} class="border-b border-gray-200 last:border-none">
+                    <td class="relative py-2 pl-2 pr-2 text-sm sm:bg-gray-50 w-28"
+                      id={`transfer-time-${idxGr}-${idxTx}`}
+                      headers={`transfer-date-${idxGr} transfer-date`}>
                       <dl class="font-normal sm:hidden">
                         <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
                         <dd class="mt-1 truncate text-gray-700">
@@ -90,19 +108,25 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                         </dd>
                       </dl>
                     </td>
+                    <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500"
+                      headers={`transfer-date-${idxGr} transfer-time-${idxGr}-${idxTx} transfer-counterpart`}
+                    >
+                      <a href={`#/wire-transfer/${item.counterpart}`} class="text-indigo-600 hover:text-indigo-900">
+                        {item.counterpart}
+                      </a>
+                    </td>
+                    <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all "
+                      headers={`transfer-date-${idxGr} transfer-time-${idxGr}-${idxTx} transfer-subject`}
+                    >{item.subject}</td>
                     <td data-negative={item.negative ? "true" : "false"}
-                      class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 ">
+                      class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 min-w-md"
+                      headers={`transfer-date-${idxGr} transfer-time-${idxGr}-${idxTx} transfer-amount`}
+                    >
                       {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} withColor spec={config.currency_specification} />
                       ) : (
                         <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
                       )}
                     </td>
-                    <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">
-                      <a href={`#/wire-transfer/${item.counterpart}`} class="text-indigo-600 hover:text-indigo-900">
-                        {item.counterpart}
-                      </a>
-                    </td>
-                    <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
                   </tr>)
                 })}
               </Fragment>
diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx
index 05d53bb05..c43efb933 100644
--- a/packages/demobank-ui/src/pages/OperationState/views.tsx
+++ b/packages/demobank-ui/src/pages/OperationState/views.tsx
@@ -317,7 +317,7 @@ export function ReadyView({ uri, onClose: doClose }: State.Ready): VNode<{}> {
           onClose()
         }}
       >
-        Cancel
+        <i18n.Translate>Cancel</i18n.Translate>
       </button>
     </div>
 
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index 2a7374cab..80a7a620f 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -35,6 +35,7 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq
   const [bankState] = useBankState();
 
   const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>();
+  const [changeUsingMouse, setChangeUsingMouse] = useState(false)
 
   return (
     <div class="mt-4">
@@ -45,11 +46,12 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq
         </legend>
 
         <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
-          {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
-          <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (tab === "charge-wallet" ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
-            <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onClick={() => {
-              setTab("charge-wallet")
-            }}
+          <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus-within:ring  focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-gray-600"}>
+            <input type="radio" name="transfer-type" value="char-wallet" class="sr-only"
+              onClick={(e) => {
+                setChangeUsingMouse(e.clientX > 0 && e.clientY > 0)
+                setTab("charge-wallet")
+              }}
             />
             <div class="flex flex-col">
               <span class="flex">
@@ -76,13 +78,16 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq
           </label>
 
 
-          <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (tab === "wire-transfer" ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
-            <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onClick={() => {
+          <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus-visible:ring-red-400" + (tab === "wire-transfer" ? " ring-2 ring-indigo-600" : "border-gray-300")}>
+            <input type="radio" name="transfer-type" value="wire-transfer" class="sr-only" onClick={(e) => {
+              setChangeUsingMouse(e.clientX > 0 && e.clientY > 0)
               setTab("wire-transfer")
             }} />
             <div class="flex flex-col">
               <span class="flex">
-                <div class="text-4xl mr-4 my-auto">&#x2194;</div>
+                <div class="text-4xl mr-4 my-auto">
+                  <span aria-hidden="true">&#x2194;</span>
+                </div>
                 <span class="grow self-center text-lg font-medium text-gray-900 align-middle text-center">
                   <i18n.Translate>to another bank account</i18n.Translate>
                 </span>
@@ -98,7 +103,7 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq
         </div>
         {tab === "charge-wallet" && (
           <WalletWithdrawForm
-            focus
+            focus={changeUsingMouse}
             limit={limit}
             onAuthorizationRequired={onAuthorizationRequired}
             goToConfirmOperation={goToConfirmOperation}
@@ -109,7 +114,7 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq
         )}
         {tab === "wire-transfer" && (
           <PaytoWireTransferForm
-            focus
+            focus={changeUsingMouse}
             title={i18n.str`Transfer details`}
             limit={limit}
             onAuthorizationRequired={onAuthorizationRequired}