Share 'Fun with focus, tabbing and IE' on Delicious Share 'Fun with focus, tabbing and IE' on Facebook Share 'Fun with focus, tabbing and IE' on Google Bookmarks Share 'Fun with focus, tabbing and IE' on Twitter

Article | Published: 4. Februar 2011 | Changed: 15. Dezember 2014 | Category: ActionScript | 5 Comments
  1. The test application
  2. The test results
    1. Firefox: Tab loop ignores Flash movies
    2. IE: Tab loop broken with movies without tab-enabled children
    3. IE: Tab loop correct with movies that contain tab-enabled children
    4. IE: Tab loop stops with the first movie when seamlessTabbing=false
    5. IE: Tab loop stops with the first movie when focus events blocked
    6. IE: Focus moves out of movie even when focus events blocked
    7. IE: Flash loses focus to the browser without any tab-enabled child
    8. IE: Focus stays in movie if default focus is set to the stage
  3. Summary
    1. Workaround 1
    2. Workaround 2
  4. Comments (5)
  5. Leave a Comment

If you ever have tried to create a circular tab loop with native ActionScript you apparently forgot to provide your insights the community. Anyway, I couldn’t find any related, since the web searches coughed up everything to Flash and Flex but not AS.

Well, what is this article about? Implementing a tab loop seems to be pretty easy. We make our compoents to be tab-enabled and are done. Unfortunately, it isn’t that simple. There is a trap we may fall into with the Internet Explorer’s default swf parameter seamlessTabbing. The parameter is described in the Flash Player 7 release notes. It is set to true by default and makes sure that a flash movie appears in the regular tab order of the browser window. If we hit TAB in a swf application, the focus moves either to the next focusable element within the swf or to the next browser element such as a button, link or even the URL bar.

It is actually pretty unclear, under which conditions the focus leaves the movie. To understand the problem, I have written a small test application. In this article I will explain what the keyboard focus in Flash depends on.

The test application

This is a PHP page with a form containing some configuration variables for the embedded movie. The movie appears three times in this page to be able to test the focus of multiple Flash objects. Above and below the movies are HTML buttons that may be clicked to set the focus on and watch the tab loop by hitting TAB repeatedly.

The PHP and ActionScript sources are available on GitHub.

Number of boxes: The number of boxes appearing in the test application.
Number of tab-enabled boxes: The number of appearing boxes that have their tabEnabled property set to true.
Seamless tabbing: SWF object paramter. In IE true by default. Does not have effect to Firefox.
Prevent focus change: If set to true, KEY_FOCUS_CHANGE events are blocked using focusEvent.preventDefault().
Set default focus to stage: If set to true, the test application will focus the stage in any case the focus of a focused object is lost.

You should test the different configuration parameters in at least Firefox and IE.

The test results

Firefox: Tab loop ignores Flash movies

Test: Click one of the buttons above the movies and hit TAB multiple times. Change properties and do it again.

Link: Test 1
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

Note: This is what we expect.

IE: Tab loop broken with movies without tab-enabled children

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 2
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

IE: Tab loop correct with movies that contain tab-enabled children

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 3
Configuration: seamlessTabbing=true, preventDefault=false, focusToStage=false

IE: Tab loop stops with the first movie when seamlessTabbing=false

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 4
Configuration: seamlessTabbing=false, preventDefault=false, focusToStage=false

Note: We would rather expect the loop to ignore the movies.

IE: Tab loop stops with the first movie when focus events blocked

Test: Click one of the buttons above the movies and hit TAB multiple times.

Link: Test 5
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=false

Note: This is the same behavior as with seamlessTabbing=false.

IE: Focus moves out of movie even when focus events blocked

Test: Click the last tab-enabled child of a movie. Then click the movie’s stage or a not tab-enabled child. Hit TAB. The focus leaves the movie.

Link: Test 6
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=false

Note: The focus should actually not move out. Apparently the player stores the last focused item which tab-enabled property is set to true. When we then hit TAB and no item is currently in focus, the player checks, if the stored child has a successor that can be focused. If there is none, it releases the movie focus.

IE: Flash loses focus to the browser without any tab-enabled child

Test: Click into a movie. The movie activates. Hit TAB. The focus moves out.

Link: Test 7
Configuration: seamlessTabbing=true, preventDefault=*, focusToStage=*

Note: To keep the focus in the movie, we at least need one child with tabEnabled set to true.

IE: Focus stays in movie if default focus is set to the stage

Test: Click the last tab-enabled child of a movie. Then click the movie’s stage or a not tab-enabled child. Hit TAB. The focus stays in the movie.

Link: Test 8
Configuration: seamlessTabbing=true, preventDefault=true, focusToStage=true

Summary

Managing the application’s focus could be quite easy if we wouldn’t have to consider the seammless tabbing capabilities of Active-X players. When we develop third party solutions, we simply cannot rely on a property that is set to the embedding HTML container.

Workaround 1

To circumvent the problem we might cancel the KEY_FOCUS_CHANGE event. However, even this does not cover all possible situations. A workaround seems to be to set the stage’s focus to the stage itself in the case the focus is not gained by any child object. Anyway, we need to set at least one child to be tab enabled.

Workaround 2

Another workaround involves 2 tab-enabled Sprite instances that never receive focus and do not contain visible content. Internally, the Flash Player would treat them as possible focus targets and therefore wouldn’t release the movie’s focus.

Note, in both cases we need to default prevent the standard focus change events and implement our own focus management.



5 Comments

  1. Dan

    21. März 2011

    Test 3 only works once. If you loop through a second tome the swfs never recieve focus again…weird

  2. Lukasz 'Severiaan' Grela

    8. Juni 2011

    Hi,
    nice article very useful in e-learning when accessibility has high priority. RE test 3 I’ve noticed that on FireFox (4.0.1) it locks focus within flash once got there. IE (8.0.6) works fine (as expected).

  3. Stelios

    5. August 2011

    Hi,

    Is it possible to send me the source code of your test1?
    I’m interested to see how you put together
    test3!

    I’m trying to make the TAB work on IE9
    and the focus keep going out of the Flash object on each Tab!

    Thank you
    Stelios

  4. Richard England

    14. August 2011

    I came up with a (sort of) solution to this tab loop problem using AS3 and JS. Have open sourced it here: https://github.com/englandrp/Cross-browser-Flash-tabbing-and-focus-solution

    Hope it helps?

  5. Jens Struwe

    17. August 2011

    @Stelios: https://github.com/AS3Commons/as3commons-ui/tree/master/examples/focus/funwithfocus

    @Richard, thank you for spotting the default browser focus issue.

Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.