none
Bing Maps AJAX Control V7.0(20160525132934.57) Radio Button Keyboard Accessibility Issue RRS feed

  • Question

  • Recently our application's radio buttons stopped working when trying to select values via the keyboard arrow keys. 

    I eventually tracked it down to the initialisation of the Bing Maps AJAX Control V7.0(20160525132934.57) which appears to be using the keyboard input for panning right/left/up/down. This appears to be getting trapped globally and there is no longer any radio button keyboard selections working - even if the Map component itself is hidden.

    There is a work around, which is to specify disableKeyboardInput: true in the MapOptions when initialising the Map but is arguably a loss of functionality for the mapping component.

    Below is a working code example of the issue, update the variable "creds" with the correct credentials in order for it to work.

    Here you can:

    1. Start by giving focus to the radio buttons and use the arrow keys to select items
    2. Click "Init Map" and the Map should initialise and appear
    3. Give focus back to the radio buttons and the keyboard navigation/selection no longer works - note the Map is panning
    4. Click the Dispose Map button - note that the radio selection works again 
    5. Click the Init Map (No Keyboard Input) button and repeat above, but the selection works correctly.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script charset="UTF-8" type="text/javascript"
                src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
        </script>
        <script type="text/javascript">
            var map;
            var creds = "your credentials here"; 
            function initMap() {
                if (map) {
                    disposeMap();
                }
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: creds});
            }
    
            function initMapNoKeyboardInput() {
                if (map) {
                    disposeMap();
                }
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                    credentials: creds,
                    disableKeyboardInput: true
                });
            }
    
            function disposeMap() {
                map.dispose();
            }
    
        </script>
    </head>
    <body>
    
    <input type="radio" name="testGroup" id="radio1"/><label for="radio1">One</label>
    <input type="radio" name="testGroup" id="radio2"/><label for="radio2">Two</label>
    <input type="radio" name="testGroup" id="radio3"/><label for="radio3">Three</label>
    <input type="radio" name="testGroup" id="radio4"/><label for="radio4">Four</label>
    
    <input type="button" value="Init Map" onclick="initMap()"/>
    <input type="button" value="Dispose Map" onclick="disposeMap()"/>
    <input type="button" value="Init Map (No Keyboard Input)" onclick="initMapNoKeyboardInput()"/>
    
    <div id='mapDiv' style="; width:400px; height:400px;"></div>
    
    
    </body>
    </html>

    This appears to be a recent change. I assume this is a bug?

    Any thoughts/help is appreciated.

    Thanks


    Tuesday, June 14, 2016 11:54 AM

Answers

  • The V7 map control hasn't been updated in years, so if something did break due to a change it is likely not a change in the map control, possibly a change in a browser update that broke this feature. That said, I believe this has always been the way the map worked and disabling the keyboard input is something others have done before.

    Note that it is unlikely this behavior will change in V7 now that it has been replaced by V8. Note that this issue does not occur in the V8 map control. To test this, simply change the map script URL in your sample to "http://bing.com/api/maps/mapcontrol"


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 14, 2016 3:36 PM

All replies

  • The V7 map control hasn't been updated in years, so if something did break due to a change it is likely not a change in the map control, possibly a change in a browser update that broke this feature. That said, I believe this has always been the way the map worked and disabling the keyboard input is something others have done before.

    Note that it is unlikely this behavior will change in V7 now that it has been replaced by V8. Note that this issue does not occur in the V8 map control. To test this, simply change the map script URL in your sample to "http://bing.com/api/maps/mapcontrol"


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 14, 2016 3:36 PM
  • Thank you for the reply.

    This appears to have been working fine in all browsers until recently, including IE11, without disabling the keyboard panning.

    The loader URI returned is 7.0.20160525132934.57, which would indicate a build date of 2016-05-25.

    Are you certain there have been no changes?

    Wednesday, June 15, 2016 8:56 AM