Page MenuHomePhabricator

More accessible Alerts, Notifications tooltip message in Echo
Open, Needs TriagePublic

Description

This is a proposed improvement for screen reader users (vision impairment) primarily.
The Echo icons' text is not informative: only says "Alert (0)" / "Alert (1)" / "Alerts (2)" / etc. or "Notifications ($1)", etc.
Not an issue for a regular, but for newcomer it's unclear how this element behaves.
I think the following messages would be more helpful due to being more descriptive: PATCH

"tooltip-pt-notifications-alert": "Alerts. Opens popup listing {{GENDER:|your}} alerts.",
"tooltip-pt-notifications-notice": "Notices. Opens popup listing {{GENDER:|your}} notices.",
"echo-notification-alert": "Alerts. $1 unread. Opens popup listing {{GENDER:$1|your}} alerts."`,
"echo-notification-notice": Notices. $1 unread. Opens popup listing {{GENDER:$1|your}} notices."`,

tooltip-pt-notifications-* messages are used server-side (for initial HTML), where the notification count is not available, thus the message does not include a count. The client-side JS updates the message with the count using echo-notification-* message.
This latter message key could be made consistent with the other one (eg. tooltip-pt-notifications-notice-counter.
If needed the count could be included server-side, however I haven't investigated the costs. This would benefit non-JS users (only).

As an added benefit I propose moving the message from the text node - which involves a tricky and problematic solution to hide it, that the web team is struggling with - into the tooltip (title attribute). This solves the hiding issue and also benefit non-screen-reader-users.
PATCH

Steps to test this UX:

  1. Run JAWS / NVDA / VoiceOver screen reader
  2. Open demo: http://demian-demo.epizy.com/wiki/Desktop_Improvements_volunteer_demo
  3. Close sidebar
  4. Click in the header
  5. Press TAB until one of the Echo icons is focused
  6. Listen to the reader
  7. Press TAB / SHIFT-TAB to focus the other icon
  8. Listen to the reader

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.