Keyboard accessibility for dojox.layout.FloatingPane

Well, I don’t really see a use for FloatingPane, except as a windowing system for projects like LucidDesktop, but I got the impression that many people just love the FloatingPane. However, it caught my attention these days.

One of its major drawbacks – and the one that keeps it pretty far from becoming a joyful member of the dijit namespace – is the lack of keyboard accessibility. It has plenty of other issues and could use some refactoring, but this one is outstanding. Hm, adding keyboard access shouldn’t be too hard I thought and went for it…

1. Moving and resizing

To enable keybord movement, there are some prequesites: First, the pane needs to be able to recieve focus and move itself to front via the keyboard. Second, the pane needs a lot of visual markers. And it needs a certain state in which the keybord movement can actually be activated.

So, the idea is the following: If you tab through the panes, the focus is set to the pane’s title node. If you click into a pane or into its child widgets, you need to shift-tab upwards until the title node recieves focus. In my minimal styling, the title node text is in italics when it has focus. You can then press space to “activate” keyboard movement. An overlay is shown to indicate that the “moveMode” is active. Then you can use the arrow keys to move, and shift-arrow to resize the pane. To exit this mode, press space or escape or take the focus off the title node by clicking somewhere else or tab away.

In short, the first step included:

Adding visual hints to indicate which FloatingPane is on top (via box-shadow and a bold title node text)
Adding a visual hint to indicate when the focus is on the title node and “moveMode” can be activated
Enabling the pane to get on top of other panes by tabbing to it
Adding key handlers to start and end “moveMode”
Adding typematic key listerners to realize movement

Oh, did I mention that dojo’s typematic is awesome? Nope? Well, it’s awesome! Go try it out for yourself!

2. Minimize, maximize, restore and the dock

The FloatingPane also has docking abilities – so the dock and it’s items had be accessible, too. The dock items have their own widget class, so this had to be modified. The changes are minor: adding a tabIndex and a keyhandler. And, of course, adding a visual hint to indicate that the dock item has focus (that is, the label is bold). When the dock item has focus, press space to restore the corresponding pane.

Next, the pane needed extra key handling: I chose “+” to maximize, “-” to minimize (or restore, if pane is maximized) and “x” to close the pane.

3. Baking it all together

As it isn’t that desireable to have two widgets doing the same in the dojox namespace, I merged the changes with FloatingPane. But, then again, as I did some other minor changes to FloatingPane (but including changes to the CSS classNames to have a consistent use of baseClass, and inheriting from dijit.layout.ContentPane instead of dojox.layout.ContentPane), I named the new widget “WindowPane”.

What’s left?

Short: A ton. The widget needs to be refactored, it has a couple of bugs. The code I added is undocumented, the CSS incomplete. Well, I’ll be short on time for a week or two, but I’ll surely get back to this. Consider this a work in progress. But, hey, maybe having keybord accessibility will give further develepmont of this widget a little push.

You want to use it?

Cool, there are two options:

– You can use dojox.layout.Window to gain just movement/resize abilities. Then bake Window.js and the extra CSS from the test page into your build, replace calls to FloatingPane with calls to Window, and you’re done.
– Or, if you don’t use FloatingPane yet or want the complete functionality, grab the WindowPane.js file, the WindowPane.css file and the WindowPane.html template and add them to your dojox. This is probably the best way to do.

See below for files.

Keybord summary

Use Tab to navigate from pane to pane, and press space when the title node has focus (title text is itailc) to activate keyboard interaction.

Arrow keys: move pane around
Shift + arrow keys: resize pane
plus: maximize pane
minus: minimize pane or restore pane (if maximized)
x: close pane

Press space again or escape to deactivate keyboard interaction. Or just tab or click away.

Files:

Step one (moving and resizing):

Or: Step three (full)