Bug 960553

Summary: 508-L Toolbar menu item scripts do not work with the keyboard
Product: [JBoss] JBoss Enterprise Portal Platform 6 Reporter: Dominik Pospisil <dpospisi>
Component: PortalAssignee: Lucas Ponce <lponce>
Status: CLOSED CURRENTRELEASE QA Contact: Dominik Pospisil <dpospisi>
Severity: unspecified Docs Contact:
Priority: high    
Version: 6.0.0CC: epp-bugs, theute
Target Milestone: ---   
Target Release: 6.1.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2013-11-07 14:22:02 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:
Bug Depends On:    
Bug Blocks: 960060    
Attachments:
Description Flags
toolbar scripts none

Description Dominik Pospisil 2013-05-07 11:35:54 UTC 
508-L Toolbar menu item scripts do not work with the keyboard fuctions. Only way user has access to these function is by use of the mouse. Scripts should be made directly accessible whenever possible by employing natively keyboard-accessible markup elements (such as anchors and forms) and generic event handlers (such as onfocus, onblur and onselect).

This violates 508 certification requirements: ยง 1194.22 (l) Scripts
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
Comment 1 Dominik Pospisil 2013-05-07 11:36:25 UTC 
Created attachment 744690 [details]
toolbar scripts
Comment 2 Lucas Ponce 2013-05-14 09:17:55 UTC 
After having studied this issue we can summary status as follow:

- Menu navigation components are deal with jQuery in the module UIPortalNavigation.js.

- Current design doesn't allow to use keyboard to navigate into the menu elements, some top menu elements are not <a> tags, and also there is not an event to show the children when <a> link is active.

- A change can be possible using a different approach, some examples can be shown in these discussions:

http://stackoverflow.com/questions/14510846/jquery-is-it-possible-to-bind-css-hover-focus-behaviours-to-keydown

and this online-demo:

http://jsfiddle.net/greenrobo/eLCmM/

In these examples, when a link is active, the children can be showed, as expected.

- Introduce this change can affect whole UIPortalNavigation.js, refactor the current design to introduce key events.

So, I would check with Thomas Heute how to proceed with this one.
Comment 3 Lucas Ponce 2013-05-15 14:15:07 UTC 
Update:

- wrapping some menu elements with <a> tags instead of <span>.
- Adding focusin/focusout jquery handlers with similar behaviour of mouseenter/mouseleave.

With these small changes, now, menu tool bar and submenus are accessible with keyboard without any major change in the current JavaScript design.