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):

• /dojox/layout/Window.js
• test page

Or: Step three (full)

• /dojox/layout/WindowPane.js
• /dojox/layout/resources/WindowPane.html
• /dojox/layout/resources/WindowPane.css
• test page

As there is no such fieldset with dojo, I decided to write my own widget. While doing so, I learnt an interesting lesson…

First, I wrote it pretty simple, inheriting the widget from dijit._Widget and dijit._Templated. It had a toggle button next to its legend, which could be clicked. The toggle was a simple display none/block change.

But I wanted it to be accessible via the keyboard – so I added a tabIndex and a key handler. Next, I wanted it to be able to hold and parse widgets, so I inherited it from dijit.layout.ContentPane so I could make use of the content setter. Then I wanted it to animate smoothly, so I added animations, and so on… You get the point, I guess. Well, this went on for a while, until I made an unpleasant discovery: My fieldset was almost a clone of dijit.TitlePane. Ugh.

I had put all the time into creating a copy of something, that already existed.

So I inherited the fieldset widget from dijit.TitlePane and ended up with less than 50 lines of code. And it was a matter of minutes to do so. Ok, lesson learned: If you need something that doesn’t exist and you are going to code it – first check if there’s something that behaves similar to what you want. Or similar to what you might want in the future. If I had invested a little more time in thinking about the fieldset widget before starting to code, it would have been obvious that I wanted the above mentioned features one day. And I would have saved a lot of time.

Well, however, here it is: a collapsible fieldset, coming with all the ContentPane goodness (child widgets, remote loading,…).

You can create it via markup (I put it into a namespace called “app”; choose a namespace you like):

<fieldset dojotype="app.Fieldset">
    <legend>Legend</legend>
    Content
</fieldset>

or programmatically:

var fieldset = new app.Fieldset({legend:'dojo fieldset', id: 'someId'},dojo.create('div',{},dojo.body()));

The fieldset takes pretty much the same arguments as dijit.TitlePane. To change the legend, use dojo.attr('legend','Teh new legend'), to change the content dojo.attr('content',content) as usual. To stay close to TitlePane, I left _setTitleAttr() in it, but it is an alias for _setLegendAttr().

The code is simple (after I inherited from TitlePane), I only added a method to setup the legend tag and changed the methods that handle hover states, as the TitlePane’s methods paid no respect to the dijit’s base class. The fieldset is closed by default, but you can add open="true" to the markup (or add open: true to the constructor args) to make it start open. You can style it as you would style any other widget.

The testpage is over here: test_Fieldset.html
Code: Fieldset.js
Template: Fieldset.html

Update: If you have downloaded the code and intend to use it, please re-download it, as I updated a method and fixed a namespace confusion (and added doc).