[Toast] Семантика Toast IF-376

[JackUait]

Сейчас в компоненте Toast две кнопки отмеченные на рисунке на самом деле не кнопки, а два span'а.

Это накладывает свои ограничения. Основное из которых - доступность интерфейса.
Для того, чтобы сделать эти элементы доступными:

1. Оба span'а нужно сделать кнопками.
2. Кнопке-крестику нужно дать aria-label с описанием её предназначения. Предлагаю что-то вроде: "Закрыть оповещение". "Закрыть тост/toast" здесь не подходит, потому что это не информативно для пользователей скрин-ридеров.
3. Дать пользователям возможность попадать на эти элементы с клавиатуры:
   i. Более простой вариант: повысить tabIndex обеих кнопок, чтобы на них можно было быстро переключиться, когда появляется Toast. Такой вариант не супер-интуитивен, так как пользователю нужно понять, что на экране появилось какое-то оповещение и переключиться на него (для оповещения о таких событиях есть специальные aria-* атрибуты, но их как и tabIndex следует использовать с осторожностью).
   ii. Более сложный вариант: при открытии тоста переключать фокус на интерактивные элементы внутри тоста и позволять пользователю переключаться только между этими интерактивными элементами, до тех пор, пока тост не закроется самостоятельно или пока пользователь его не закроет. После закрытия тоста возвращать фокус пользователя на триггер.

Оба описанных способа не идеальны, оба способа имеют свои плюсы и минусы. Если есть другие варианты реализации этой логики - буду рад их услышать.

Есть ещё одна проблема с переходом со span'а на button и связана она со стилями. Так как базовые стили button не совпадают с базовыми стилями span. Эту проблему нужно решать глобально, каким-нибудь reset.css или normalize.css.