feat: add screen reader labels for better accessibility

src/app/components/AccountMenu/index.tsx

@@ -58,7 +58,7 @@ function AccountMenu({ showOptions = true }: Props) {
   }
 
   return (
-    <div className="relative pl-2 flex justify-end w-72">
+    <div className="relative pl-2 flex justify-end w-72 caret-transparent">
       <Menu as="div">
         <Menu.Button className="h-full px-2 rounded-md hover:bg-gray-100 dark:hover:bg-white/10 transition-colors duration-200">
           <div className="flex items-center">
@@ -93,8 +93,12 @@ function AccountMenu({ showOptions = true }: Props) {
           </div>
         </Menu.Button>
         <Menu.List position="right" fullWidth>
+          <Menu.Item>
+            <span className="sr-only">{tCommon("arrowkeys")}</span>
+          </Menu.Item>
           <Menu.Item>
             <div
+              tabIndex={0}
               className={`flex-auto px-4 py-2 overflow-hidden ${
                 !title && !balancesDecorated ? "w-28" : ""
               }`}

src/app/components/BalanceBox/index.tsx

@@ -1,4 +1,5 @@
 import SkeletonLoader from "@components/SkeletonLoader";
+import { useTranslation } from "react-i18next";
 import { useAccount } from "~/app/context/AccountContext";
 import { classNames } from "~/app/utils";
 
@@ -9,11 +10,13 @@ type Props = {
 function BalanceBox({ className }: Props) {
   const { balancesDecorated, accountLoading } = useAccount();
   const balanceParts = balancesDecorated.accountBalance.split(" ");
+  const { t: tCommon } = useTranslation("common");
 
   return (
     <div
+      tabIndex={0}
       className={classNames(
-        "w-full flex flex-col items-center justify-center dark:text-white p-4",
+        "w-full flex flex-col items-center justify-center dark:text-white p-4 caret-transparent",
         className ?? ""
       )}
     >
@@ -22,6 +25,7 @@ function BalanceBox({ className }: Props) {
           <SkeletonLoader containerClassName="inline-block" className="w-32" />
         ) : (
           <>
+            <span className="sr-only">{tCommon("balance")}</span>
             <span className="font-medium">{balanceParts[0]}</span>
             <span>&nbsp;{balanceParts[1]}</span>
           </>

src/app/components/Header/index.tsx

@@ -9,7 +9,9 @@ function Header({ children, headerLeft, headerRight }: Props) {
     <div className="bg-white py-[6px] 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 tabIndex={0} className="text-lg font-medium dark:text-white">
+          {children}
+        </h1>
         <div className="w-8 h-8">{headerRight}</div>
       </div>
     </div>

src/app/components/PublisherCard/index.tsx

@@ -29,6 +29,7 @@ export default function PublisherCard({
   }
   return (
     <div
+      tabIndex={0}
       className={classNames(
         isSmall ? "p-2" : "flex-col justify-center p-4",
         isCard && "drop-shadow rounded-lg mt-4",

src/app/components/ResultCard/index.tsx

@@ -5,7 +5,10 @@ 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
+      tabIndex={0}
+      className="p-12 font-medium drop-shadow rounded-lg mt-4 flex flex-col items-center bg-white dark:bg-surface-02dp"
+    >
       <img
         src={isSuccess ? "assets/icons/tick.svg" : "assets/icons/cross.svg"}
         alt={isSuccess ? "success" : "failure"}

src/app/components/ScreenHeader/index.tsx

@@ -4,7 +4,10 @@ type Props = {
 
 function ScreenHeader({ title }: Props) {
   return (
-    <div className="text-center text-lg font-semibold dark:text-white py-2 border-b border-gray-200 dark:border-neutral-700">
+    <div
+      tabIndex={0}
+      className="text-center text-lg font-semibold dark:text-white py-2 border-b border-gray-200 dark:border-neutral-700"
+    >
       {title}
     </div>
   );

src/app/components/TransactionsTable/TransactionModal.tsx

@@ -54,7 +54,7 @@ export default function TransactionModal({
       contentLabel={"Transactions"}
       position="top"
     >
-      <div className="p-3 flex flex-col gap-4 justify-center ">
+      <div className="p-3 flex flex-col gap-4 justify-center caret-transparent">
         <div>
           <div className="flex items-center justify-center">
             {getTransactionType(transaction) == "outgoing" ? (

src/app/components/TransactionsTable/index.tsx

@@ -54,6 +54,7 @@ export default function TransactionsTable({
 
             return (
               <div
+                tabIndex={0}
                 key={tx.id}
                 className="-mx-2 px-2 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
                 onClick={() => openDetails(tx)}

src/app/components/UserMenu/index.tsx

@@ -46,6 +46,9 @@ export default function UserMenu() {
         <MenuIcon className="h-6 w-6" />
       </Menu.Button>
       <Menu.List position="left">
+        <Menu.Item>
+          <span className="sr-only">{tCommon("arrowkeys")}</span>
+        </Menu.Item>
         <div className="lg:hidden">
           <Menu.ItemButton
             onClick={() => {

src/app/screens/Home/DefaultView/index.tsx

@@ -4,7 +4,7 @@ import Loading from "@components/Loading";
 import TransactionsTable from "@components/TransactionsTable";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { FC, useEffect, useState } from "react";
+import { FC, KeyboardEvent, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import BalanceBox from "~/app/components/BalanceBox";
@@ -89,7 +89,7 @@ const DefaultView: FC<Props> = (props) => {
   }
 
   return (
-    <div className="w-full max-w-screen-sm h-full mx-auto overflow-y-auto no-scrollbar">
+    <div className="w-full max-w-screen-sm h-full mx-auto overflow-y-auto no-scrollbar caret-transparent">
       {props.renderPublisherWidget && !!props.lnDataFromCurrentTab?.length && (
         <PublisherLnData lnData={props.lnDataFromCurrentTab[0]} />
       )}
@@ -171,7 +171,15 @@ const DefaultView: FC<Props> = (props) => {
             />
 
             {!isLoading && transactions.length > 0 && (
-              <div className="text-center">
+              <div
+                tabIndex={0}
+                className="text-center"
+                onKeyDown={(e: KeyboardEvent) => {
+                  if (e.key === "Enter") {
+                    handleViewAllLink("/transactions");
+                  }
+                }}
+              >
                 <Hyperlink
                   onClick={() => handleViewAllLink("/transactions")}
                   className="flex justify-center items-center mt-2"

src/app/screens/LNURLPay/index.tsx

@@ -340,7 +340,10 @@ function LNURLPay() {
             })}
           />
           {isMessage && (
-            <dl className="shadow bg-white dark:bg-surface-02dp mt-4 pt-4 px-4 rounded-lg mb-6 overflow-hidden">
+            <dl
+              tabIndex={0}
+              className="shadow bg-white dark:bg-surface-02dp mt-4 pt-4 px-4 rounded-lg mb-6 overflow-hidden"
+            >
               {descriptionList.map(([dt, dd]) => (
                 <>
                   <Dt>{dt}</Dt>

src/app/screens/Receive/index.tsx

@@ -70,7 +70,7 @@ function Receive() {
               <div className="bg-white dark:bg-surface-01dp border-gray-200 dark:border-neutral-700 rounded border p-4 flex flex-col justify-center items-center gap-1 text-gray-800 dark:text-neutral-200">
                 <>
                   <div className="relative flex flex-grid">
-                    <div className="w-32 h-32 md:w-48 md:h-48">
+                    <div tabIndex={0} className="w-32 h-32 md:w-48 md:h-48">
                       {loadingLightningAddress ? (
                         <SkeletonLoader className="w-32 h-32 relative -top-1" />
                       ) : (

src/app/screens/ReceiveInvoice/index.tsx

@@ -142,7 +142,11 @@ function ReceiveInvoice() {
         {!paid && (
           <>
             <div className="mt-4 flex justify-center items-center">
-              <div className="bg-white dark:bg-surface-01dp border-gray-200 dark:border-neutral-700  p-4 rounded-md border max-w-md">
+              <div
+                tabIndex={0}
+                className="bg-white dark:bg-surface-01dp border-gray-200 dark:border-neutral-700  p-4 rounded-md border max-w-md"
+              >
+                <span className="sr-only">{t("qrcode_invoice")}</span>
                 <QRCode
                   value={invoice.paymentRequest.toUpperCase()}
                   size={512}

src/i18n/locales/en/translation.json

@@ -757,6 +757,7 @@
         "placeholder": "For e.g. who is sending this payment?"
       },
       "success": "Payment received!",
+      "qrcode_invoice": "QR code with invoice",
       "payment": {
         "waiting": "waiting for payment...",
         "status": "Check payment status"
@@ -1020,6 +1021,7 @@
     "or": "or",
     "website": "Website",
     "apps": "Apps",
+    "arrowkeys": "Use arrowkeys to traverse items",
     "actions": {
       "back": "Back",
       "delete": "Delete",