use semantic html tags in finder backend

Author: jrief

client/finder/DropDownMenu.tsx

@@ -23,7 +23,7 @@ export default function DropDownMenu(props) {
 		<Wrapper
 			aria-haspopup="true"
 			onClick={toggleSubmenu}
-			className={`dropdown-menu ${props.className}`}
+			className={props.className}
 			data-tooltip-id="django-finder-tooltip"
 			data-tooltip-content={props.tooltip}
 		>

client/finder/MenuBar.tsx

@@ -207,6 +207,7 @@ function ExtraMenu(props) {
 			<li className={numClippedInodes ? null : "disabled"} onClick={clearClipboard}>
 				<ClipboardIcon/><span>{gettext("Clear clipboard")}</span>
 			</li>
+			{settings.menu_extensions.length && <hr/>}
 			{settings.menu_extensions.map((extension, index) => (
 				<MenuExtension key={index} extension={extension} {...props} />
 			))}
@@ -419,7 +420,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 
 	return (
 		<nav role="menubar">
-			<ul>
+			<menu>
 				<li className="search-field">
 					<SearchField columnRefs={columnRefs} setSearchResult={setSearchResult} settings={settings}/>
 				</li>
@@ -464,7 +465,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 						{...props}
 					/>
 				</>)}
-			</ul>
+			</menu>
 		</nav>
 	);
 });

client/finder/Search.tsx

@@ -1,10 +1,8 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {useCookie} from './Storage';
+import React, {useRef, useState} from 'react';
+import {useSearchRealm} from '../finder/Storage';
 import DropDownMenu from './DropDownMenu';
 import SearchIcon from 'icons/search.svg';
 
-const useSearchRealm = initial => useCookie('django-finder-search-realm', initial);
-
 
 function useSearchParam(key) : [string, (value: string) => any] {
 	const params = new URLSearchParams(window.location.search);
@@ -80,7 +78,14 @@ export function SearchField(props) {
 	}
 
 	return (<>
-		<input ref={searchRef} type="search" defaultValue={searchQuery} placeholder={gettext("Search for …")} onChange={handleSearch} onKeyDown={handleSearch} />
+		<input
+			ref={searchRef}
+			type="search"
+			defaultValue={searchQuery}
+			placeholder={gettext("Search for …")}
+			onChange={handleSearch}
+			onKeyDown={handleSearch}
+		/>
 		<div>
 			<span className="search-icon" onClick={handleSearch}><SearchIcon/></span>
 			<DropDownMenu wrapperElement="span" className="search-realm with-caret" tooltip={gettext("Restrict search")}>
@@ -90,6 +95,7 @@ export function SearchField(props) {
 				<li onClick={() => changeSearchRealm('everywhere')}
 					className={isActive('everywhere')}>{gettext("In all folders")}
 				</li>
+				<hr/>
 				<li onClick={() => changeSearchRealm('filename')}
 					className={isActive('filename')}>{gettext("Filename only")}
 				</li>