feat: add necessary labels for the receive screen

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

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
@@ -9,7 +9,9 @@ function Header({ children, headerLeft, headerRight }: Props) {
     <div className="bg-white py-2 border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
       <div className="flex justify-between items-center container max-w-screen-lg px-4 mx-auto">
         <div className="w-8 h-8">{headerLeft}</div>
-        <h1 className="text-lg font-medium dark:text-white">{children}</h1>
+        <h1 className="text-lg font-medium dark:text-white" tabIndex={0}>
+          {children}
+        </h1>
         <div className="w-8 h-8">{headerRight}</div>
       </div>
     </div>

diff --git a/src/app/components/Menu/MenuItemButton.tsx b/src/app/components/Menu/MenuItemButton.tsx
@@ -24,7 +24,7 @@ function MenuItemButton({
             active ? "bg-gray-100 dark:bg-white/10" : "",
             danger ? "text-red-700" : "text-gray-700",
             disabled ? "cursor-not-allowed" : "cursor-pointer",
-            "flex items-center block w-full text-left px-4 py-3 text-sm dark:text-white"
+            "flex items-center w-full text-left px-4 py-3 text-sm dark:text-white"
           )}
           disabled={disabled}
           onClick={onClick}

diff --git a/src/app/screens/Receive/index.tsx b/src/app/screens/Receive/index.tsx
@@ -165,7 +165,12 @@ function Receive() {
     return (
       <>
         <div className="relative p-8 bg-white rounded-lg shadow-sm ring-1 ring-black ring-opacity-5 flex justify-center items-center overflow-hidden">
-          <QRCode value={invoice.paymentRequest.toUpperCase()} level="M" />
+          <QRCode
+            value={invoice.paymentRequest.toUpperCase()}
+            level="M"
+            tabIndex={0}
+            aria-label="QR code with the invoice"
+          />
           {paid && (
             <div className="absolute inset-0 flex justify-center items-center bg-white/90">
               <div className="text-center">