Улучшает кнопки для оценки материала

[TatianaFokina]

Исправления в рамках #1067 и #1071.

Что изменилось:

• перенесла «Спасибо» из заголовка под поле с оценкой, заменила текст на «Спасибо за оценку ❤️»;
• изменила текст ошибки с «Во время отправки формы что-то пошло не так. Попробуйте ещё раз?» на «Во время отправки формы что-то пошло не так. Перезагрузите страницу и попробуйте оценить материал ещё раз»;
• теперь заголовок групп кнопок постоянно «Статья была полезной?», сделала его <legend>;
• связала статус об успешной отправке и ошибку с <form> с помощью aria-describedby и live region;
• навесила на <fieldset> атрибут inert вместо disabled (disabled нельзя задавать группам элементов, только одному интерактивному);
• убрала автоматический перенос фокуса на текстовое поле (так не очень хорошо делать в формах);
• добавила лейбл к полю с другой причиной;
• сделала поле с другой причиной required;
• добавила состояние aria-expanded для кнопок, раскрывающих блоки;
• слегка увеличила высоту кнопок с причиной, чтобы они были больше 23px.

Почему так решила описала уже в ишьюз (кроме inert и заголовка). Кажется, что логичнее и удобнее, чтобы этот заголовок относился к двум кнопкам, а не ко всей форме. Тем более это хорошая практика, чтобы у <fieldset> был заголовок.

Что касается текста ошибки, то он какой-то непонятный. Почему возникла ошибка? Как её исправить? Что вообще делать? Попробовала исправить эту непоредёленность предложением про перезагрузку страницы.

Единственный вопрос остался к @skorobaeus.

Нетекстовый контраст кнопок для оценок в статьях (#F499AF, #51e957) на белом фоне (#ffffff) в светлой теме соотносятся 1.59:1 и не соответствуют минимальному соотношению 3:1.

[skorobaeus]

Нетекстовый контраст кнопок для оценок в статьях (#F499AF, #51e957) на белом фоне (#ffffff) в светлой теме соотносятся 1.59:1 и не соответствуют минимальному соотношению 3:1.

Вот это обидно, конечно, мне очень нравятся эти кнопки :( У меня есть два ответа.

Ответ "Торг":
APCA алгоритм говорит, что для нетекстовых элементов контраст достаточен, можно оставить, как есть:

Ответ "Смирение":
Можно сделать каомодзи цветом текста, выглядит иначе, но неплохо, контрастность на века:

Давайте обсудим!

---

Кстати, сейчас в тёмной теме при нажатии на кнопки каомодзи белый. А по макету должен быть чёрный:

Предлагаю это поправить заодно вне зависимости от вопроса выше :)

[TatianaFokina]

Давай тогда оставим как есть, только в нажатом состоянии и при наведении будем делать мордочки чёрными (короче, когда есть заливка у кнопки)?

[skorobaeus]

Давай тогда оставим как есть, только в нажатом состоянии и при наведении будем делать мордочки чёрными (короче, когда есть заливка у кнопки)?

Звучит как отличный план!

[TatianaFokina]

Звучит как отличный план!

Поменяла цвет мордочек, больше вопросов нет. Остаётся только дождаться ревью!

[TatianaFokina]

Тут тоже можно смело ревьюить.

[solarrust]

При «другой причине» в случае пустого поля мы не отправляем форму, что логично. Но не блокируем кнопку и не показываем, что надо заполнить поле. Кажется, надо как-то дать понять, чего мы ждём.

В остальном дикий кайф 🥰

[TatianaFokina]

При «другой причине» в случае пустого поля мы не отправляем форму, что логично. Но не блокируем кнопку и не показываем, что надо заполнить поле. Кажется, надо как-то дать понять, чего мы ждём.

Хочу с этим разобраться в отдельном пиаре, там не всё так просто. Надо, походу, делать кастомную валидацию.

[solarrust]

required не решает проблему?

[TatianaFokina]

required не решает проблему?

Неа, он даже создаёт новую. Так как поле required с display: none при этом, браузер не понимает, что от него хотят, и просто кидает ошибку и не даёт тебе просто поставить оценку нравится даже. Типа, это поле надо заполнить даже если ты указал другую причину и хочешь поставить другую оценку.

[solarrust]

Может докидывать атрибут при показе скриптом этого поля?

[TatianaFokina]

Может докидывать атрибут при показе скриптом этого поля?

Можно попробовать.

[TatianaFokina]

Готово! Теперь на поле появляется атрибут required при открытии выпадашки.

[github-actions]

Превью контента из 85e6d5a опубликовано.

[solarrust]

Спасибо тебе большое. Великое дело 🙏