8 Appendix A: HTML5 Controls

Every component on the page with a definable focus is accessible by using the tab traversal (by using Tab and Shift+Tab).

NOTE:

Disabled items do not receive keyboard focus and do not allow any interaction. Read-only items receive the keyboard focus.

HTML Breadcrumbs (html5-breadcrumbs)

This section contains information on the Breadcrumbs Component.

Table: Breadcrumb Component
Target	Key	Action
Breadcrumb	Tab In	Set focus to breadcrumb
	Enter	Activates the Breadcrumb, if the link is available

HTML Button (html5-button)

This section contains information on the button component.

Table: Button Component
Target	Key	Action
Button	Tab	Set focus to the input.
	Enter	Activates the control

NOTE:

Buttons support the Enter key and not the Space key.

HTML Calendar (html5-calendar)

This section contains information on the Date component.

Table: Date Component
Target	Key	Action
Button	Tab	Set focus to the input.
	Enter	Activates the control and opens Calendar

This section contains information on the Calendar popup component.

Table: Calendar Component
Target	Key	Action
Popup	Tab	Set focus to the Calendar Popup.
Single Select (Month, Year)	Tab	Set focus to the input.
	Enter	Activates the Select control. Open
Single Select (Month, Year) Drop-down	UpArrow or DownArrow	Highlight the option item in the direction of the arrow.
	Esc	Collapse the drop-down list. If the drop-down is already closed, do nothing.
	Enter	Switch to selected Month/Year. Reloads the Calendar Popup
Left Arrow Button (Month, Year)	Enter	Switch to Previous Month/Year. Reloads the Calendar Popup
Right Arrow Button (Month, Year)	Enter	Switch to Next Month/Year. Reloads the Calendar Popup
Calendar Picker	Tab	Set focus to the day cells
	Enter	Select the currently focused day
Close Link	Enter	Closes the Calendar Popup

HTML Checkbox (html5-checkbox)

This section contains information on the checkbox component.

Table: Checkbox Component
Target	Key	Action
Checkboxset	Tab	Set focus on the first item in the checkbox set.

HTML Container Expand Collapse (html5-container-expand-collapse)

Using the Tab button on the Expand or Collapse button of the Container Header is disabled in most cases. Depending on availability, the following keys can be used:

Table: Container Expand Collapse Component
Target	Key	Action
Button	Tab	Set focus to the input.
Button	Enter	Activates the control.

HTML Dataset Hierarchy Browser (html5-dataset-hierarchy-browser)

This section contains information on the Dataset Hierarchy Browser.

Table: Dataset Hierarchy Browser Component
Target	Key	Action
Hcy Br LHS Shuttle Panel	Tab	Set focus to the checkbox input.
Hcy Br LHS Shuttle Panel	Spacebar	Selects the Node.
Hcy Br RHS Shuttle Panel	Tab	Set focus to the selected Node
Hcy Br RHS Shuttle Panel	Enter	Selects the Node.
Move Buttons	Tab	Set focus to the Move Buttons
Move Buttons	Enter	Activates the control. Moves selected items to LHS or RHS
Search Button	Enter	Activates the control. Moves focus to the nearest searched item.

HTML Date (html5-date)

This section contains information on the date component.

Table: Date Component
Target	Key	Action
Calendar Popup	Tab	Calendar grid.
	Enter	Activates the selection

HTML Dialog Launcher (html5-dialog-launcher)

This section contains information on the Dialog Launcher component.

Table: Dialog Launcher Component
Target	Key	Action
Launch Button	Tab	Set focus to the Launch Button
	Enter	Activates the control and opens the Popup Window
Menu Drop-down	Tab	Set focus to the Menu Item
	Enter	Activates the selected Menu Item and refreshes the Grid with the updated state

HTML Expression Browser Type BP (html5-expression-browser-type-bp)

This section contains information on the Expression Browser Type BP Component.

Table: Expression Browser Type BP Component
Target	Key	Action
Expression Browser Tree	Tab In	Set focus to tree Nodes
	Enter	Activates the tree Nodes and makes an entry in the expression Textarea Input
Reset Button	Enter	Resets the Expression Textarea Input

HTML File Picker (html5-filepicker)

This section contains information on the filepicker component.

Table: Filepicker Component
Target	Key	Action
Filepicker	Tab	Set focus to the input.
	Enter	Activates the control

HTML Grid (html5-grid)

This section contains information on the grid component.

