I am hoping you guys can help me with this.

I have several custom modules within my Portal that allow a user to personalise the module. To do this they can click on an Edit image and a panel is exposed with the various settings for that module.

One key requirement for these modules is that the Edit button is localisable as our portals are used in many different locations.

So I have coded the button as follows:

     <div ID="divEdit" style="display:inline-block; text-align:right;" runat=server >
        <span class="ButtonLeft" ></span><asp:Label ID="lblEdit" resourcekey="Edit" TabIndex=1 CssClass="ButtonCentre" runat=server></asp:Label><span class="ButtonRight" ></span>
    </div>

The CSS is as follows:

.ButtonLeft
{
    display:inline-block;
    width: 13px;
    background-image: url(images/ButtonLeft.gif);
    margin: 6px 0px 6px 0px;
    height:20px;
    cursor:pointer;
}

.ButtonCentre
{
    display:inline-block;
    background-image: url(images/ButtonCentre.gif);
    background-repeat:repeat-x ;
    margin:   6px 0px 6px 0px;
    height:20px;
    color: #AD0818;
    font-size: 0.8em;
    text-align: center;
    vertical-align: top;
    cursor:pointer;
}

.ButtonRight
{
    display:inline-block;
    width: 13px;
    background-image: url(images/ButtonRight.gif);
    margin:  6px 10px 6px 0px;
    height:20px;
    cursor:pointer;
}
 

However one of the requirements is that in order to meet level 2 DDA compliance these edit buttons must be accessible via the key board, i.e. the user can tab to the Edit button and then press <ENTER> to open the edit panel.

This is where I am struggling. I have attempted to use a TabIndex on the various controls above (div, span, label, etc) but this does not work. Even if it did, what would I set the TabIndex to as the use can move modules around the screen so I don't know in code what order the tabs should be in.

Does anyone have any suggestions as to how I can get keyboard tabbing to work?

No unfortunately even using a Hyperlink doesn't seem to work, the "tabbing" seems to skip right over this button.

I have just used an asp:LinkButton at the moment and that appears to fix the tabbing issue.

However the text is then controlled by the portal.css for links so it's not perfect but it does do a job.

Thanks