Accessibility/EditorBehaviourOnUserInput: Difference between revisions

Jump to navigation Jump to search

Accessibility/EditorBehaviourOnUserInput (view source)

Revision as of 01:30, 15 March 2010

4,428 bytes removed ,  15 March 2010
m
→‎Keyboard navigation
Line 59: Line 59:


For example, if textbox (HTML:input) is focused then arrow keys move through its text. If caret reaches the end of the text then editor takes the focus and caret position is set immediately after the textbox element. If listbox (HTML:select) is focused then up/down arrow keys change selected item, if the last listbox option is selected and arrow down key is pressed then editor takes the focus and caret is moved to the text or control element placed below the listbox control. The exception might be made for combobox element when its popup is open which should be closed by user before he can continue the navigation and editor can take the focus.
For example, if textbox (HTML:input) is focused then arrow keys move through its text. If caret reaches the end of the text then editor takes the focus and caret position is set immediately after the textbox element. If listbox (HTML:select) is focused then up/down arrow keys change selected item, if the last listbox option is selected and arrow down key is pressed then editor takes the focus and caret is moved to the text or control element placed below the listbox control. The exception might be made for combobox element when its popup is open which should be closed by user before he can continue the navigation and editor can take the focus.
==Keyboard navigation==
===Navigation by words===
If the editor is focused, i.e. the caret position is somewhere in the middle of the editable text, if the user navigates by words (ctrl + arrow key or alt + arrow depending on platform) and special content element is encountered on the way then the special content element should be skipped, i.e. the caret should be moved from the position before the element to the position after the element, the editor should stay focused.
If the control element is focused and the user navigates by words then
# caret position should be moved after the control element if no action can be performed on the control element on the pressed key
# otherwise the control's action should be invoked.
It's a rare case when control element has an action on the "move to the next/previous word" keyboard combination. The example of such control is textbox (like HTML input element) containing several words. In this case the user should navigate consecutively to the last word of textbox and then leave the control, i.e. editor should take the focus and caret should be set immediately after the control.
If the compound element is focused, the caret is somewhere in the middle of element's content and the user navigates by words then the caret should be moved by constituent words of the element until it reaches the end of the element's content. Then editor should take the focus and the caret should be set after the element. The behaviour is similar to described above behaviour of textbox.
===Navigation by characters===
If the user navigates through editable area by characters and special content element is encountered on the way then
# if the element is focusable then it should be focused
and
# if the element is compound then caret position should be set before the first character of the element's content
# otherwise the caret should be set on the element.
For example, if the control element is disabled or if the caret navigation mode is off and the element is non editable area then the caret should be set on the element, the editor should stay focused. Visually it might look like dashed border around the element.
If the control element is focused and the user navigates by characters then
# editor should be focused and caret position should be set after the control element if no control action can be performed on the pressed key
# otherwise control action should be performed.
For example if two buttons (HTML button) are placed after another
<pre>
text<button>btn1</button><button>btn2</button>
</pre>
then right arrow key presses should traverse "text" by characters, then focus the 1st button, focus the editor and set caret position between buttons, then focus the 2nd button, then focus the editor and set caret position after the second button.
If the compound element is focused and the user navigates by characters then caret should be moved consecutively to the end of the element's content, then should be set  after the element and the editor should take the focus.
For example, if the HTML anchor and HTML button are placed after another
<pre>
<a href="">link</a><button>btn</button>
</pre>
then caret should be moved through the "link" text, should be set after anchor element and then button should be focused.
===Tab navigation===
If the special content element is focused then pressing tab should navigate to the next focusable element in tab order. Next focusable element in tab order can be encountered either inside or outside of editable area. This requirement is applied to control elements and compound element both.
For example, if editable area contains two buttons (HTML and ARIA buttons) and there is one button outside of editable area
<pre>
<div contentEditable="true">
  Text<button>btn1</button>text<div role="button" tabindex="0">btn2</button>text
</div>
<button>btn3</button>
</pre>
and the 1st button is focused then pressing tab should move the focus to the 2nd button and then to the 3rd button.
If the editor is focused then pressing tab should insert '\t' character or its used analogue or move the focus outside of editable area to the next tabable element what depends on editor preferences or platform.
===Home/end navigation===
The user should be able to navigate to the begin/end of
*the current line (for example, Home/End keys)
*the editable area (for example, Home/End keys with pressed 'alt' modifier key).


==Mouse interaction with special content==
==Mouse interaction with special content==
Surkov.alexander
Confirmed users
1,396

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/208240"

Navigation menu