Spatial Navigation Guideline for HTMLFormElement

Test page: https://wicg.github.io/spatial-navigation/demo/sample/heuristic_input_elements.html

Element type	Control type	Guideline
HTMLInputElement (type = 'date', 'datetime', 'month', 'week', 'time')	spinner control	Entering the focus to the element The focus moves to the closet input field in the direction. If we assume that the input element is implemented as UA-defined shadow dom, the shadow host doesn't gain the focus and the focus moves directly to the shadow root. Moving the focus inside the element Pressing the left-arrow key or right-arrow key The focus moves the closet input field in the direction If there is no more input field for the focus to move, the focus moves to the shadow host. Pressing the up-arrow key or down-arrow key The focus remains at the same input field and the arrow key works for selecting the value of it.
HTMLInputElement (type = 'number')	cursor control	Entering the focus to the element The whole existing text in the element is selected and the focus moves to it. Moving the focus inside the element Pressing the left-arrow key or right-arrow key The focus moves the closet input field in the direction. If there is no more input field for the focus to move, the focus moves to the shadow host. Pressing the up-arrow key If the whole text is selected, the focus moves the start position of the text. From the existing number in the text, the number increases. Pressing the down-arrow key If the whole text is selected, the focus moves the end position of the text. From the existing number in the text, the number decrease.
HTMLInputElement (type = 'email', 'password', 'search', 'tel', 'text', 'url')	cursor control	Entering the focus to the element The whole existing text in the element is selected and the focus moves to it. Moving the focus inside the element Pressing the left-arrow key If the whole text is selected, the cursor moves the start position of the text. Otherwise, the cursor moves to the left. If the cursor is at the start position of the text, the focus moves to the shadow host. Pressing the right-arrow key If the whole text is selected, the cursor moves the end position of the text. Otherwise, the cursor moves to the right. If the cursor is at the end position of the text, the focus moves to the shadow host. Pressing the up-arrow key If the whole text is selected or the cursor is at the end position of the text, the focus moves the start position of the text. If the cursor is at the start position of the text, the focus moves to the shadow host. Pressing the down-arrow key If the whole text is selected or the cursor is at the start position of the text, the focus moves the end position of the text. If the cursor is at the end position of the text, the focus moves to the shadow host.
HTMLTextArea	cursor control	Entering the focus to the element The whole existing text in the element is selected and the focus moves to it. Moving the focus inside the element Pressing the left-arrow key If the whole text is selected, the cursor moves the start position of the text of the first line. Otherwise, the cursor moves to the left. If the cursor is at the start position of the text of the first line, the focus moves to the shadow host. If the cursor is at the start position of the text of the nth(n > 1) line, the focus moves to the end position of the (n-1)th line. Pressing the right-arrow key If the whole text is selected, the cursor moves the end position of the text of the last line. Otherwise, the cursor moves to the right. If the cursor is at the start position of the text of the first line, the focus moves to the shadow host. If the cursor is at the start position of the text of the nth(n > 1) line, the focus moves to the end position of the (n-1)th line. Pressing the up-arrow key If the whole text is selected or the cursor is at the end position of the text, the focus moves the start position of the text of the first line. If the cursor is at the start position of the text of the nth(n > 1) line, the focus moves to the start position of the text of the (n-1)th line. If the cursor is at the start position of the text of the first line, the focus moves to the shadow host. Pressing the down-arrow key If the whole text is selected or the cursor is at the start position of the text, the focus moves the end position of the text of the last line. If the cursor is at the end position of the text of the nth(n >= 1) line, the focus moves to the end position of the text of the (n+1)th line. If the cursor is at the end position of the text of the last line, the focus moves to the shadow host.
HTMLInputElement (type = 'range')	slider control	Entering the focus to the element The focus moves to the slider box. Moving the focus inside the element Pressing the left-arrow key or the up-arrow key If the slider box is at the position of the min value, the focus moves to the shadow host. Otherwise, the slider box moves to the left. Pressing the right-arrow key or the down-arrow key If the slider box is at the position of the max value, the focus moves to the shadow host. Otherwise, the slider box moves to the right.
HTMLInputElement (type = 'radio')	group focus control	Entering the focus to the element The focus moves to the first item of the radio group. Moving the focus inside the element Pressing the arrow keys The focus moves to the closest item inside the radio group in the corresponding direction. If there is no more item for the focus to move, the focus moves to the closet element outside the radio group in the corresponding direction. Note: Pressing the arrow keys doesn't work for the selecting the item. (The space or enter key may work for the selection.)
HTMLDataListElement	drop down control	Entering the focus to the element The focus moves to the element and the cursor is shown. Moving the focus inside the element NOTE: Pressing the down arrow key opens the drop down list If the element is in the editing mode, it works as the single line text type input element Pressing the left-arrow key or the right-arrow key If the drop down list is being opened, the focus moves to the shadow host. Otherwise, NaN. Pressing the up-arrow key If the drop down list is being opened, the focus moves to one of the items on the list with looping. Otherwise, the focus moves to the shadow host. Pressing the down-arrow key If the drop down list is being opened, the focus moves to one of the items on the list with looping. Otherwise, the drop down list will be opened.
HTMLSelectElement, HTMLOptGroup	drop down control	Entering the focus to the element The focus moves to the shadow host of the element. Moving the focus inside the element NOTE: Pressing the enter key opens the drop down list. Pressing the left-arrow key or the right-arrow key If the drop down list is being opened, the focus moves to the shadow host and the list are closed. Otherwise, NaN. Pressing the up-arrow key If the drop down list is being opened, the focus moves to the item in the list in the corresponding direction. Otherwise, the focus moves to the closest element in the corresponding direction. If the focus reaches the first item in the list, the list is closed and the focus moves to the shadow host. Pressing the down-arrow key If the drop down list is being opened, the focus moves to the item in the list in the corresponding direction. Otherwise, the focus moves to the closest element in the corresponding direction. If the focus reaches to the last item in the list, the list is closed and the focus moves to the shadow host.