Accessibility/RichContentKeyboardBehaviour: Difference between revisions

Jump to navigation Jump to search
m
no edit summary
mNo edit summary
Line 124: Line 124:
</div>
</div>


=== Compound element as a sentence ===
===In-text element as a sentence===
Since compound element behaves as a part of the rich text then it should be treated as a sentence what consist of all words of the contained text. The same time it should be possible to set the caret before/after the element. To meet this requirement the empty characters are appended before the first word and after the last word of the sentence to designate the sentence boundaries like it happens for rich words. The term rich sentence will be used to designate it's for the compound rich element.
Since in-text element behaves as a part of the rich text then it should be treated as a sentence what consist of all words of the contained text. The same time it should be possible to set the caret before/after the element. To meet this requirement the empty characters are appended before the first word and after the last word of the sentence to designate the sentence boundaries like it happens for rich words. The term rich sentence will be used to designate it's for the in-text element.


<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;">
<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;">
Line 182: Line 182:
The rich element behavior on the keyboard input is the same as usual until the global keyboard navigation rules conflicts with the element behavior. In this case the element should explicitly prevent the global action, i.e. if the element prepares certain actions on the pressed key (e.g. HTML select element change the selected option on up/down keys) then it cancels the default event action.
The rich element behavior on the keyboard input is the same as usual until the global keyboard navigation rules conflicts with the element behavior. In this case the element should explicitly prevent the global action, i.e. if the element prepares certain actions on the pressed key (e.g. HTML select element change the selected option on up/down keys) then it cancels the default event action.


If the compound element is driven by global navigation rules (e.g. HTML:a or ARIA controls) then nothing special should be done. However if the ARIA control handles and process keyboard events then it should care to prevent default action explicitly.
If the in-text element is driven by global navigation rules (e.g. HTML:a or ARIA controls) then nothing special should be done. However if the ARIA control handles and process keyboard events then it should care to prevent default action explicitly.


For example if the text field processes keyboard events to implement the caret navigation then it should prevent the default action iif the caret can't be moved within the text field. So that if the caret achieves the end of text field then the global keyboard navigation are applied and the caret is moved out from the text field to next keyboard navigable content.
For example if the text field processes keyboard events to implement the caret navigation then it should prevent the default action iif the caret can't be moved within the text field. So that if the caret achieves the end of text field then the global keyboard navigation are applied and the caret is moved out from the text field to next keyboard navigable content.
Line 207: Line 207:
If the caret is inside of navigable text of the integral element then the user should traverse the navigable text entirely and then the text container where the element lives should be focused and the caret should be set before the next word after the element's word.
If the caret is inside of navigable text of the integral element then the user should traverse the navigable text entirely and then the text container where the element lives should be focused and the caret should be set before the next word after the element's word.


<b>Compound element</b>
<b>In-text element</b>


If the compound element is next on the way (i.e. the first word of its sentence is next word) then the caret should be set before the element. If the caret is before the element then it should be moved before the begin of the second word of the sentence. If the the sentence consist of one word then the caret should be moved before the word following the sentence.  
If the in-text element is next on the way (i.e. the first word of its sentence is next word) then the caret should be set before the element. If the caret is before the element then it should be moved before the begin of the second word of the sentence. If the the sentence consist of one word then the caret should be moved before the word following the sentence.  


<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;">
<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;">
Line 218: Line 218:
</div>
</div>


So that the compound element is processed as a normal text.  
So that the in-text element is processed as a normal text.  


If the caret is in the middle of the rich sentence then the user should navigate the whole sentence by words. For example, if the caret is inside of the anchor then the caret should be moved by words through the anchor text.
If the caret is in the middle of the rich sentence then the user should navigate the whole sentence by words. For example, if the caret is inside of the anchor then the caret should be moved by words through the anchor text.


If the caret is inside the focusable compound element and the caret goes out of the element then the area where the element is placed should be focused.
If the caret is inside the focusable in-text element and the caret goes out of the element then the area where the element is placed should be focused.


=== Navigation by characters ===
=== Navigation by characters ===
Line 232: Line 232:
and  
and  


#if the element is compound or contains navigable text then caret position should be set before the first character of the element's content  
#if the element is in-text or contains navigable text then caret position should be set before the first character of the element's content  
#otherwise the caret should be set on the element, i.e. placed between the empty characters.
#otherwise the caret should be set on the element, i.e. placed between the empty characters.


Line 249: Line 249:
</div>
</div>


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.  
If the in-text 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.  


<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;">
<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;">
Line 269: Line 269:
=== Tab navigation ===
=== 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.  
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 in-text element both.  


For example, if editable area contains two buttons (HTML and ARIA buttons) and there is one button outside of editable area  
For example, if editable area contains two buttons (HTML and ARIA buttons) and there is one button outside of editable area  
Line 291: Line 291:
When integral element participates in selection then it should be selected entirely always. If the integral element has own selection behaviour (like a HTML input) while the it's focused and the user starts the selection inside of it then there is no way to extend the selection out of boundaries of the element.  
When integral element participates in selection then it should be selected entirely always. If the integral element has own selection behaviour (like a HTML input) while the it's focused and the user starts the selection inside of it then there is no way to extend the selection out of boundaries of the element.  


When compound element participates in selection then the editor should provide two opposite options to the user. It should be possible to select the element entirely so that its content wouldn't be selected. On the another hand it should be possible to select the content of the compound element so that the element itself wouldn't be selected.  
When in-text element participates in selection then the editor should provide two opposite options to the user. It should be possible to select the element entirely so that its content wouldn't be selected. On the another hand it should be possible to select the content of the in-text element so that the element itself wouldn't be selected.  


Visually the selected entirely element might have blue border around it.  
Visually the selected entirely element might have blue border around it.  
Line 301: Line 301:
At the same time if the integral element encountered on the way then the element is appended to the selection entirely.  
At the same time if the integral element encountered on the way then the element is appended to the selection entirely.  


If the compound element is encountered on the way while  
If the in-text element is encountered on the way while  


#the user moves by words then the element is appended to the selection entirely  
#the user moves by words then the element is appended to the selection entirely  
#the user moves by characters then the element's content is appended consecutively to the selection until the user reaches the end of the element.  
#the user moves by characters then the element's content is appended consecutively to the selection until the user reaches the end of the element.  
##If the caret leaves the element then the element is appended to the selection entirely.  
##If the caret leaves the element then the element is appended to the selection entirely.  
##If the user releases the selection modifier key then the compound element is focused while the caret stays inside of the element's content.
##If the user releases the selection modifier key then the in-text element is focused while the caret stays inside of the element's content.


If the selection is started inside of compound element while is is focused then editor will take the focus once the caret leaves the compound element content.
If the selection is started inside of in-text element while is is focused then editor will take the focus once the caret leaves the in-text element content.
Confirmed users
1,396

edits

Navigation menu