Confirmed users
1,396
edits
mNo edit summary |
|||
| Line 124: | Line 124: | ||
</div> | </div> | ||
=== | ===In-text element as a sentence=== | ||
Since | 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 | 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> | <b>In-text element</b> | ||
If the | 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 | 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 | 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 | #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 | 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 | 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 | 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 | 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 | ##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 | 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. | ||