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 + }) +}); 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 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.