More aria

taken from the basic example in https://mui.com/material-ui/react-menu/

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -37,6 +37,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { fileInfoExifForFile } from "./data-source";
 import {
     FileViewerPhotoSwipe,
+    moreButtonID,
+    moreMenuID,
+    resetMoreMenuButtonOnMenuClose,
     type FileViewerAnnotatedFile,
     type FileViewerFileAnnotation,
     type FileViewerPhotoSwipeDelegate,
@@ -279,10 +282,12 @@ const FileViewer: React.FC<FileViewerProps> = ({
         [],
     );
 
-    const handleMoreMenuClose = useCallback(
-        () => setMoreMenuAnchorEl(null),
-        [],
-    );
+    const handleMoreMenuClose = useCallback(() => {
+        setMoreMenuAnchorEl((el) => {
+            resetMoreMenuButtonOnMenuClose(el);
+            return null;
+        });
+    }, []);
 
     const handleEditImage = useMemo(() => {
         return onSaveEditedImageCopy
@@ -407,10 +412,9 @@ const FileViewer: React.FC<FileViewerProps> = ({
                 open={!!moreMenuAnchorEl}
                 onClose={handleMoreMenuClose}
                 anchorEl={moreMenuAnchorEl}
+                id={moreMenuID}
                 slotProps={{
-                    list: {
-                        "aria-labelledby": moreMenuAnchorEl?.id,
-                    },
+                    list: { "aria-labelledby": moreButtonID },
                 }}
             >
                 Test

web/packages/gallery/components/viewer/photoswipe.ts

@@ -165,6 +165,21 @@ export interface FileViewerAnnotatedFile {
     annotation: FileViewerFileAnnotation;
 }
 
+/**
+ * The ID that is used by the "more" action button (if one is being displayed).
+ *
+ * @see also {@link moreMenuID}.
+ */
+export const moreButtonID = "ente-pswp-more-button";
+
+/**
+ * The ID this is expected to be used by the more menu that is shown in response
+ * to the more action button being activated.
+ *
+ * @see also {@link moreButtonID}.
+ */
+export const moreMenuID = "ente-pswp-more-menu";
+
 /**
  * A wrapper over {@link PhotoSwipe} to tailor its interface for use by our file
  * viewer.
@@ -616,9 +631,16 @@ export class FileViewerPhotoSwipe {
                 order: 17,
                 isButton: true,
                 html: createPSRegisterElementIconHTML("more"),
-                onClick: (e) => onMore(currentAnnotatedFile(), e.target),
                 onInit: (buttonElement) => {
-                    buttonElement.id = "ente-pswp-show-more";
+                    buttonElement.setAttribute("id", moreButtonID);
+                    buttonElement.setAttribute("aria-haspopup", "true");
+                },
+                onClick: (e) => {
+                    const buttonElement = e.target;
+                    // See also: `resetMoreMenuButtonOnMenuClose`.
+                    buttonElement.setAttribute("aria-controls", moreMenuID);
+                    buttonElement.setAttribute("aria-expanded", true);
+                    onMore(currentAnnotatedFile(), buttonElement);
                 },
             });
         });
@@ -740,3 +762,12 @@ const createElementFromHTMLString = (htmlString: string) => {
     template.innerHTML = htmlString.trim();
     return template.content.firstChild;
 };
+
+/**
+ * Update the ARIA attributes for the button that controls the more menu when
+ * the menu is closed.
+ */
+export const resetMoreMenuButtonOnMenuClose = (buttonElement: HTMLElement) => {
+    buttonElement.removeAttribute("aria-controls");
+    buttonElement.removeAttribute("aria-expanded");
+};