feat: add labels for the send and result screens

volfiros · Sep 16, 2023 · 70ddeb5 · 70ddeb5
1 parent e427bf7
commit 70ddeb5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/app/components/PaymentSummary/index.tsx b/src/app/components/PaymentSummary/index.tsx
@@ -19,7 +19,11 @@ const PaymentSummary: FC<Props> = ({
   const { getFormattedSats } = useSettings();
 
   return (
-    <dl className="mb-0">
+    <dl
+      className="mb-0"
+      tabIndex={0}
+      aria-label={`Amount - ${getFormattedSats(amount)}, ~${fiatAmount}`}
+    >
       <dt className="text-sm text-gray-500 dark:text-neutral-500">
         {tCommon("amount")}
       </dt>

diff --git a/src/app/components/ResultCard/index.tsx b/src/app/components/ResultCard/index.tsx
@@ -5,7 +5,13 @@ export type Props = {
 
 export default function ResultCard({ message, isSuccess }: Props) {
   return (
-    <div className="p-12 font-medium drop-shadow rounded-lg mt-4 flex flex-col items-center bg-white dark:bg-surface-02dp">
+    <div
+      className="p-12 font-medium drop-shadow rounded-lg mt-4 flex flex-col items-center bg-white dark:bg-surface-02dp"
+      tabIndex={0}
+      aria-label={
+        isSuccess ? "Payment is successful" : "Payment is unsuccessful"
+      }
+    >
       <img
         src={isSuccess ? "assets/icons/tick.svg" : "assets/icons/cross.svg"}
         alt={isSuccess ? "success" : "failure"}