Merge pull request #1435 from hypothesis/revert-toggle-button-a11y

Revert "Improve accessability for toggle buttons"

src/annotator/plugin/toolbar.coffee

@@ -6,7 +6,6 @@ makeButton = (item) ->
   .attr('href', '')
   .attr('title', item.title)
   .attr('name', item.name)
-  .attr('aria-pressed', item.ariaPressed)
   .on(item.on)
   .addClass('annotator-frame-button')
   .addClass(item.class)
@@ -28,15 +27,6 @@ module.exports = class Toolbar extends Plugin
     else
       $(@element).append @toolbar
 
-    # https://h.readthedocs.io/projects/client/en/latest/publishers/config/?highlight=onLoginRequest#cmdoption-arg-showhighlights
-    highlightsAreVisible = true; # default to on
-    showHighlightsConfig = window.hypothesisConfig().showHighlights;
-    
-    if showHighlightsConfig == 'always' || showHighlightsConfig == true 
-      highlightsAreVisible = true
-    else if showHighlightsConfig == false || showHighlightsConfig == 'never'
-      highlightsAreVisible = false
-
     items = [
       "title": "Close Sidebar"
       "class": "annotator-frame-button--sidebar_close h-icon-close"
@@ -49,7 +39,6 @@ module.exports = class Toolbar extends Plugin
           @toolbar.find('[name=sidebar-close]').hide();
     ,
       "title": "Toggle or Resize Sidebar"
-      "ariaPressed": !!window.hypothesisConfig().openSidebar
       "class": "annotator-frame-button--sidebar_toggle h-icon-chevron-left"
       "name": "sidebar-toggle"
       "on":
@@ -59,15 +48,12 @@ module.exports = class Toolbar extends Plugin
           collapsed = @annotator.frame.hasClass('annotator-collapsed')
           if collapsed
             @annotator.show()
-            event.target.setAttribute('aria-pressed', true);
           else
             @annotator.hide()
-            event.target.setAttribute('aria-pressed', false);
     ,
-      "title": "Toggle Highlights Visibility"
-      "class": if highlightsAreVisible then 'h-icon-visibility' else 'h-icon-visibility-off'
+      "title": "Hide Highlights"
+      "class": "h-icon-visibility"
       "name": "highlight-visibility"
-      "ariaPressed": highlightsAreVisible
       "on":
         "click": (event) =>
           event.preventDefault()
@@ -101,12 +87,12 @@ module.exports = class Toolbar extends Plugin
       $('[name=highlight-visibility]')
       .removeClass('h-icon-visibility-off')
       .addClass('h-icon-visibility')
-      .attr('aria-pressed', 'true')
+      .prop('title', 'Hide Highlights');
     else
       $('[name=highlight-visibility]')
       .removeClass('h-icon-visibility')
       .addClass('h-icon-visibility-off')
-      .attr('aria-pressed', 'false')
+      .prop('title', 'Show Highlights');
 
   disableMinimizeBtn: () ->
     $('[name=sidebar-toggle]').remove();

src/styles/annotator/annotator.scss

@@ -107,7 +107,7 @@ $base-font-size: 14px;
   }
 
   .annotator-frame-button {
-    transition: background-color 0.25s;
+    transition: background-color 0.25s 0.25s;
     @include smallshadow;
     background: $white;
     border: solid 1px $gray-lighter;
@@ -121,6 +121,7 @@ $base-font-size: 14px;
     margin-bottom: 5px;
 
     &:active {
+      transition: background-color 0.25s;
       background-color: $gray-light;
     }