From f79e2c7de201ed948e827437c18aa96f312a6b51 Mon Sep 17 00:00:00 2001 From: John McLear Date: Fri, 3 Apr 2015 12:29:47 +0100 Subject: final accessibility for Timeslider hopefully --- src/static/js/broadcast_slider.js | 5 +++ src/static/js/pad_editbar.js | 90 ++++++++++++++++++++++----------------- 2 files changed, 57 insertions(+), 38 deletions(-) (limited to 'src/static/js') diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index a1418140..eff20b52 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -290,6 +290,11 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) $(document).keyup(function(e) { + // If focus is on editbar, don't do anything + var target = $(':focus'); + if($(target).parents(".toolbar").length === 1){ + return; + } var code = -1; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index e426824e..e418969e 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -312,47 +312,61 @@ var padeditbar = (function() // If the event is Alt F9 or Escape & we're already in the editbar menu // Send the users focus back to the pad if((evt.keyCode === 120 && evt.altKey) || evt.keyCode === 27){ - // If we're in the editbar already.. - // Close any dropdowns we have open.. - padeditbar.toggleDropDown("none"); - - // Check we're on a pad and not on the timeslider - // Or some other window I haven't thought about! - if(typeof pad === 'undefined') return false; - - // Shift focus away from any drop downs - $(':focus').blur(); // required to do not try to remove! - padeditor.ace.focus(); // Sends focus back to pad - // The above focus doesn't always work in FF, you have to hit enter afterwards - evt.preventDefault(); - } - - // On arrow keys go to next/previous button item in editbar - if(evt.keyCode !== 39 && evt.keyCode !== 37) return; - - // Get all the focusable items in the editbar - var focusItems = $('#editbar').find('button, select'); - - // On left arrow move to next button in editbar - if(evt.keyCode === 37){ - // If a dropdown is visible or we're in an input don't move to the next button - if($('.popup').is(":visible") || evt.target.localName === "input") return; - - editbarPosition--; - // Allow focus to shift back to end of row and start of row - if(editbarPosition === -1) editbarPosition = focusItems.length -1; - $(focusItems[editbarPosition]).focus() + if($(':focus').parents(".toolbar").length === 1){ + // If we're in the editbar already.. + // Close any dropdowns we have open.. + padeditbar.toggleDropDown("none"); + // Check we're on a pad and not on the timeslider + // Or some other window I haven't thought about! + if(typeof pad === 'undefined'){ + // Timeslider probably.. + // Shift focus away from any drop downs + $(':focus').blur(); // required to do not try to remove! + $('#padmain').focus(); // Focus back onto the pad + }else{ + // Shift focus away from any drop downs + $(':focus').blur(); // required to do not try to remove! + padeditor.ace.focus(); // Sends focus back to pad + // The above focus doesn't always work in FF, you have to hit enter afterwards + evt.preventDefault(); + } + }else{ + // Focus on the editbar :) + var firstEditbarElement = parent.parent.$('#editbar').children("ul").first().children().first().children().first().children().first(); + $(this).blur(); + firstEditbarElement.focus(); + evt.preventDefault(); + } } + // Are we in the toolbar?? + if($(':focus').parents(".toolbar").length === 1){ + // On arrow keys go to next/previous button item in editbar + if(evt.keyCode !== 39 && evt.keyCode !== 37) return; + + // Get all the focusable items in the editbar + var focusItems = $('#editbar').find('button, select'); + + // On left arrow move to next button in editbar + if(evt.keyCode === 37){ + // If a dropdown is visible or we're in an input don't move to the next button + if($('.popup').is(":visible") || evt.target.localName === "input") return; + + editbarPosition--; + // Allow focus to shift back to end of row and start of row + if(editbarPosition === -1) editbarPosition = focusItems.length -1; + $(focusItems[editbarPosition]).focus() + } - // On right arrow move to next button in editbar - if(evt.keyCode === 39){ - // If a dropdown is visible or we're in an input don't move to the next button - if($('.popup').is(":visible") || evt.target.localName === "input") return; + // On right arrow move to next button in editbar + if(evt.keyCode === 39){ + // If a dropdown is visible or we're in an input don't move to the next button + if($('.popup').is(":visible") || evt.target.localName === "input") return; - editbarPosition++; - // Allow focus to shift back to end of row and start of row - if(editbarPosition >= focusItems.length) editbarPosition = 0; - $(focusItems[editbarPosition]).focus(); + editbarPosition++; + // Allow focus to shift back to end of row and start of row + if(editbarPosition >= focusItems.length) editbarPosition = 0; + $(focusItems[editbarPosition]).focus(); + } } } -- cgit v1.2.3