Table: Grid Component
Target	Key	Action
Checkbox in Grid	Tab	Set focus to the input.
Links in Grid	Tab	Set focus on the link.
Sort	Tab	Set focus to the input.
Sort	Enter	Activates the control.

HTML Hierarchy Browser (Flat List) (html5-hierarchy-browser)

This section contains information on the JSP version of the Hierarchy Browser and is a flat list.

Table: JSP Version of the Hierarchy Browser (Flat List) Component
Target	Key	Action
Left Hand Side (LHS) Panel	Tab	Set focus to the Tree Nodes.
Right Hand Side (RHS) Panel	Tab	Set focus to the Tree Nodes.
Right Hand Side (RHS) Panel	Enter	Highlights the Tree Node, to move to Left Hand Side (LHS) or Right Hand Side (RHS) Panel
Map Button	Enter	Activates the control
Map All Button	Enter	Activates the control
UnMap Button	Enter	Activates the control
UnMap All Button	Enter	Activates the control
UnMap All Button	RightArrow	Moves Focus from LHS Panel to Map Button
UnMap All Button	LeftArrow	Moves Focus from RHS Panel to UnMap Button

HTML Hierarchy Browser Shuttle (html5-hierarchy-browser-shuttle)

This section contains information on the Hierarchy Browser Shuttle component.

Table: Hierarchy Browser Shuttle Component
Target	Key	Action
LHS Shuttle	Tab	Set focus to the List
Checkbox	Spacebar	Selects the List Node
Move Buttons (Select, Select All, Deselect, Deselect All)	Tab	Set focus to the Move Buttons
RHS Shuttle	Enter	Highlights the selected List Node
Search Button	Enter	Highlights the Nodes with the nearest search results

HTML Hierarchy Browser Type 4 (html5-hierarchy-browser-type4)

This section contains information on the Hierarchy Browser Type 4 component.

Table: Hierarchy Browser Type 4 Component
Target	Key	Action
RHS/ LHS Tree Shuttle	Tab	Set focus to the Tree Nodes
	Enter	Moves highlighted Tree Nodes from LHS to RHS, and from RHS to LHS

HTML Hierarchy Browser Type Checkbox (html5-hierarchy-browser-type-checkbox)

This section contains information on the Hierarchy Browser Type checkbox component.

Table: Hierarchy Browser Type checkbox Component
Target	Key	Action
Hierarchy Browser Tree	Tab	Set focus to the Tree
Tree	See Hcy Br Tree (oj-tree) for the keystrokes.
Tabs	See Tabs(oj-tabs) for the Keystrokes.

HTML Map Metadata Hierarchy Shuttle (html5-map-metadata-hierarchy-shuttle)

This section contains information on the Map Metadata Hierarchy Shuttle component.

Table: Map Metadata Hierarchy Shuttle Component
Target	Key	Action
LHS/RHS Shuttle	Tab	Set focus to the List
	Enter	Selects the List Node
	RightArrow	Moves focus to the Move Buttons on Highlight of LHS Shuttle Node
	Left Arrow	Moves focus to the Move Buttons on Highlight of RHS Shuttle Node
Move Buttons (Map, Map All, Unmap, Unmap All)	Tab	Set focus to the Move Buttons
	Enter	Highlights the selected List Node

HTML Messages (html5-messages)

This section contains information on the Messages Component.

Table: Messages Component
Target	Key	Action
Message	Tab	Set focus to the message text

HTML Metadata Tree Browser (html5-metadata-tree-browser)

This section contains information on the Metadata Tree Browser component.

Table: Metadata Tree Browser Component
Target	Key	Action
Tree Expand Collapse	Tab	Set focus to the Expand/Collapse.
	Enter	Expands the selected Tree Node
Tree Node	Tab	Set focus to the Tree Leaf Node
	Enter	Selects the Tree Node
Ok Button	Enter	The selected Tree Node is persisted

HTML Metadata Tree Control (html5-metadata-tree-control)

This section contains information on the Metadata Tree Control component.

Table: Metadata Tree Control Component
Target	Key	Action
Metadata Tree Control	Tab	Set focus to the input.
	Enter	Launch the Metadata Tree Browser

HTML Multiselect List (html5-multiselect-list)

This section contains information on the Multiselect List component.

Table: Multiselect List Component
Target	Key	Action
Select	Tab	Set focus to the input.
Drop down	UpArrow or DownArrow	Highlight the option item in the direction of the arrow.

HTML Navigation Tree (html5-navigation-tree)

