Accessibility refactor (#541)

browser-extensions/chrome/contentScript.ts

@@ -37,11 +37,12 @@ window.addEventListener('popstate', () => {
 });
 
 /**
- * Listen for messages from the background script.
+ * Listen for messages from the background script context menu
+ * to open the AliasVault popup on a specific element.
  */
-window.addEventListener('message', (event) => {
-  if (event.data.type === 'OPEN_ALIASVAULT_POPUP') {
-    const elementIdentifier = event.data.elementIdentifier;
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'OPEN_ALIASVAULT_POPUP') {
+    const elementIdentifier = message.elementIdentifier;
     if (elementIdentifier) {
       const target = document.getElementById(elementIdentifier) ||
                     document.getElementsByName(elementIdentifier)[0];
@@ -51,4 +52,6 @@ window.addEventListener('message', (event) => {
       }
     }
   }
+  // Must return true if response is sent asynchronously
+  return true;
 });

browser-extensions/chrome/src/app/pages/CredentialsList.tsx

@@ -165,22 +165,25 @@ const CredentialsList: React.FC = () => {
       ) : (
         <ul className="space-y-2">
           {filteredCredentials.map(cred => (
-            <li key={cred.Id}
-              onClick={() => navigate(`/credentials/${cred.Id}`)}
-              className="p-2 border dark:border-gray-600 rounded flex items-center bg-white dark:bg-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
-              <img
-                src={cred.Logo ? `data:image/x-icon;base64,${Buffer.from(cred.Logo).toString('base64')}` : '/assets/images/service-placeholder.webp'}
-                alt={cred.ServiceName}
-                className="w-8 h-8 mr-2 flex-shrink-0"
-                onError={(e) => {
-                  const target = e.target as HTMLImageElement;
-                  target.src = '/assets/images/service-placeholder.webp';
-                }}
-              />
-              <div>
-                <p className="font-medium text-gray-900 dark:text-white">{cred.ServiceName}</p>
-                <p className="text-sm text-gray-600 dark:text-gray-400">{cred.Username}</p>
-              </div>
+            <li key={cred.Id}>
+              <button
+                onClick={() => navigate(`/credentials/${cred.Id}`)}
+                className="w-full p-2 border dark:border-gray-600 rounded flex items-center bg-white dark:bg-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <img
+                  src={cred.Logo ? `data:image/x-icon;base64,${Buffer.from(cred.Logo).toString('base64')}` : '/assets/images/service-placeholder.webp'}
+                  alt={cred.ServiceName}
+                  className="w-8 h-8 mr-2 flex-shrink-0"
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement;
+                    target.src = '/assets/images/service-placeholder.webp';
+                  }}
+                />
+                <div className="text-left">
+                  <p className="font-medium text-gray-900 dark:text-white">{cred.ServiceName}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">{cred.Username}</p>
+                </div>
+              </button>
             </li>
           ))}
         </ul>

browser-extensions/chrome/src/background/ContextMenu.ts

@@ -56,9 +56,19 @@ export function handleContextMenuClick(info: chrome.contextMenus.OnClickData, ta
   }
 
   if (info.menuItemId === "aliasvault-activate-form" && tab?.id) {
+    // First get the active element's identifier
     chrome.scripting.executeScript({
       target: { tabId: tab.id },
-      func: activateAliasVaultForm,
+      func: getActiveElementIdentifier,
+    }, (results) => {
+      const elementIdentifier = results[0]?.result;
+      if (elementIdentifier) {
+        // Then send message to content script
+        chrome.tabs.sendMessage(tab.id, {
+          type: 'OPEN_ALIASVAULT_POPUP',
+          elementIdentifier
+        });
+      }
     });
   }
 }
@@ -96,16 +106,10 @@ function copyPasswordToClipboard(generatedPassword: string) : void {
 /**
  * Activate AliasVault for the active input element.
  */
-function activateAliasVaultForm() : void {
+function getActiveElementIdentifier() : string {
   const target = document.activeElement;
   if (target instanceof HTMLInputElement) {
-    // Get the element's identifier (id or name)
-    const elementIdentifier = target.id || target.name || '';
-    if (elementIdentifier) {
-      window.postMessage({
-        type: 'OPEN_ALIASVAULT_POPUP',
-        elementIdentifier
-      }, '*');
-    }
+    return target.id || target.name || '';
   }
+  return '';
 }