Improve `aria-label` on annotation tags

Improve contrast on tags
Fix a bug where the link hover color was not working in some cases

src/sidebar/templates/annotation.html

@@ -58,7 +58,7 @@
        ng-if="(vm.canCollapseBody || vm.state().tags.length) && !vm.editing()">
     <ul class="tag-list" aria-label="Annotation tags">
       <li class="tag-item" ng-repeat="tag in vm.state().tags">
-        <a ng-href="{{vm.tagSearchURL(tag)}}" target="_blank">{{tag}}</a>
+        <a ng-href="{{vm.tagSearchURL(tag)}}" aria-label="Tag: {{tag}}" target="_blank">{{tag}}</a>
       </li>
     </ul>
     <div class="u-stretch"></div>

src/styles/mixins/forms.scss

@@ -102,13 +102,3 @@
     background-color: $color-mine-shaft;
   }
 }
-
-// Tint and shade functions from
-// https://css-tricks.com/snippets/sass/tint-shade-functions
-@function tint($color, $percent) {
-  @return mix(white, $color, $percent);
-}
-
-@function shade($color, $percent) {
-  @return mix(black, $color, $percent);
-}

src/styles/sidebar/components/tags-input.scss

@@ -10,8 +10,9 @@ tags-input {
   }
 
   .tags {
+    display: flex;
+    flex-wrap: wrap;
     @include form-input;
-    @include pie-clearfix;
 
     &.focused {
       @include form-input-focus;
@@ -19,7 +20,6 @@ tags-input {
 
     // Input
     .input {
-      float: left;
       padding: 0.1333em 0;
       outline: none;
       border: none !important;
@@ -35,18 +35,19 @@ tags-input {
 
   .tag-list {
     margin-top: -0.33em; // Absorb the first row of margin-top on the tags.
-    float: left;
+    display: flex;
+    flex-wrap: wrap;
   }
 
   .tag-item {
-    float: left;
     position: relative;
     padding: 0.0769em 1.307em 0.0769em 0.538em;
     margin-top: 0.384em;
     margin-right: 0.384em;
     font-size: 0.866em;
-    color: $button-text-color;
-    border: 1px solid $gray-lighter;
+    color: $grey-6;
+    border: 1px solid $grey-4;
+    background-color: $grey-3;
     border-radius: 2px;
 
     &.selected {
@@ -73,11 +74,12 @@ tags-input {
 }
 
 .tags-read-only {
-  font-size: 0.8461em;
+  font-size: $normal-font-size;
   margin: 0.4545em 0;
 
   .tag-list {
-    @include pie-clearfix;
+    display: flex;
+    flex-wrap: wrap;
     // Margin between bottom of ascent of annotation body and
     // top of tags list should be ~15px
     margin-top: -$layout-h-margin + 10px;
@@ -86,16 +88,15 @@ tags-input {
     margin-bottom: $layout-h-margin - 10px;
 
     .tag-item {
-      float: left;
-      margin-right: 0.4545em;
+      margin: 0 0.4545em 0.4545em 0;
 
       a {
         text-decoration: none;
-        border: 1px solid $gray-lighter;
+        border: 1px solid $grey-3;
         border-radius: 2px;
         padding: 0 0.4545em 0.1818em;
-        color: $gray-light;
-        background: $gray-lightest;
+        color: $grey-6;
+        background: $grey-2;
 
         &:hover,
         &:focus {

src/styles/variables.scss

@@ -46,6 +46,16 @@ $grey-7: #202020;
 $brand: #bd1c2b;
 $highlight: #58cef4;
 
+// Tint and shade functions from
+// https://css-tricks.com/snippets/sass/tint-shade-functions
+@function tint($color, $percent) {
+  @return mix(white, $color, $percent);
+}
+
+@function shade($color, $percent) {
+  @return mix(black, $color, $percent);
+}
+
 @function color-weight($c, $n: 500) {
   @if $n == 50 {
     @return tint($c, 85%);