[ICE-10643] ace:tabSet - Add keyboard navigation support - ICEsoft JIRA Issue Tracker

Details

Type: Improvement
Status: Closed
Priority: Major
Resolution: Fixed
Affects Version/s: EE-3.3.0.GA_P02, EE-4.0.0.GA
Fix Version/s: EE-4.1.0.RC1, EE-4.1.0.GA, 4.2.BETA, 4.2
Component/s: ACE-Components
Labels:
None
Environment:
All

Assignee Priority:
P1
Support Case References:
Support Case #13386 - https://icesoft.my.salesforce.com/50070000017gH3d

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

blocks

ICE-10735 Add "accesskey" attribute support to all eligible ACE components.

Closed

Activity

Ascending order - Click to sort in descending order

Arran Mccullough created issue - 15/Apr/15 1:49 PM

Ken Fyten made changes - 17/Jun/15 4:47 PM

Field	Original Value	New Value
Link		This issue is duplicated by ~~ICE-10642~~ [ ~~ICE-10642~~ ]

Ken Fyten made changes - 17/Jun/15 4:47 PM

Link

This issue is duplicated by ~~ICE-10642~~ [ ~~ICE-10642~~ ]

Ken Fyten made changes - 17/Jun/15 4:48 PM

Link

This issue blocks ~~ICE-10735~~ [ ~~ICE-10735~~ ]

Ken Fyten made changes - 17/Jun/15 4:48 PM

Fix Version/s

4.1 [ 11375 ]

Ken Fyten made changes - 05/Oct/15 2:06 PM

Fix Version/s		EE-4.1.0.GA [ 12171 ]
Fix Version/s	4.1 [ 11375 ]

Hide

Permalink

Arturo Zambrano added a comment - 15/Mar/16 1:10 PM

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 - 15/Mar/16 1:10 PM 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 - 15/Mar/16 1:10 PM

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
				MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/sliderentry/SliderEntryMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/roweditor/RowEditorMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/breadcrumbmenu/BreadcrumbMenuMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ProxiedBodyColumn.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/fileentry/FileEntryMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/sliderentry/SliderEntryRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/roweditor/RowEditorRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableHeadRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/paginator/paginator.js MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/richtextentry/RichTextEntryRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/breadcrumbmenu/BreadcrumbMenuRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/sliderentry/slider.js MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/fileentry/FileEntryRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ColumnMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/richtextentry/RichTextEntryMeta.java MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableMeta.java

Hide

Permalink

Ken Fyten added a comment - 17/Mar/16 4:12 PM

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 - 17/Mar/16 4:12 PM 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 - 17/Mar/16 4:12 PM

Resolution	Fixed [ 1 ]
Status	Resolved [ 5 ]	Reopened [ 4 ]

Ken Fyten made changes - 05/Apr/16 10:25 AM

Assignee Priority

P1 [ 10010 ]

Ken Fyten made changes - 05/Apr/16 10:25 AM

Assignee

Arturo Zambrano [ artzambrano ]

Hide

Permalink

Arturo Zambrano added a comment - 14/Apr/16 11:10 AM

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 - 14/Apr/16 11:10 AM 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 - 14/Apr/16 11:10 AM

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
				MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js

Hide

Permalink

Carmen Cristurean added a comment - 14/Apr/16 2:04 PM - 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 - 14/Apr/16 2:04 PM - 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 - 29/Apr/16 10:26 AM

Fix Version/s

EE-4.1.0.BETA [ 13072 ]

Ken Fyten made changes - 22/Dec/16 10:41 AM

Fix Version/s		4.2.BETA [ 13091 ]
Fix Version/s		4.2 [ 12870 ]

Ken Fyten made changes - 13/Mar/17 1:32 PM

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:

15/Apr/15 1:49 PM

Updated:

13/Mar/17 1:32 PM

Resolved:

14/Apr/16 11:10 AM