[ICE-2458] Keyboard support for displaying child menus in menuBar - ICEsoft JIRA Issue Tracker

Details

Type: Improvement
Status: Closed
Priority: Major
Resolution: Fixed
Affects Version/s: 1.7DR#3
Fix Version/s: 1.7RC1, 1.7
Component/s: ICE-Components
Labels:
None
Environment:
n/a

ICEsoft Forum Reference:
http://www.icefaces.org/JForum/posts/list/6492.page
Support Case References:
https://www.icesoft.ca:4443/supportilla/show_bug.cgi?id=4372

Description

For Section 508 compliance, the menuBar component should support a mechanism to display child menus using the keyboard alone.

All onmouseover event handlers in the menu could also use the onfocus event handler. If possible we should wire the MenuBar to use onfocus handler as well as the onmouseover handler.

If the user tabs through the page and focusses on a top-level menu-item, it should display it's child menu then (if it's not already displayed). The same applies for any other child menus, onfocus on the menuitem should display an associated child menu if it isn't already displayed.

You should look at this in conjunction with ~~ICE-1232~~ as they are likely to inter-relate.

Options
- Sort By Name
- Sort By Date
- Ascending
- Descending
- Download All

Attachments

Hide
ICE-2458.war

22/Feb/08 4:13 PM

5.67 MB

Jacky Lee
META-INF/MANIFEST.MF 0.1 kB

META-INF/context.xml 0.1 kB

WEB-INF/classes/com/.../beans/TestBean.class 2 kB

WEB-INF/classes/com/.../beans/TestBean.java 3 kB

WEB-INF/faces-config.xml 0.5 kB

WEB-INF/lib/backport-util-concurrent.jar 319 kB

WEB-INF/lib/commons-beanutils.jar 184 kB

WEB-INF/lib/commons-collections.jar 558 kB

WEB-INF/lib/commons-digester.jar 140 kB

WEB-INF/lib/commons-discovery.jar 70 kB

WEB-INF/lib/commons-el.jar 110 kB

WEB-INF/lib/commons-fileupload.jar 87 kB

WEB-INF/lib/commons-logging.jar 52 kB

WEB-INF/lib/el-api.jar 24 kB

WEB-INF/lib/icefaces-comps.jar 1.51 MB

WEB-INF/lib/icefaces.jar 771 kB

WEB-INF/lib/jsf-api.jar 356 kB

WEB-INF/lib/jsf-impl.jar 778 kB

WEB-INF/lib/jstl.jar 17 kB

WEB-INF/lib/xercesImpl.jar 1.15 MB

WEB-INF/lib/xml-apis.jar 190 kB

index.jsp 0.1 kB

main.jspx 4 kB

WEB-INF/web.xml 3 kB

Download Zip
Show

ICE-2458.war

22/Feb/08 4:13 PM

5.67 MB

Jacky Lee

Activity

Ascending order - Click to sort in descending order

Hide

Permalink

Philip Breau added a comment - 10/Dec/07 10:19 AM

suggested fix:

Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java
===================================================================
— D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java (revision 15311)
+++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java (working copy)
@@ -167,11 +167,12 @@
String qualifiedName = ((MenuItem) uiComponent).
getUserDefinedStyleClass(menuComponent.getItemStyleClass(),
rootItemSubClass);

+ String focusEvent = HTML.ONFOCUS_ATTR;
if (uiComponent.getChildCount() > 0)

Unknown macro: { topLevelDiv.setAttribute(HTML.CLASS_ATTR, CoreUtils.addPortletStyleClassToQualifiedClass( qualifiedName, rootItemSubClass, PORTLET_CSS_DEFAULT.PORTLET_MENU_CASCADE_ITEM)); String displayEvent = HTML.ONMOUSEOVER_ATTR;+ if (vertical) { String supermenu = menuComponent.getClientId(facesContext); Element parentNode = (Element) topLevelDiv.getParentNode(); @@ -182,19 +183,31 @@ "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + expand(supermenu, clientId + "_sub", KEYWORD_THIS) + "Ice.Menu.appendHoverClasses(this);"); + topLevelDiv.setAttribute(focusEvent, + "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + + expand(supermenu, clientId + "_sub", + KEYWORD_THIS) + "Ice.Menu.appendHoverClasses(this);"); } else { topLevelDiv.setAttribute(displayEvent, "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + expand("this", clientId + "_sub", KEYWORD_NULL) + "Ice.Menu.appendHoverClasses(this);"); + topLevelDiv.setAttribute(focusEvent, + "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + + expand("this", clientId + "_sub", + KEYWORD_NULL) + "Ice.Menu.appendHoverClasses(this);"); } }

