Merge branch 'master' of https://github.com/naturalcrit/homebrewery into add-cm-features

client/components/codeEditor/codeEditor.jsx

@@ -308,7 +308,7 @@ const CodeEditor = forwardRef(
 			view.dispatch({
 				effects : themeCompartment.reconfigure(themeExtension),
 			});
-		}, [editorTheme]);
+		}, [editorTheme, tab]);
 
 		useEffect(()=>{
 			//rebuild syntax highlight when changing tab or renderer

client/components/dropdown/dropdown.jsx

@@ -92,12 +92,13 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	};
 
 	return (
-		<div className={['menu-wrapper', className].join(' ')} role='none' >
+		<li className='menu-wrapper' role='none'>
 			<button
 				id={`${menuId}-trigger`}
 				className={['menu-item', color].join(' ')}
 				popoverTarget={menuId}
 				aria-haspopup='menu'
+				aria-label={groupName}
 				role='menuitem'
 				disabled={!React.Children.count(children)}
 				ref={triggerRef}
@@ -105,18 +106,19 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 				{trigger(groupName, icon)}
 			</button>
 			<MenuDepthContext.Provider value={depth + 1}>
-				<div
+				<ul
 					ref={menuRef}
 					id={menuId}
 					className='menu-list'
 					popover='auto'
 					role='menu'
+					aria-label={`${groupName} Submenu`}
 					onClick={handleMenuActionClick}
 				>
 					{children}
-				</div>
+				</ul>
 			</MenuDepthContext.Provider>
-		</div>
+		</li>
 	);
 };
 

client/components/dropdown/dropdown.less

@@ -1,24 +1,33 @@
-.menu-wrapper {
-	position: relative;
-	&:is(.menu-bar > .menu-section > .menu-wrapper){
-		display: inline-block;
-	}
+@property --menuColor {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #DDD;
 }
 
+@property --activeTriggerColor {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #DDD;
+}
+
+:root{
+	--activeTriggerColor : var(--activeTriggerColor);
+}
 .menu-list {
+	contain          : content;
 	position         : fixed;
-	z-index          : 1000;
 	top              : anchor(bottom);
 	left             : anchor(left);
 	position-try: flip-inline flip-block;
 	color: inherit;   // [popover] gets a `canvastext` color value from useragent.
-	> .menu-wrapper {
-		position:relative;
-		> .menu-list {
+	background: var(--menuColor);
+	li > .menu-list {
 			margin: 0 0px;
 			top  : anchor(top);
 			left : anchor(right);
 			position-try: flip-inline;
 		}
-	}
+}
+.menu-wrapper:has(:popover-open) > button {                        // if menu is open...
+	background-color: var(--activeTriggerColor, hsl(from var(--menuColor) h s calc(l * .85)));  // tint menu triggers based on menu color
 }