Merge pull request #1382 from hypothesis/aria-sidebar-state

Improve accessability for toggle buttons

src/annotator/plugin/toolbar.coffee

@@ -6,6 +6,7 @@ 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)
@@ -26,6 +27,15 @@ module.exports = class Toolbar extends Plugin
       $(@options.container).append @toolbar
     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"
@@ -39,6 +49,7 @@ 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":
@@ -48,12 +59,15 @@ 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": "Hide Highlights"
-      "class": "h-icon-visibility"
+      "title": "Toggle Highlights Visibility"
+      "class": if highlightsAreVisible then 'h-icon-visibility' else 'h-icon-visibility-off'
       "name": "highlight-visibility"
+      "ariaPressed": highlightsAreVisible
       "on":
         "click": (event) =>
           event.preventDefault()
@@ -87,12 +101,12 @@ module.exports = class Toolbar extends Plugin
       $('[name=highlight-visibility]')
       .removeClass('h-icon-visibility-off')
       .addClass('h-icon-visibility')
-      .prop('title', 'Hide Highlights');
+      .attr('aria-pressed', 'true')
     else
       $('[name=highlight-visibility]')
       .removeClass('h-icon-visibility')
       .addClass('h-icon-visibility-off')
-      .prop('title', 'Show Highlights');
+      .attr('aria-pressed', 'false')
 
   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 0.25s;
+    transition: background-color 0.25s;
     @include smallshadow;
     background: $white;
     border: solid 1px $gray-lighter;
@@ -121,7 +121,6 @@ $base-font-size: 14px;
     margin-bottom: 5px;
 
     &:active {
-      transition: background-color 0.25s;
       background-color: $gray-light;
     }