Problems editing accordian panels

Question

Hi,
Have an issue where InContext editing was capable last month of editing a page with Spry accordian panels, but recently weno longer can edit the panels.
The subject page is
http://www.peradance.com/Atlanta-Dance-Classes-Calendar.html
which is a dance class calendar.
Each class is defined as a repeating region consisting of a title and a description, both within a Spry accordian panel which when click expands the accordian detail window to show the description.
I set this up for the client weeks ago and to my surprise it worked OK with InContext editing. However, now we find it is difficult to edit the text in the title windows -- perhaps some recent update to InContext editing has broken this ability.
We can add or duplicate a repeating region to add a new class, but when we try to click inside the Title box for that class we can't seem to insert a cursor anymore to change the text -- InContext editing now seems confused and wants to expand/contract the description panel, rather than let us insert a cursor to edit the title.  We can insert the cursor in the description and edit it OK.
This fails using Windows Firefox, IE8 and IE7 so trying another browser doesn't help.
I tried to talk the client into a simpler calendar without the Spry expanding accordian (just have the class title and description always exposed) but he would rather abandon Adobe's software than give up that functionality. What he really wanted rather than the accordian was for the class description to appear in a popup window when the cursor hovers any title, but I discovered there is no way to use Spry tips or any javascript popup in a way that the client can edit with InContext editing. I was surprised to find the Accordian panel did work fine. Why it has now stopped working is a mystery.
The code for a day on the calendar looks like this:
<div class="day">
<p class="title">Monday</p>
  <div id="Accordion2" class="Accordion" tabindex="0" ice:repeatinggroup="*">
      <div class="AccordionPanel AccordionPanelOpen" ice:repeating="true">
        <div class="AccordionPanelTab" ice:editable="*">
            <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">7:00 PM BELLY DANCE BASICS &amp; FITNESS</span></span></p>
        </div>
         <div style="height: auto; display: block;" class="AccordionPanelContent" ice:editable="*">
         Learn the fundamentals of the art of belly dance from multi award winning instructor Aziza Nawal. In this class, you will learn the basics of middle eastern dance, improve your tecniques, all while you get a nice workout and toning your body
         </div>
      </div>
  <div class="AccordionPanel AccordionPanelClosed" ice:repeating="true">
    <div class="AccordionPanelTab" ice:editable="*">
        <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">8:00 PM  FOCUS on CLOSE EMBRACE TANGO</span></span></p>
     </div>
     <div style="height: 0px; display: none;" class="AccordionPanelContent" ice:editable="*">
  In our Monday classes, we focus on concepts dealing with the technique of close embrace tango while always keeping a sharp focus on musicality and navigation. The moves that we teach in this class will be simple, musical and elegant. We will focus on different tango orchestras as well as  vals and milonga and give you specific tools and moves to interpret these in an interesting and satisfying way. We will try to always spend time focusing on the followers role in the dance.</div>
   </div>
</div>
</div><!-- end day -->

Answer 1

The Accordion keyboard navigation feature (the ability to change the open panel using the keyboard keys )  is preventing InContext Editing to properly edit the contents of the editable region.
You can disable to keyboard navigation feature of an Accordion by setting it to false in the constructor:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:false});
Note: to disable keyboard navigation when the page is loaded inside InContext Editing use:
var useKeyboard = typeof(top.ice) == "undefined";
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:useKeyboard });
This will make the editable regions editable only in Internet Explorer.
There's a CSS rule used by the Accordion  widget to disable text selection on the panel titles in Firefox and Safari:search .AccordionPanelTab in the SpryAccordion.css file and remove:
    -moz-user-select: none;
    -khtml-user-select: none;
See the InContext Editing known issues and limitations, the Editing section, from Adobe Labs InContext Editing page.
Regards,
Dan Popa