Як кнопка
Приклад коду
<Action
onClick={() => {
// your code
}}
>
Open modal
</Action>Результат (скриншот)
Вебдоступний React-компонент для кнопок і посилань
Кнопка чи посилання? <button> чи <a>?
React-компонент, який автоматично обирає правильний HTML-елемент і забезпечує вебдоступність.
Один компонент — різні сценарії
Кнопка
Неактивна кнопка
Посилання
Посилання як кнопка
Що вміє компонент
- Автоматично обирає між <button> і <a> на основі переданих пропсів
- Написаний на TypeScript і підійде для всіх сучасних проєктів
- Підтримує коректну поведінку неактивного (disabled) стану
- Зовнішній вигляд не залежить від функціоналу, а визначається через пропси
- Підтримує додавання кастомних стилів через ваші класи
- Забезпечує вебдоступність та відповідає вимогам WCAG 2.2
- Підтримує керування за допомогою клавіатури та скринрідера
Приклади використання
Як неактивна кнопка
Приклад коду
<Action
onClick={() => {
// your code
}}
disabled
>
Open modal
</Action>Результат (скриншот)
Як посилання
Приклад коду
<Action
href="/contacts"
target="_blank"
>
Contact page
</Action>Результат (скриншот)
Як посилання з дизайном кнопки
Приклад коду
<Action
href="/profile"
variant="button"
>
My profile
</Action>Результат (скриншот)
Який тег обрати — <button> чи <a>?
Типова проблема в React-інтерфейсах
Проблема вибору семантичного тегу постає в задачі “кнопка чи посилання в React”, коли посилання виглядає як кнопка, або кнопка виглядає як посилання. Коли використовувати <button>, а коли <a>?
Існує правило, яке допомагає обирати правильно: якщо клік на інтерактивний елемент веде на іншу сторінку чи інше місце в межах сторінки, то слід використовувати тег <a>.
Однак, незважаючи на це відоме правило, розробники мають дилему вибору семантичного тегу.
Якщо помилково обрано тег <button> тоді, коли потрібно використовувати <a> для посилання, виникають перешкоди для клавіатурної навігації, а користування сайтом за допомогою скринрідера може стати значно складнішим.
Порушення семантики HTML у кнопках і посиланнях можуть намагатись виправити за допомогою ARIA-атрибутів, однак часто це створює додаткові проблеми.
Як працює компонент
Семантика
Компонент сам обирає відповідний семантичний тег:
- <a>, якщо передано prop href, тобто за функціоналом це посилання
- <button>, якщо передано prop onClick, тобто це кнопка за функціоналом
Зовнішній вигляд
Також окремий prop визначає зовнішній вигляд елемента. Вам не потрібно витрачати час на переписування стилів нативного HTML-елемента, а достатньо просто вказати бажаний зовнішній вигляд через один пропс. Можна отримати посилання, яке виглядає як кнопка або навпаки — кнопку, яка виглядає як посилання.
Стилі
У компоненті реалізовано базові стилі, але існує проп, який дозволяє їх не застосовувати.
Також є можливість змінити дизайн елементів через ваші кастомні класи.
Disabled
У компоненті реалізовано правильну роботу з disabled станом для кнопок і посилань з урахуванням вимог до вебдоступності.
Додаткові пропси
Через окремі пропси ви можете налаштовувати властивості посилання (як-от target чи rel), а також вказувати потрібний тип кнопки (submit чи інший).
Вебдоступність
WCAG 2.2
- Семантичні HTML-теги
- Контрастність 7:1 (зі стилями компоненту)
- Розмір не менший 44х44 px (зі стилями компоненту)
Клавіатурна навігація
- Навігація за допомогою клавіатури
- Видимий індикатор фокусу
- Неактивний елемент виключений з порядку табуляції
Підтримка скринрідерів
- Навігація за допомогою скринрідера
- Елементи коректно озвучуються скринрідером
- Можливість додавати aria-label
Хочете використовувати цей компонент у своєму проєкті?
Заповніть форму, і ми повідомимо вас, коли його можна буде придбати.