5 Replies Latest reply on Sep 25, 2008 3:14 AM by AnnieK

    Set Focus on Accordion Header

      Hi All,

      I have a form based application with 3 Accordion headers and need to navigate using the keyboard only. I can't tab onto the accordion header to allow the user to press Space / Enter to move onto the next form section.

      Does anyone know how to set focus onto the accordion header using the tab key?

      Many thanks,
        • 1. Re: Set Focus on Accordion Header
          wyattbiker Level 1
          Create a key press event and when the key is pressed it will set focus. However you also need to enable/disable it at appropriate times. You dont want the tab key to always be going to the accordion. If users are tabbing thru a form, just activate the event at entry to the control prior to the accordion and then disable it when they enter the accordion.
          • 2. Re: Set Focus on Accordion Header
            AnnieK Level 1
            Thanks for the reply.

            Yes, I have a method to capture the tab press event, but the problem is trying to set the focus on the next Accordion Header - myAccordion.setFocus(); seems to set focus back to the first input within the accordion pane. I need the focus to go to the next accodion header.

            Thanks again,
            • 3. Re: Set Focus on Accordion Header
              VarioPegged Level 2
              For keyboard navigation, you typically you use the up and down arrow keys to navigate the different headers of an accordion control, then press Enter/Return to select. Don't know if you were aware of this, or do you have a specific reason to use the tab key instead?

              • 4. Re: Set Focus on Accordion Header
                AnnieK Level 1

                I'm using the tab key to try to move focus from a form input to the accordion header, once the header has focus using the tab or arrow keys will work. Moving focus from the form input to the header is the problem.

                • 5. Re: Set Focus on Accordion Header
                  AnnieK Level 1

                  Never found a solution to this - had to move focus to a hidden input field with a listener. Once the hidden field received focus, the listener function handled the space bar press event and dispatched a mouse click event on the next accordion header.