Use `LabeledButton` in AdderToolbar

Use `LabeledButton` instead of a `<button>` element in AdderToolbar
buttons, and extract pattern to `frontend-shared` SASS module.

src/annotator/components/AdderToolbar.js

 import classnames from 'classnames';
-import { SvgIcon } from '@hypothesis/frontend-shared';
+import { LabeledButton, SvgIcon } from '@hypothesis/frontend-shared';
 
 import { useShortcut } from '../../shared/shortcut';
 
@@ -17,18 +17,17 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) {
   const title = shortcut ? `${label} (${shortcut})` : label;
 
   return (
-    <button
-      className="AdderToolbar__button"
+    <LabeledButton
+      classes="LabeledIconButton AdderToolbar__button"
+      icon={icon}
       onClick={onClick}
-      aria-label={title}
       title={title}
     >
-      {icon && <SvgIcon name={icon} className="AdderToolbar__icon" />}
       {typeof badgeCount === 'number' && (
         <span className="AdderToolbar__badge">{badgeCount}</span>
       )}
-      <span className="AdderToolbar__label">{label}</span>
-    </button>
+      <span className="LabeledIconButton__label">{label}</span>
+    </LabeledButton>
   );
 }
 

src/styles/annotator/components/AdderToolbar.scss

@@ -79,23 +79,6 @@ $adder-transition-duration: 80ms;
   @include layout.row;
 }
 
-.AdderToolbar__button {
-  @include layout.column($align: center);
-  @include buttons.reset;
-
-  cursor: pointer;
-  color: var.$grey-mid;
-  font-size: var.$annotator-adder-font-size;
-  line-height: var.$annotator-adder-line-height;
-  padding: var.$layout-space--small;
-  transition: color $adder-transition-duration;
-}
-
-.AdderToolbar__label {
-  margin-top: var.$layout-space--xxsmall;
-  transition: color $adder-transition-duration;
-}
-
 .AdderToolbar__badge {
   // The badge should be vertically aligned with icons in other toolbar buttons
   // and the label underneath should also align with labels in other buttons.
@@ -103,7 +86,7 @@ $adder-transition-duration: 80ms;
   border-radius: var.$annotator-border-radius;
   color: var.$color-text--inverted;
   font-weight: bold;
-  // For positioning the number appropriately withint the badge background
+  // For positioning the number appropriately within the badge background
   padding: 2px 4px;
 }
 

src/styles/frontend-shared.scss

@@ -33,6 +33,32 @@
   }
 }
 
+// Used in the AdderToolbar, a transparent button that has an icon and a small
+// label below the icon
+.LabeledIconButton {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  &:hover:not([disabled]) {
+    background-color: transparent;
+  }
+
+  cursor: pointer;
+  font-weight: normal;
+  font-size: var.$annotator-adder-font-size;
+  line-height: var.$annotator-adder-line-height;
+  padding: var.$layout-space--small;
+  transition: color 80ms;
+  background: transparent;
+
+  &__label {
+    margin-top: var.$layout-space--xxsmall;
+    transition: color 80ms;
+  }
+}
+
 // Override any background color on a LabeledButton
 .TransparentButton {
   background-color: transparent;