feat: add labels to the elements in the receive screens

getAlby · Sep 17, 2023 · e61cf7c · e61cf7c
1 parent d903735
commit e61cf7c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -17,6 +17,13 @@ export function IconLinkCard({
     <div
       className="shadow rounded-md p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
       onClick={onClick}
+      tabIndex={0}
+      aria-label={title}
+      onKeyUp={(e) => {
+        if (e.key === "Enter") {
+          onClick();
+        }
+      }}
     >
       <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
       <div className="flex-grow">

diff --git a/src/app/components/QRCode/index.tsx b/src/app/components/QRCode/index.tsx
@@ -5,9 +5,10 @@ export type Props = {
   value: string;
   size?: number;
   className?: string;
+  label?: string;
 };
 
-export default function QRCode({ value, size, className }: Props) {
+export default function QRCode({ value, size, className, label }: Props) {
   const theme = useTheme();
   const fgColor = theme === "dark" ? "#FFFFFF" : "#000000";
   const bgColor = theme === "dark" ? "#000000" : "#FFFFFF";
@@ -20,6 +21,8 @@ export default function QRCode({ value, size, className }: Props) {
       fgColor={fgColor}
       bgColor={bgColor}
       level="M"
+      tabIndex={0}
+      aria-label={label}
     />
   );
 }
diff --git a/src/app/screens/ReceiveInvoice/index.tsx b/src/app/screens/ReceiveInvoice/index.tsx
@@ -143,7 +143,10 @@ function ReceiveInvoice() {
     return (
       <>
         <div className="mt-4 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()} />
+          <QRCode
+            value={invoice.paymentRequest.toUpperCase()}
+            label={"QR code with the invoice"}
+          />
           {paid && (
             <div className="absolute inset-0 flex justify-center items-center bg-white/90">
               <div className="text-center">