else
{ topLevelDiv.setAttribute(HTML.CLASS_ATTR, CoreUtils.addPortletStyleClassToQualifiedClass( qualifiedName, rootItemSubClass, PORTLET_CSS_DEFAULT.PORTLET_MENU_ITEM)); topLevelDiv.setAttribute(HTML.ONMOUSEOVER_ATTR, "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);Ice.Menu.appendHoverClasses(this);"); + topLevelDiv.setAttribute(focusEvent, + "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);Ice.Menu.appendHoverClasses(this);"); + }
topLevelDiv.setAttribute(HTML.ONMOUSEOUT_ATTR, "Ice.Menu.removeHoverClasses(this);");
+ topLevelDiv.setAttribute(HTML.ONBLUR_ATTR, "Ice.Menu.removeHoverClasses(this);");
String title = ((MenuItem) uiComponent).getTitle();
if(title != null && title.length() > 0)
topLevelDiv.setAttribute(HTML.TITLE_ATTR, title);

Show

Philip Breau added a comment - 10/Dec/07 10:19 AM suggested fix: Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java =================================================================== — D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java (revision 15311) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java (working copy) @@ -167,11 +167,12 @@ String qualifiedName = ((MenuItem) uiComponent). getUserDefinedStyleClass(menuComponent.getItemStyleClass(), rootItemSubClass); + String focusEvent = HTML.ONFOCUS_ATTR; if (uiComponent.getChildCount() > 0) Unknown macro: { topLevelDiv.setAttribute(HTML.CLASS_ATTR, CoreUtils.addPortletStyleClassToQualifiedClass( qualifiedName, rootItemSubClass, PORTLET_CSS_DEFAULT.PORTLET_MENU_CASCADE_ITEM)); String displayEvent = HTML.ONMOUSEOVER_ATTR;+ if (vertical) { String supermenu = menuComponent.getClientId(facesContext); Element parentNode = (Element) topLevelDiv.getParentNode(); @@ -182,19 +183,31 @@ "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + expand(supermenu, clientId + "_sub", KEYWORD_THIS) + "Ice.Menu.appendHoverClasses(this);"); + topLevelDiv.setAttribute(focusEvent, + "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + + expand(supermenu, clientId + "_sub", + KEYWORD_THIS) + "Ice.Menu.appendHoverClasses(this);"); } else { topLevelDiv.setAttribute(displayEvent, "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + expand("this", clientId + "_sub", KEYWORD_NULL) + "Ice.Menu.appendHoverClasses(this);"); + topLevelDiv.setAttribute(focusEvent, + "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);" + + expand("this", clientId + "_sub", + KEYWORD_NULL) + "Ice.Menu.appendHoverClasses(this);"); } } else { topLevelDiv.setAttribute(HTML.CLASS_ATTR, CoreUtils.addPortletStyleClassToQualifiedClass( qualifiedName, rootItemSubClass, PORTLET_CSS_DEFAULT.PORTLET_MENU_ITEM)); topLevelDiv.setAttribute(HTML.ONMOUSEOVER_ATTR, "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);Ice.Menu.appendHoverClasses(this);"); + topLevelDiv.setAttribute(focusEvent, + "Ice.Menu.hideOrphanedMenusNotRelatedTo(this);Ice.Menu.appendHoverClasses(this);"); + } topLevelDiv.setAttribute(HTML.ONMOUSEOUT_ATTR, "Ice.Menu.removeHoverClasses(this);"); + topLevelDiv.setAttribute(HTML.ONBLUR_ATTR, "Ice.Menu.removeHoverClasses(this);"); String title = ((MenuItem) uiComponent).getTitle(); if(title != null && title.length() > 0) topLevelDiv.setAttribute(HTML.TITLE_ATTR, title);

Hide

Permalink

Adnan Durrani added a comment - 18/Dec/07 2:49 PM

revision 15419

Show

Adnan Durrani added a comment - 18/Dec/07 2:49 PM revision 15419

Hide

Permalink

Jacky Lee added a comment - 02/Jan/08 3:57 PM

