Commit 481fe703 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Do not use `button` element in `Menu` label

Menu labels are already rendered within a `button` element, so they
may not contain a `button` themselves, or else invalid HTML structure
parent 9495bba6
......@@ -2,9 +2,9 @@ import { createElement } from 'preact';
import useStore from '../store/use-store';
import Button from './button';
import Menu from './menu';
import MenuItem from './menu-item';
import SvgIcon from '../../shared/components/svg-icon';
/**
* A drop-down menu of sorting options for a collection of annotations.
......@@ -35,12 +35,9 @@ export default function SortMenu() {
});
const menuLabel = (
<Button
className="top-bar__icon-button"
icon="sort"
title="Sort annotations"
useCompactStyle
/>
<span className="top-bar__menu-label">
<SvgIcon name="sort" className="top-bar__menu-icon" />
</span>
);
return (
......
......@@ -6,10 +6,10 @@ import serviceConfig from '../service-config';
import { isThirdPartyUser } from '../util/account-id';
import { withServices } from '../util/service-context';
import Button from './button';
import Menu from './menu';
import MenuItem from './menu-item';
import MenuSection from './menu-section';
import SvgIcon from '../../shared/components/svg-icon';
/**
* A menu with user and account links.
......@@ -44,12 +44,9 @@ function UserMenu({ auth, bridge, onLogout, serviceUrl, settings }) {
})();
const menuLabel = (
<Button
className="top-bar__icon-button"
icon="profile"
title="User menu"
useCompactStyle
/>
<span className="top-bar__menu-label">
<SvgIcon name="profile" className="top-bar__menu-icon" />
</span>
);
return (
<div className="user-menu">
......
......@@ -17,7 +17,8 @@
// the window is scrolled.
transform: translate3d(0, 0, 0);
&__icon-button {
&__icon-button,
&__menu-icon {
&.is-active {
color: var.$grey-6;
......@@ -34,6 +35,10 @@
color: var.$brand;
}
}
&__menu-label {
padding: 0.25em;
}
}
.top-bar--theme-clean {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment