Separator
Роздільник із підписом або без — і правило, коли він потрібен скрінрідеру, а коли ні.
Лінія між блоками. Уся складність тут не у вигляді, а в одному питанні: чи має скрінрідер знати про цю межу.
Основні дані клієнта
Контакти
Угоди, закриті понад рік тому
Декоративний чи смисловий
Правило коротке, а ціна помилки різна в обидва боки.
Декоративний (decorative: true, типово) — межу вже виражає розмітка
навколо: рядки списку, секції картки, групи тулбара. Лінія лише малює те,
що й так зрозуміло зі структури. Такий роздільник отримує aria-hidden і
для скрінрідера не існує. Інакше довгий список перетворюється на «роздільник,
пункт, роздільник, пункт» — сто зайвих оголошень на екран.
Смисловий (decorative: false) — межа існує ЛИШЕ як ця лінія. Дві
незв'язані групи пунктів меню, «або» між способами входу. Тут потрібен
role="separator", інакше межа зникає для тих, хто її не бачить.
Підпис (label) робить роздільник смисловим автоматично: лінія, яка щось
говорить, за визначенням несе зміст. decorative при ньому ігнорується.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
orientation | horizontalvertical | "horizontal" | Напрям лінії. Вертикальна вимагає, щоб батько був flex-рядком. |
labelPosition | centerstartend | "center" | Де стоїть підпис уздовж лінії. |
spacing | mdnonesm | "md" | Зовнішні відступи навколо лінії. |
label | string | — | Текст посередині лінії: «або», «Архів». Наявність підпису САМА робить роздільник смисловим, тож `decorative` при ньому ігнорується. |
decorative | boolean | true | `true` — межа вже виражена розміткою навколо, лінія лише декор. `false` — межа існує ЛИШЕ як ця лінія. |
Слоти
| Назва | Опис |
|---|---|
default | Власний підпис замість `label`. `label` при цьому лишається потрібним: роль `separator` не бере назву з вмісту, тож `aria-label` береться саме з нього. |
Коли використовувати
- Між секціями картки або панелі, де відступу замало.
- Між групами дій у тулбарі чи меню.
- Як підписану межу: «або», «Архів», «Показати ще».
- Вертикально — між дрібними діями в одному рядку.
Коли НЕ використовувати
- Замість відступу. Якщо блоки й так читаються окремо, лінія лише додає шуму.
- Між рядками таблиці — для цього є межі самої таблиці.
- Як межу картки: це
borderкартки, а не окремий елемент. - Вертикально поза flex-рядком:
self-stretchнема від чого відштовхнутись, і лінія схлопнеться в нуль.
Доступність
Текст підпису має aria-hidden, а ім'я береться з aria-label. Так треба:
роль separator не обчислює назву з вмісту, і без aria-label роздільник
лишився б безіменним, а видимий текст прозвучав би окремо від нього.
aria-orientation виставляється лише для смислового варіанту — у
декоративного немає ролі, до якої його можна прикласти.