There is an issue with the tab order of the menuItems. If you have more than one menuItems inside a menu and each of these menuItems has their own child menus, then using only tabs, it is only possible to enter the child menu of the last menuItem.

Example:
"File" is a top-level menuItem. "Open" and "Close" are child menuItems of "File". There are child menuItems inside both "Open" and "Close"

File
Open
File1
File2
Close
File3
File4

1st tab, "File" has focus, "Open" and "Close" are shown.
2nd tab, "Open" has focus, "File1" and "File2" are shown.
3rd tab, the focus rather than going to "File1", it goes to "Close", and "File3", "File4" are shown.
4th tab, focus goes to "File3".

Show

Jacky Lee added a comment - 02/Jan/08 3:57 PM There is an issue with the tab order of the menuItems. If you have more than one menuItems inside a menu and each of these menuItems has their own child menus, then using only tabs, it is only possible to enter the child menu of the last menuItem. Example: "File" is a top-level menuItem. "Open" and "Close" are child menuItems of "File". There are child menuItems inside both "Open" and "Close" File Open File1 File2 Close File3 File4 1st tab, "File" has focus, "Open" and "Close" are shown. 2nd tab, "Open" has focus, "File1" and "File2" are shown. 3rd tab, the focus rather than going to "File1", it goes to "Close", and "File3", "File4" are shown. 4th tab, focus goes to "File3".

Hide

Permalink

Adnan Durrani added a comment - 03/Jan/08 3:16 PM

We don't set the tab index on the HTML elements. Its browser default.

Show

Adnan Durrani added a comment - 03/Jan/08 3:16 PM We don't set the tab index on the HTML elements. Its browser default.

Hide

Permalink

Ken Fyten added a comment - 09/Jan/08 1:15 PM

Need to investigate solutions for this.

Show

Ken Fyten added a comment - 09/Jan/08 1:15 PM Need to investigate solutions for this.

Hide

Permalink

Adnan Durrani added a comment - 05/Feb/08 2:42 PM

revision 15720. The right arrow key will take the focus to the submenu

Show

Adnan Durrani added a comment - 05/Feb/08 2:42 PM revision 15720. The right arrow key will take the focus to the submenu

Hide

Permalink

Jacky Lee added a comment - 22/Feb/08 4:09 PM

This is the structure of my menuBar:

File
Open
File1
File2
File3
Delete
File1
File2
File3
Edit
Submenu1
Submenu2
Submenu3

When I tab focus to "File", "Open" and "Delete" appear. From here there is two scenarios:
1) if I press the right arrow key, it will actually show the submenu of "Edit" rather than changing the focus into File's submenu.
2) if I press tab again it will show the submenu of "Open", but at the same time, the parent menu (Open and Delete) disappear.
From here, using tab will switch back to the parent menu; right arrow key does nothing.
In the end, you can't open the submenu of "Delete"

Tested with trunk at revision 15842

Show

Jacky Lee added a comment - 22/Feb/08 4:09 PM This is the structure of my menuBar: File Open File1 File2 File3 Delete File1 File2 File3 Edit Submenu1 Submenu2 Submenu3 When I tab focus to "File", "Open" and "Delete" appear. From here there is two scenarios: 1) if I press the right arrow key, it will actually show the submenu of "Edit" rather than changing the focus into File's submenu. 2) if I press tab again it will show the submenu of "Open", but at the same time, the parent menu (Open and Delete) disappear. From here, using tab will switch back to the parent menu; right arrow key does nothing. In the end, you can't open the submenu of "Delete" Tested with trunk at revision 15842

Hide

Permalink

Jacky Lee added a comment - 22/Feb/08 4:13 PM

Attached test case

Show

Jacky Lee added a comment - 22/Feb/08 4:13 PM Attached test case

Hide

Permalink

Adnan Durrani added a comment - 03/Mar/08 11:03 AM

Please see the following case for more detail.
http://jira.icefaces.org/browse/ICE-2811

Show

Adnan Durrani added a comment - 03/Mar/08 11:03 AM Please see the following case for more detail. http://jira.icefaces.org/browse/ICE-2811

People

Assignee:

Unassigned

Reporter:

Philip Breau

Votes:

4 Vote for this issue

Watchers:

1 Start watching this issue

Dates

Created:

03/Dec/07 12:19 PM

Updated:

14/Apr/08 3:38 PM

Resolved:

03/Mar/08 11:03 AM