From f863ee9e37df85bdcdc39db64f3232be3ba1803a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 12 Sep 2013 15:23:02 +0200 Subject: [PATCH 1/3] Attach key handler to map target --- src/ol/map.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/ol/map.js b/src/ol/map.js index d19a1c1655..2c4e9786b0 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -240,11 +240,14 @@ ol.Map = function(options) { this.handleMapBrowserEvent, false, this); this.registerDisposable(mapBrowserEventHandler); - // FIXME we probably shouldn't listen on document... - var keyHandler = new goog.events.KeyHandler(goog.global.document); - goog.events.listen(keyHandler, goog.events.KeyHandler.EventType.KEY, + /** + * @private + * @type {goog.events.KeyHandler} + */ + this.keyHandler_ = new goog.events.KeyHandler(); + goog.events.listen(this.keyHandler_, goog.events.KeyHandler.EventType.KEY, this.handleBrowserEvent, false, this); - this.registerDisposable(keyHandler); + this.registerDisposable(this.keyHandler_); var mouseWheelHandler = new goog.events.MouseWheelHandler(this.viewport_); goog.events.listen(mouseWheelHandler, @@ -745,11 +748,19 @@ ol.Map.prototype.handleTargetChanged_ = function() { var targetElement = goog.isDef(target) ? goog.dom.getElement(target) : null; + this.keyHandler_.detach(); + if (goog.isNull(targetElement)) { goog.dom.removeNode(this.viewport_); } else { goog.dom.appendChild(targetElement, this.viewport_); + + // The key handler is attached to the user-provided target. So the key + // handler will only trigger events when the target element is focused + // (requiring that the target element has a tabindex attribute). + this.keyHandler_.attach(targetElement); } + this.updateSize(); // updateSize calls setSize, so no need to call this.render // ourselves here. From b81a4e875b2213fc21478cf84827bafe0d6e515a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 16 Sep 2013 22:44:18 +0200 Subject: [PATCH 2/3] Remove noModifierKeys condition for keyboad zoom Refs #917. With the key hanler now attached to the map target by default we can remove the noModifierKeys condition for the keyboard zoom interaction. This will prevent the back button shortcut (alt + ) to work, but it's ok, the map is focused so it's the one with the highest priority. --- src/ol/interaction/keyboardzoominteraction.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/ol/interaction/keyboardzoominteraction.js b/src/ol/interaction/keyboardzoominteraction.js index 59efe8d761..ee701704af 100644 --- a/src/ol/interaction/keyboardzoominteraction.js +++ b/src/ol/interaction/keyboardzoominteraction.js @@ -33,8 +33,7 @@ ol.interaction.KeyboardZoom = function(opt_options) { * @type {ol.interaction.ConditionType} */ this.condition_ = goog.isDef(options.condition) ? options.condition : - goog.functions.and(ol.interaction.condition.noModifierKeys, - ol.interaction.condition.targetNotEditable); + ol.interaction.condition.targetNotEditable; /** * @private From aa5214d3a1542e1721ff54369f99ba0812100c4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 16 Sep 2013 22:48:46 +0200 Subject: [PATCH 3/3] Add an "accessible" example --- examples/accessible.html | 66 ++++++++++++++++++++++++++++++++++++++++ examples/accessible.js | 20 ++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 examples/accessible.html create mode 100644 examples/accessible.js diff --git a/examples/accessible.html b/examples/accessible.html new file mode 100644 index 0000000000..397ddd468f --- /dev/null +++ b/examples/accessible.html @@ -0,0 +1,66 @@ + + + + + + + + + + + Accessibility example + + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+ Go to map +
+ Zoom in + Zoom out +
+
+ +
+ +
+

Accessibility example

+

Example of an accessible map.

+
+

This page's map element has its tabindex attribute set to "0". That makes is focusable. To focus the map element you can either navigate to it using the "tab" key, or use the Access Key "1" (alt+1 or ctrl+alt+1) which provides a direct access. When the map element is focused the + and - keys can be used to zoom in and out, and the arrow keys can be used to pan.

+

When clicked the "Zoom in" and "Zoom out" links below the map zoom the map in and out, respectively. You can navigate to the links using the "tab" key, and press the "enter" key to trigger the zooming action. The Access Keys "i" and "o" can also be used, as a direct access to the actions of "Zoom in" and "Zoom out" links.

+

See the source of the page to see how this done.

+
+
accessibility, tabindex
+
+ +
+ +
+ + + + + + diff --git a/examples/accessible.js b/examples/accessible.js new file mode 100644 index 0000000000..d11dfd2633 --- /dev/null +++ b/examples/accessible.js @@ -0,0 +1,20 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +});