Set html structure to ul/li. Set roles.

The snippets are a `menubar` in terms of role, and is a list of items (`menitem`, `li`).

Note for myself:  submenus are `menu` roles that immediately follow their triggering `menuitem` and are direct children of the parent `menu`, per WCAG.  This is done in this commit.

client/components/dropdown/dropdown.jsx

@@ -92,7 +92,7 @@ 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(' ')}
@@ -105,7 +105,7 @@ 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'
@@ -114,9 +114,9 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 					onClick={handleMenuActionClick}
 				>
 					{children}
-				</div>
+				</ul>
 			</MenuDepthContext.Provider>
-		</div>
+		</li>
 	);
 };