This section contains information on the Navigation Tree component.

Table: Navigation Tree Component
Target	Key	Action
Tree Expand/Collapse	Tab	Set focus to the Tree Expand/Collapse.
	Enter	Activates the control and opens Tree
Tree Node	Tab	Set focus to the Tree Node
	Enter	Activates the Tree Node

HTML New Expression Builder (html5-new-expression-builder)

This section contains information on the New Expression Builder Component.

Table: New Expression Builder Component
Target	Key	Action
Expression Builder Component	Tab In	Set focus to different Controls in the Expression Builder Component
Expression Builder Component	Enter	Activates the control
The statement in the Expression Builder may contain several Input controls such as Input Text, Select, Multiselect, and so on.	See Textbox (html5-textbox) section, for details on Input Text. See Select (html5-select-one) section, for details on Select. See Select-Many (oj-select-many) section, for details on Select Many.

HTML Pagination Panel (html5-pagination)

This section contains information on the pagination panel component.

Table: Pagination Panel Component
Target	Key	Action
Button	Tab	Set focus to the input.
Button	Enter	Activates the control.
Page Input	Tab	Setting focus outside the input activates the control.
Records Per Page	Tab	Setting focus outside the input activates the control.

HTML Pagination with Jump to Page (html5-pagination-with-jump-to-page)

This section contains information on the Pagination with Jump to Page component.

Table: Pagination with Jump to Page Component
Target	Key	Action
Pagination Buttons	Tab	Set focus to the pagination buttons
	Enter	Activates the control and refreshes the Grid with the updated state of the Grid Rows
Jump To Page	Tab	Set focus to the Input field.
	Enter	Activates the control and refreshes the Grid with the updated state of the Grid Rows

HTML Radio button (html5-radio button)

This section contains information on the radio button component.

Table: Radio button Component
Target	Key	Action
Radioset	Tab	Set focus to the checked radio input.
Input	UpArrow	Select the previous input in the group.
	DownArrow	Select the next input in the group.
	Enter	Activates the radioset

NOTE:

When running the screen reader, at times the radioset is not activated. Pressing Enter activates the radioset and enables further Keystrokes like UpArrow and DownArrow.

HTML Records per Page (html5-records-per-page)

This section contains information on the Records Per Page component.

Table: Records Per Page Component
Target	Key	Action
Records Per Page Input	Tab	Set focus to the Input field.
	Enter	Activates the control and refreshes the Grid with the New Grid Row Count

HTML Records per Page Dropdown (html5-records-per-page)

This section contains information on the Records Per Page Dropdown component.

Table: Records Per Page Dropdown Component
Target	Key	Action
Button Menu	Tab	Set focus to the Input field. Activates the control and opens the Drop-down
Menu Drop-down	Tab	Moves to the next item
	Enter	Activates the selected row/checkbox
Go Button	Enter	Closes the Drop-down and refreshes the Grid/List with the New Grid Row Count

HTML Rules Menu (html5-rulesmenu)

This section contains information on the Rules Menu component.

Table: Rules Menu Component
Target	Key	Action
Grid Header	Tab	Set focus to the Grid Header
	Enter	Activates the control and opens the Drop-down
Menu Drop-down	Tab	Set focus to the Menu Item
	Enter	Activates the selected Menu Item and refreshes the Grid with the updated state

HTML Select (html5-select-one)

This section contains information on the select component.

Table: Select Component
Target	Key	Action
Select	Tab	Set focus to the input.
	Enter	Activates the control.
Drop down	UpArrow or DownArrow	Highlight the option item in the direction of the arrow.
Drop down	Esc	Collapse the drop-down list. If the drop-down is already closed, do nothing.

HTML Tabs (html5-tab)

This section contains information on the Tabs panel component.

Table: Tabs Panel Component
Target	Key	Action
Tabs	Tab	Set focus to the input.
	Enter	Activates the selected Tab

HTML Textarea (html5-textarea)

This section contains information on the textarea component.

Table: Textarea Component
Target	Key	Action
Input	Tab	Set focus to the input.

HTML Textbox (html5-textbox)

This section contains information on the textbox component.

Table: Textbox Component
Target	Key	Action
Input	Tab	Set focus to the input.

HTML Tree (html5-tree)

This section contains information on the HTML Tree Component.

Table: HTML Tree Component
Target	Key	Action
HTML Tree	Tab In	Set focus to tree Nodes
	Enter	Activates the tree Nodes