refactor toggleSubmenu into click handler

Author: jrief

client/admin/MenuBar.tsx

@@ -61,8 +61,8 @@ function ExtraMenu(props) {
 		currentFolderId,
 		copyInodes,
 		clearClipboard,
+		deselectAll,
 	} = props;
-	const extraMenuRef = useRef(null);
 
 	async function addFolder() {
 		const folderName = window.prompt(gettext("Enter folder name"));
@@ -88,23 +88,12 @@ function ExtraMenu(props) {
 		} else {
 			console.error(response);
 		}
-		extraMenuRef.current.toggleSubmenu(false);
-	}
-
-	function uploadLocalFiles(event) {
-		openUploader(false);
-		extraMenuRef.current.toggleSubmenu(false);
-	}
-
-	function uploadLocalFolder(event) {
-		openUploader(true);
-		extraMenuRef.current.toggleSubmenu(false);
 	}
 
 	function downloadSelectedFiles() {
 		const current = columnRefs[currentFolderId].current;
 		downloadFiles(current.inodes.filter(inode => !inode.is_folder && inode.selected));
-		current.deselectinodes();
+		deselectAll();
 	}
 
 	return (
@@ -113,15 +102,14 @@ function ExtraMenu(props) {
 			className="extra-menu"
 			icon={<MoreVerticalIcon/>}
 			tooltip={gettext("Extra options")}
-			ref={extraMenuRef}
 		>
 			<li role="option" onClick={addFolder}>
 				<AddFolderIcon/><span>{gettext("Add new folder")}</span>
 			</li>
-			<li role="option" onClick={uploadLocalFiles}>
+			<li role="option" onClick={() => openUploader(false)}>
 				<UploadIcon/><span>{gettext("Upload local files")}</span>
 			</li>
-			<li role="option" onClick={uploadLocalFolder}>
+			<li role="option" onClick={() => openUploader(true)}>
 				<FolderUploadIcon/><span>{gettext("Upload local folder")}</span>
 			</li>
 			<li role="option" aria-disabled={numSelectedFiles === 0} onClick={downloadSelectedFiles}>
@@ -395,6 +383,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 						numClippedInodes={clipboard.length}
 						copyInodes={copyInodes}
 						clearClipboard={clearClipboard}
+						deselectAll={deselectAll}
 						{...props}
 					/>
 				</>)}

client/common/DropDownMenu.tsx

@@ -1,40 +1,48 @@
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
-import {types} from "sass";
-import Boolean = types.Boolean;
+import React, {useEffect, useRef} from 'react';
 
 
-const DropDownMenu = forwardRef((props: any, forwardedRef)=> {
+export default function DropDownMenu(props){
 	const ref = useRef(null);
 	const Wrapper = props.wrapperElement ?? 'li';
 
 	useEffect(() => {
-		const closeSubmenu = (event) => {
-			if (!ref.current?.parentElement?.contains(event.target)) {
-				ref.current.setAttribute('aria-expanded', 'false');
+		const handleClick = (event) => {
+			const current = ref.current as HTMLElement;
+			let target = event.target;
+			if (!current.contains(target)) {
+				current.setAttribute('aria-expanded', 'false');
+				return;
+			}
+			if (current.ariaExpanded === 'false') {
+				for (let target = event.target; target; target = target.parentElement) {
+					if (target.role === 'listbox') {
+						return;
+					}
+				}
+				current.setAttribute('aria-expanded', 'true');
+			} else {
+				for (let target = event.target; target; target = target.parentElement) {
+					if (target.ariaMultiSelectable) {
+						return;
+					}
+					if (target === current) {
+						current.setAttribute('aria-expanded', 'false');
+						break;
+					}
+				}
 			}
 		};
 		const rootNode = ref.current.getRootNode();
-		rootNode.addEventListener('click', closeSubmenu);
-		return () => rootNode.removeEventListener('click', closeSubmenu);
+		rootNode.addEventListener('click', handleClick);
+		return () => rootNode.removeEventListener('click', handleClick);
 	}, []);
 
-	useImperativeHandle(forwardedRef, () => ({toggleSubmenu}));
-
-	function toggleSubmenu(force?: boolean) {
-		if (force === undefined) {
-			ref.current.setAttribute('aria-expanded', ref.current.ariaExpanded === 'true' ? 'false' : 'true');
-		} else {
-			ref.current.setAttribute('aria-expanded', (!force).toString());
-		}
-	}
-
 	return (
 		<Wrapper
 			ref={ref}
 			role={props.role ? `combobox ${props.role}` : 'combobox'}
 			aria-haspopup="listbox"
 			aria-expanded="false"
-			onClick={() => toggleSubmenu()}
 			className={props.className}
 			data-tooltip-id="django-finder-tooltip"
 			data-tooltip-content={props.tooltip}
@@ -45,7 +53,4 @@ const DropDownMenu = forwardRef((props: any, forwardedRef)=> {
 			</ul>
 		</Wrapper>
 	)
-});
-
-
-export default DropDownMenu;
+}

client/common/FilterByLabel.tsx

@@ -31,7 +31,7 @@ export default function FilterByLabel(props: any) {
 		>
 			<li role="option"><span onClick={() => changeFilter(null)}>{gettext("Clear all")}</span></li>
 			<hr/>{labels.map((label, index) => (
-			<li key={label.value} role="option">
+			<li key={label.value} role="option" aria-multiselectable={true}>
 				<label htmlFor={`filter-${label.value}`}>
 					<input
 						type="checkbox"