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

          Arran Mccullough created issue -
          Ken Fyten made changes -
          Field Original Value New Value
          Link This issue is duplicated by ICE-10642 [ ICE-10642 ]
          Ken Fyten made changes -
          Link This issue is duplicated by ICE-10642 [ ICE-10642 ]
          Ken Fyten made changes -
          Link This issue blocks ICE-10735 [ ICE-10735 ]
          Ken Fyten made changes -
          Fix Version/s 4.1 [ 11375 ]
          Ken Fyten made changes -
          Fix Version/s EE-4.1.0.GA [ 12171 ]
          Fix Version/s 4.1 [ 11375 ]
          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
          Arturo Zambrano made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #48513 Tue Mar 15 13:15:15 MDT 2016 art.zambrano ICE-10735, ICE-10642, ICE-10643 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
          Files Changed
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/sliderentry/SliderEntryMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/roweditor/RowEditorMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/breadcrumbmenu/BreadcrumbMenuMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ProxiedBodyColumn.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/fileentry/FileEntryMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/sliderentry/SliderEntryRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/roweditor/RowEditorRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableHeadRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/paginator/paginator.js
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/richtextentry/RichTextEntryRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/breadcrumbmenu/BreadcrumbMenuRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/sliderentry/slider.js
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/fileentry/FileEntryRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ColumnMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/richtextentry/RichTextEntryMeta.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableMeta.java
          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.
          Ken Fyten made changes -
          Resolution Fixed [ 1 ]
          Status Resolved [ 5 ] Reopened [ 4 ]
          Ken Fyten made changes -
          Assignee Priority P1 [ 10010 ]
          Ken Fyten made changes -
          Assignee Arturo Zambrano [ artzambrano ]
          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
          Arturo Zambrano made changes -
          Status Reopened [ 4 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #48628 Thu Apr 14 11:17:13 MDT 2016 art.zambrano ICE-10643 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
          Files Changed
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
          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.
          Ken Fyten made changes -
          Fix Version/s EE-4.1.0.BETA [ 13072 ]
          Ken Fyten made changes -
          Fix Version/s 4.2.BETA [ 13091 ]
          Fix Version/s 4.2 [ 12870 ]
          Ken Fyten made changes -
          Status Resolved [ 5 ] Closed [ 6 ]

            People

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

              Dates

              • Created:
                Updated:
                Resolved: