A11y Bug Fix: Firestore Delete Document / Delete All Fields from …

…tab focus (#967) * Changed firestore delete document menu selection to use parent onSelect instead of child onClick for a11y * Refactored to use menuItems pattern
firebase · Jul 11, 2023 · 36d1fa7 · 36d1fa7
1 parent 2b5a942
commit 36d1fa7
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/src/components/Firestore/Document.tsx b/src/components/Firestore/Document.tsx
@@ -108,6 +108,8 @@ export const Document: React.FC<
     shouldDelete && setDoc(reference, {});
   };
 
+  const menuItems = ['Delete document', 'Delete all fields'];
+
   return (
     <Doc
       id={reference.id}
@@ -131,11 +133,21 @@ export const Document: React.FC<
         <SimpleMenu
           handle={<IconButton icon="more_vert" label="Menu" />}
           renderToPortal
+          onSelect={(evt) => {
+            switch (menuItems[evt.detail.index]) {
+              case 'Delete document':
+                setDeleteDocumentDialogOpen(true);
+                break;
+
+              case 'Delete all fields':
+                handleDeleteFields();
+                break;
+            }
+          }}
         >
-          <MenuItem onClick={() => setDeleteDocumentDialogOpen(true)}>
-            Delete document
-          </MenuItem>
-          <MenuItem onClick={handleDeleteFields}>Delete all fields</MenuItem>
+          {menuItems.map((menuItemText) => {
+            return <MenuItem>{menuItemText}</MenuItem>;
+          })}
         </SimpleMenu>
       </PanelHeader>