tabindex

Author: iliakan

2-ui/4-forms-controls/2-focus-blur/article.md

@@ -112,16 +112,20 @@
 
 Это можно изменить HTML-атрибутом `tabindex`.
 
-Цель этого атрибута - указать порядковый номер элемента, когда клавиша `key:Tab` используется для переключения между элементами.
+Любой элемент поддерживает фокусировку, если имеет `tabindex`. Значение этого атрибута - порядковый номер элемента, когда клавиша `key:Tab` (или что-то аналогичное) используется для переключения между элементами.
 
 То есть: если у нас два элемента, первый имеет `tabindex="1"`, а второй `tabindex="2"`, то находясь в первом элементе и нажав `key:Tab` -- мы переместимся во второй.
 
+Порядок перебора таков: сначала идут элементы со значениями `tabindex` от `1` и выше, в порядке `tabindex`, а затем элементы без `tabindex` (например, обычный `<input>`).
+
+При совпадающих `tabindex` элементы перебираются в том порядке, в котором идут в документе.
+
 Есть два специальных значения:
 
-- `tabindex="0"` делает элемент последним.
-- `tabindex="-1"` значит, что `key:Tab` игнорирует этот элемент.
+- `tabindex="0"` ставит элемент в один ряд с элементами без `tabindex`. То есть, при переключении такие элементы будут после элементов с `tabindex ≥ 1`.
 
-**Любой элемент поддерживает фокусировку, если имеет `tabindex`.**
+    Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными `<input>`.
+- `tabindex="-1"` позволяет фокусироваться на элементе только программно. Клавиша `key:Tab` проигнорирует такой элемент, но метод `elem.focus()` будет действовать.
 
 Например, список ниже. Кликните первый пункт в списке и нажмите `key:Tab`:
 
@@ -140,9 +144,9 @@
 </style>
 ```
 
-Порядок такой: `1 - 2 - 0` (ноль всегда последний). Обычно `<li>` не поддерживает фокусировку, но `tabindex` полностью включает её, а также события и стилизацию псевдоклассом `:focus`.
+Порядок такой: `1 - 2 - 0`. Обычно `<li>` не поддерживает фокусировку, но `tabindex` включает её, а также события и стилизацию псевдоклассом `:focus`.
 
-```smart header="`elem.tabIndex` тоже работает"
+```smart header="Свойство `elem.tabIndex` тоже работает"
 Мы можем добавить `tabindex` из JavaScript, используя свойство `elem.tabIndex`. Это даст тот же эффект.
 ```