ICEfaces
  1. ICEfaces
  2. ICE-10643

ace:tabSet - Add keyboard navigation support

    Details

      Description

      Feature Request: Currently it is not possible to change the tab panes through a keyboard. This request is to add the ability to tab into the tabSet and navigate the tabs with a keyboard only. It would also be helpful if accesskey support for the tabPane's can be added as well to allow a user to jump to a specific panel.

        Issue Links

          Activity

          Hide
          Arturo Zambrano added a comment -

          r48513: added 'accesskey' attribute support to ace:breadcrumbMenu, ace:column, ace:dataTable paginator, ace:rowEditor, ace:fileEntry, ace:richTextEntry, ace:sliderEntry, and ace:tabPane; also made all ace:tabSet tab headers focusable and navigable via the tab key

          Show
          Arturo Zambrano added a comment - r48513: added 'accesskey' attribute support to ace:breadcrumbMenu, ace:column, ace:dataTable paginator, ace:rowEditor, ace:fileEntry, ace:richTextEntry, ace:sliderEntry, and ace:tabPane; also made all ace:tabSet tab headers focusable and navigable via the tab key
          Hide
          Ken Fyten added a comment -

          After reviewing the current implementation I've got some concerns.

          Specifically, changing the tabs using the Tab key is not a good idea as it prevents the user from using the keyboard to enter the selected tabPane contents (via Tab). Since pressing Tab switches the currently selected Tab (as does the left/right/up/dwn arrows), there is no way to navigate to the tabPane contents via the keyboard.

          The ARIA recommendations for keyboard nav. within a complex component would suggest that we should use the left/right arrow keys to navigate between the tabs, and leave Tab to continue through the tab-order, thus allowing the user to tab into the contents of the selected tabPane.

          Show
          Ken Fyten added a comment - After reviewing the current implementation I've got some concerns. Specifically, changing the tabs using the Tab key is not a good idea as it prevents the user from using the keyboard to enter the selected tabPane contents (via Tab). Since pressing Tab switches the currently selected Tab (as does the left/right/up/dwn arrows), there is no way to navigate to the tabPane contents via the keyboard. The ARIA recommendations for keyboard nav. within a complex component would suggest that we should use the left/right arrow keys to navigate between the tabs, and leave Tab to continue through the tab-order, thus allowing the user to tab into the contents of the selected tabPane.
          Hide
          Arturo Zambrano added a comment -

          r48623: modified keyboard navigation support in this way: pressing tab will transfer focus to the first focusable element in the pane's body; only the arrow keys, home and end will transfer focus to another tab header if a tab currently has focus, and it will be activated only by pressing space

          Show
          Arturo Zambrano added a comment - r48623: modified keyboard navigation support in this way: pressing tab will transfer focus to the first focusable element in the pane's body; only the arrow keys, home and end will transfer focus to another tab header if a tab currently has focus, and it will be activated only by pressing space
          Hide
          Carmen Cristurean added a comment - - edited

          Verified ICEfaces4 trunk r48629, using QA tabSet test app, /tabSetOnly.jsf test page, on IE8, IE11, FF41, Chrome50.
          Verified showcase > tabSet tests on FF41.

          Show
          Carmen Cristurean added a comment - - edited Verified ICEfaces4 trunk r48629, using QA tabSet test app, /tabSetOnly.jsf test page, on IE8, IE11, FF41, Chrome50. Verified showcase > tabSet tests on FF41.

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Arran Mccullough
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: