Modal Popup and Keyboard Control

[bek816]

I have a requirement that users be able to control all aspects of the page using with keyboard (i.e. without the mouse).  One area where this has proven difficult is with the modal popup.  The problem is that when the popup is activated, the bowser treats the whole page as one selection element.  To reproduce using the component showcase:

1)  Go to Modal Panel Example tab.  I am running the latest version of FireFox. 

2)  Using your keyboard, tab over to the "Call the popup" button. 

3)  Press enter.

4)  Tab around on the page.  You cannot tab to the "x" on the popup to close it and you cannot find a way to close it using the keyboard. 

Does anyone have any suggestions how I can close a modal popup using only the keyboard?

Thanks in advance.

[bek816]

Still looking for some help on this one.  Does anyone in the community have any ideas?  Thanks.

[roet42]

I had the same problem.  If you look the close button on the example page is just an image with on onclick that closes the panel using its javascript api.  All I did was use the openjs shortcut library to add an listener for the esc keypress to close the form.

For example in javscript on the page :

     shortcut.add('esc',function() {closeImg.click();});

Where closeImg is the id of the graphic image control with the close icon.

The library I am using is at : http://www.openjs.com/scripts/events/keyboard_shortcuts/

You can use one of many shortcut libraries, or one of the jquery plugins that accomplish the same effect.

You can also use rich:hotkey or simply use the accesskey attribute depending on what html elements you configure to trigger closing the panel.

[sivaprasad9394]

Try look on the below code and change ur close button in the right top corner  OR add close button manually to close the pop up.

<rich:modalPanel id="imgPopUp" autosized="true" zindex="2000" width="650">

<f:facet name="header">

<h:panelGroup>

<h:outputText value="Image Panel"></h:outputText>

</h:panelGroup>

</f:facet>

<f:facet name="controls">

<h:panelGroup>

<h:graphicImage value="/img/close.png"

id="hidelinkimage" />

<rich:componentControl for="imgPopUp" attachTo="hidelinkimage"

operation="hide" event="onclick" />

</h:panelGroup> 

</f:facet>

<h:panelGrid columns="2" border="0" width="650">

.............Ur details........

</h:panelGrid>

</rich:modalPanel>

Thanks,

Siva