Кнопка «Нравится» теряет подпись в некоторых случаях

Привет команде!
Это скорее краткий отчёт. Я заметил в другой ветке, что кнопка «Нравится» иногда не имеет метки доступности. Пока я не нашёл закономерности. Но, возможно, это связано с тем, получил ли пост уже одно или несколько лайков или ещё нет, и элемент управления разделяется, чтобы это отобразить. Тогда я вижу две кнопки. На одной есть счётчик, вторая без метки.

Марко

3 лайка

Ах, я думаю, это потому, что мы тестируем здесь на Meta плагин Discourse Reactions (Notice: testing Discourse Reactions here on meta for 1 week!). Нам нужно это исправить! Спасибо за сообщение.

6 лайков

@Ahmed_Gagan К сведению, обязательно ознакомьтесь с этим.

5 лайков

Я попробовал и протестировал это в самых разных сценариях, но не смог воспроизвести проблему. Метка всегда отображалась, но при первом появлении наблюдается небольшая задержка — это общее поведение атрибута title.
Я предполагаю, что проблема связана с подсказкой, отображаемой для кнопки «Нравится». Мы на одной волне?

1 лайк

Я имею в виду то, что скринридер озвучивает для кнопки, на которую вы нажимаете, чтобы поставить лайк посту. Или, возможно, можно добавить и другие реакции, но мой скринридер об этом вообще ничего не сообщает. Единственный элемент, для которого у меня есть метка, — это элемент, отображающий текущее количество лайков, если оно равно 1 или больше. Если оно равно 0, этот элемент отсутствует. Однако кнопка, которую мне нужно нажать, чтобы добавить реакцию «Like», не имеет метки для моих скринридеров на Windows, Mac и iOS.

Я слепова, поэтому не использую мышь. Кроме того, атрибут title в целом проблематичен для сенсорных взаимодействий, поскольку обычно нет простого способа вызвать наведение курсора мыши.

Надеюсь, это поможет…

Для ясности: я имею в виду кнопку #discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button. У этой кнопки нет ни атрибута title, ни aria-label; внутри находится только SVG, у которого установлен атрибут aria-hidden. И даже если бы это было не так, ни этот SVG, ни его дочерние элементы не содержат никакой информации, которую мог бы использовать скринридер. Поэтому решение здесь следующее:

  1. Добавить этой кнопке атрибут aria-label с текстом вроде «Поставить лайк этому посту» или «Добавить реакцию Like» или подобным. Поскольку в будущем могут появиться и другие реакции, эта формулировка должна явно указывать, какая именно реакция добавляется.
  2. Элемент, содержащий счётчик, #discourse-reactions-counter-916340, вероятно, должен получить более подробную информацию о том, кто именно отреагировал и какой реакцией. Я не знаю, как люди с нормальным зрением получают эту информацию — возможно, при клике на это число появляется всплывающее окно. Но это также должно быть доступно для скринридеров и пользователей клавиатуры.
  3. Если в будущем будут добавлены другие реакции, они также должны быть доступны не только для мыши, но и для сенсорного управления, клавиатуры и скринридеров.

На данный момент, по крайней мере для меня, виджет позволяет добавлять только реакцию «like».

Извините за множество сообщений, но это показывает, насколько тщательным иногда приходится быть, чтобы найти причину проблемы. Атрибут title для постов, которые не мои, в настоящее время находится на родительском div-элементе самой кнопки «like». Однако, чтобы скринридер его распознал, атрибут title должен быть на самой кнопке. Скринридеры не считывают title с произвольных элементов. За последние 25 лет это обобщение слишком часто нарушалось. Поэтому, если переместить атрибут title на дочерний элемент <button>, скринридер будет правильно его распознавать.

1 лайк

Спасибо, @MarcoZehe, за указание точного места, где требовался заголовок.
Я добавил запрос на слияние (PR) здесь, который решит вашу проблему.

@MarcoZehe, PR теперь принят. Вы можете обновить плагин до последней версии и попробовать его.

Спасибо! Я подожду, пока этот инстанс загрузит последний код для плагина. Я не запускаю свой собственный инстанс Discourse, поэтому мне некуда загрузить плагин. Спасибо за быстрое исправление!

4 лайка

Спасибо большое, Марко.

Я только что повторно развернул реакции здесь (должны появиться в течение примерно 15 минут).

Дайте знать, если проблема кажется решённой.

3 лайка

Привет, @Sam, проблема, безусловно, выглядит решённой. Спасибо!

4 лайка

Огромное спасибо, Марко, за тестирование!

2 лайка