ICEfaces
  1. ICEfaces
  2. ICE-2458

Keyboard support for displaying child menus in menuBar

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major 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

      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.

        Activity

        Philip Breau created issue -
        Philip Breau made changes -
        Field Original Value New Value
        Summary Section 508: All onmouseover event handlers have an associated onfocus event handler for the MenuBar Keyboard support for the MenuBar
        Issue Type Bug [ 1 ] Improvement [ 4 ]
        Hide
        Philip Breau added a comment -

        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 - 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);
        Philip Breau made changes -
        Ken Fyten made changes -
        Fix Version/s 1.7 [ 10080 ]
        Assignee Mark Collette [ mark.collette ]
        Ken Fyten made changes -
        Fix Version/s 1.7DR#3 [ 10112 ]
        Fix Version/s 1.7 [ 10080 ]
        Assignee Priority P1
        Ken Fyten made changes -
        Assignee Mark Collette [ mark.collette ] Adnan Durrani [ adnan.durrani ]
        Ken Fyten made changes -
        Summary Keyboard support for the MenuBar Keyboard support for displaying child menus in menuBar
        Description For Section 508 compliance, all onmouseover event handlers should also use the onfocus event handler. If possible we should wire the MenuBar to use onfocus handler as well as the onmouseover handler. 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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #15419 Tue Dec 18 13:48:38 MST 2007 adnan.durrani Fix for ICE-2458 (Keyboard support for displaying child menus in menuBar)
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/menubar/MenuItemRenderer.java
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/component/menu.js
        Adnan Durrani made changes -
        Status Open [ 1 ] In Progress [ 3 ]
        Hide
        Adnan Durrani added a comment -

        revision 15419

        Show
        Adnan Durrani added a comment - revision 15419
        Adnan Durrani made changes -
        Status In Progress [ 3 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Jacky Lee added a comment -

        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 - 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".
        Jacky Lee made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Ken Fyten made changes -
        Fix Version/s 1.7 [ 10080 ]
        Fix Version/s 1.7DR#3 [ 10112 ]
        Affects Version/s 1.7DR#3 [ 10112 ]
        Affects Version/s 1.7DR#2 [ 10110 ]
        Adnan Durrani made changes -
        Status Reopened [ 4 ] In Progress [ 3 ]
        Hide
        Adnan Durrani added a comment -

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

        Show
        Adnan Durrani added a comment - We don't set the tab index on the HTML elements. Its browser default.
        Adnan Durrani made changes -
        Status In Progress [ 3 ] Resolved [ 5 ]
        Resolution Won't Fix [ 2 ]
        Hide
        Ken Fyten added a comment -

        Need to investigate solutions for this.

        Show
        Ken Fyten added a comment - Need to investigate solutions for this.
        Ken Fyten made changes -
        Resolution Won't Fix [ 2 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Assignee Priority P1
        Ken Fyten made changes -
        Assignee Priority P3
        Ken Fyten made changes -
        Assignee Priority P3 P2
        Ken Fyten made changes -
        Fix Version/s 1.7Beta1 [ 10121 ]
        Fix Version/s 1.7 [ 10080 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #15719 Tue Feb 05 13:05:35 MST 2008 adnan.durrani Fix for the second issue of ICE-2458
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/extras/keyboardNavigator.js
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/menubar/MenuBarRenderer.java
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/build.xml
        Hide
        Adnan Durrani added a comment -

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

        Show
        Adnan Durrani added a comment - revision 15720. The right arrow key will take the focus to the submenu
        Adnan Durrani made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Jacky Lee added a comment -

        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 - 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
        Jacky Lee made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Jacky Lee added a comment -

        Attached test case

        Show
        Jacky Lee added a comment - Attached test case
        Jacky Lee made changes -
        Attachment ICE-2458.war [ 10837 ]
        Ken Fyten made changes -
        Fix Version/s 1.7 [ 10080 ]
        Fix Version/s 1.7Beta1 [ 10121 ]
        Hide
        Adnan Durrani added a comment -

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

        Show
        Adnan Durrani added a comment - Please see the following case for more detail. http://jira.icefaces.org/browse/ICE-2811
        Adnan Durrani made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Fix Version/s 1.7RC1 [ 10123 ]
        Fix Version/s 1.7 [ 10080 ]
        Ken Fyten made changes -
        Fix Version/s 1.7 [ 10080 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Priority P2
        Assignee Adnan Durrani [ adnan.durrani ]

          People

          • Assignee:
            Unassigned
            Reporter:
            Philip Breau
          • Votes:
            4 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: