Commit d7acf2f3 authored by Robert Knight's avatar Robert Knight

Revert "Improve accessability for toggle buttons"

This reverts commit ab3d902f.

This change caused the client to fail to load on pages where
`window.hypothesisConfig` is not defined.
parent 9a72639b
...@@ -6,7 +6,6 @@ makeButton = (item) -> ...@@ -6,7 +6,6 @@ makeButton = (item) ->
.attr('href', '') .attr('href', '')
.attr('title', item.title) .attr('title', item.title)
.attr('name', item.name) .attr('name', item.name)
.attr('aria-pressed', item.ariaPressed)
.on(item.on) .on(item.on)
.addClass('annotator-frame-button') .addClass('annotator-frame-button')
.addClass(item.class) .addClass(item.class)
...@@ -27,15 +26,6 @@ module.exports = class Toolbar extends Plugin ...@@ -27,15 +26,6 @@ module.exports = class Toolbar extends Plugin
$(@options.container).append @toolbar $(@options.container).append @toolbar
else else
$(@element).append @toolbar $(@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 = [ items = [
"title": "Close Sidebar" "title": "Close Sidebar"
...@@ -49,7 +39,6 @@ module.exports = class Toolbar extends Plugin ...@@ -49,7 +39,6 @@ module.exports = class Toolbar extends Plugin
@toolbar.find('[name=sidebar-close]').hide(); @toolbar.find('[name=sidebar-close]').hide();
, ,
"title": "Toggle or Resize Sidebar" "title": "Toggle or Resize Sidebar"
"ariaPressed": !!window.hypothesisConfig().openSidebar
"class": "annotator-frame-button--sidebar_toggle h-icon-chevron-left" "class": "annotator-frame-button--sidebar_toggle h-icon-chevron-left"
"name": "sidebar-toggle" "name": "sidebar-toggle"
"on": "on":
...@@ -59,15 +48,12 @@ module.exports = class Toolbar extends Plugin ...@@ -59,15 +48,12 @@ module.exports = class Toolbar extends Plugin
collapsed = @annotator.frame.hasClass('annotator-collapsed') collapsed = @annotator.frame.hasClass('annotator-collapsed')
if collapsed if collapsed
@annotator.show() @annotator.show()
event.target.setAttribute('aria-pressed', true);
else else
@annotator.hide() @annotator.hide()
event.target.setAttribute('aria-pressed', false);
, ,
"title": "Toggle Highlights Visibility" "title": "Hide Highlights"
"class": if highlightsAreVisible then 'h-icon-visibility' else 'h-icon-visibility-off' "class": "h-icon-visibility"
"name": "highlight-visibility" "name": "highlight-visibility"
"ariaPressed": highlightsAreVisible
"on": "on":
"click": (event) => "click": (event) =>
event.preventDefault() event.preventDefault()
...@@ -101,12 +87,12 @@ module.exports = class Toolbar extends Plugin ...@@ -101,12 +87,12 @@ module.exports = class Toolbar extends Plugin
$('[name=highlight-visibility]') $('[name=highlight-visibility]')
.removeClass('h-icon-visibility-off') .removeClass('h-icon-visibility-off')
.addClass('h-icon-visibility') .addClass('h-icon-visibility')
.attr('aria-pressed', 'true') .prop('title', 'Hide Highlights');
else else
$('[name=highlight-visibility]') $('[name=highlight-visibility]')
.removeClass('h-icon-visibility') .removeClass('h-icon-visibility')
.addClass('h-icon-visibility-off') .addClass('h-icon-visibility-off')
.attr('aria-pressed', 'false') .prop('title', 'Show Highlights');
disableMinimizeBtn: () -> disableMinimizeBtn: () ->
$('[name=sidebar-toggle]').remove(); $('[name=sidebar-toggle]').remove();
......
...@@ -107,7 +107,7 @@ $base-font-size: 14px; ...@@ -107,7 +107,7 @@ $base-font-size: 14px;
} }
.annotator-frame-button { .annotator-frame-button {
transition: background-color 0.25s; transition: background-color 0.25s 0.25s;
@include smallshadow; @include smallshadow;
background: $white; background: $white;
border: solid 1px $gray-lighter; border: solid 1px $gray-lighter;
...@@ -121,6 +121,7 @@ $base-font-size: 14px; ...@@ -121,6 +121,7 @@ $base-font-size: 14px;
margin-bottom: 5px; margin-bottom: 5px;
&:active { &:active {
transition: background-color 0.25s;
background-color: $gray-light; background-color: $gray-light;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment