Render SubMenuItem toggles as buttons rather than <a>

client/src/components/Sidebar/menu/MenuItem.scss

@@ -8,11 +8,14 @@
         @include transition(border-color $menu-transition-duration ease, background-color $menu-transition-duration ease);
         position: relative;
         display: block;
+        width: 100%;
         white-space: nowrap;
         border-left: 3px solid transparent;
 
         -webkit-font-smoothing: auto;
-        text-decoration: none;
+        border: 0;
+        background: transparent;
+        text-align: left;
         color: $color-menu-text;
         padding: 11px 20px;
         font-size: 13px;

client/src/components/Sidebar/menu/SubMenuItem.tsx

@@ -65,8 +65,7 @@ export const SubMenuItem: React.FunctionComponent<SubMenuItemProps> = (
 
   return (
     <li className={className}>
-      <a
-        href="#"
+      <button
         onClick={onClick}
         className={`sidebar-menu-item__link ${item.classNames}`}
         aria-haspopup="true"
@@ -75,7 +74,7 @@ export const SubMenuItem: React.FunctionComponent<SubMenuItemProps> = (
         {item.iconName && <Icon name={item.iconName} className="icon--menuitem" />}
         <span className="menuitem-label">{item.label}</span>
         <Icon className={sidebarTriggerIconClassName} name="arrow-right" />
-      </a>
+      </button>
       <SidebarPanel isVisible={isVisible} isOpen={isOpen} depth={depth}>
         <div className="sidebar-sub-menu-panel">
           <h2 id={`wagtail-sidebar-submenu${path.split('.').join('-')}-title`} className={item.classNames}>