Page MenuHomePhabricator

Impact Module: Check Accessibility goals & edge cases
Open, In Progress, HighPublic

Description

Description

This should be one of the final tasks completed for the new Impact Module. It is basically a reminder for us to meet our Accessibility goals and check a few other edge bases.

Acceptance Criteria

Accessibility Goals:

  • All Positive Reinforcement features pass Chrome Lighthouse and QA Accessibility scan
  • All features we work on for Positive Reinforcement are navigable by keyboard
  • Impact Module graphs have alt text that conveys the basic meaning of the chart

Edge cases:

  • If a thumbnail doesn't load, (certain SVGs are not being rendered properly as thumbnails) then we instead show the standard placeholder thumbnail image. Example:
    Screen Shot 2022-07-18 at 4.07.36 PM.png (164×170 px, 16 KB)

Completion checklist

Functionality

  • The patches have been code reviewed and merged
  • The task passes its acceptance criteria

Engineering

  • There are existing and passing unit/integration tests
  • Tests for every involved patch should pass
  • Coverage for every involved project should have improved or stayed the same

Design & QA

  • If the task is UX/Design related: it must be reviewed and approved by the UX/Design team
  • Must be reviewed and approved by Quality Assurance.

Documentation

  • Related and updated documentation done where necessary

Event Timeline

Change 842457 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] User impact: accessibility review

https://gerrit.wikimedia.org/r/842457

Sgs changed the task status from Open to In Progress.Tue, Nov 15, 12:09 PM
Sgs moved this task from Triaged to Current Sprint on the Growth-Team board.
Sgs edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
Sgs moved this task from Incoming to Code Review on the Growth-Team (Current Sprint) board.

Change 842457 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] User impact: accessibility review

https://gerrit.wikimedia.org/r/842457

Change 857708 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Mentee overview: call $i18n().text() before passing string type props

https://gerrit.wikimedia.org/r/857708

Change 857710 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Vue components: codex icons hook exports icons as strings or objects

https://gerrit.wikimedia.org/r/857710

Change 857709 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] User impact: call $i18n().text() before passing props with type string

https://gerrit.wikimedia.org/r/857709

Status update: the acceptance criteria are still not met, I'm doing rounds of cleaning up a lot of warnings that we have due to missing labels (labels that we know we want for accessibility reasons but we haven't think of a copy yet). I'm hoping that the remaining "missing required label" warnings serve us to quickly update the copy book before T322890: Positive Reinforcement: finalize copy and QQQ descriptions for TranslateWiki.net is done. The Safari keyboard issues still need to be investigated.

Change 857710 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Vue components: codex icons hook exports icons as strings or objects

https://gerrit.wikimedia.org/r/857710

Change 857709 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] User impact: call $i18n().text() before passing props with type string

https://gerrit.wikimedia.org/r/857709

Change 857709 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] User impact: always call $i18n().text()

https://gerrit.wikimedia.org/r/857709

kostajh triaged this task as High priority.Thu, Nov 24, 7:55 PM

The module is passing all lighthouse audits. Firefox's accessibility report is failing for the same issue repeatedly, SVG graphics that are not focusable (they don't have any user interaction associated, eg: pencil icon, thanks icon, clock icon). The error is also triggered in Codex docs for the icon component so I'm not sure yet on which side it is to fix, I have asked the question in T311026#8423117

The error appears on the following icons:

  1. The score card icons (pencil, smile, clock, chart) ( 4 errors ).
  2. The info icons on the Thanks and Streak score cards ( 2 errors ).
  3. The clock icon ( as many as articles on that state )
  4. The icon shown in the image thumbnail on its empty state ( as many as articles on that state )

I think we should wait DST's directions on how to proceed. I will file a separated task once we clarify in which side should be fixed.

Bringing over another accessibility issue noticed by @RHo

Hi again, @kostajh or @Sgs - this is maybe minor regression but I've noticed that the new impact module's clock icon has the message in a browser tooltip on hover, and is not keyboard accessible. It should appear and behave in the same way as before, which is a pop-over info text that is shown either on hover or via keyboard select:

Expected:
image.png (370×766 px, 55 KB)
Actual:
image.png (172×706 px, 34 KB)

Should I file a ticket or can it be resolved as part of this task?

Hmm, agreed that it is changed behavior from the old impact module. From an accessibility standpoint, I wonder if the behavior in the new impact module (the title attribute on the icon) is better, since it doesn't require the non-sighted user to tab into an interface to read the message?

I think it may be worse since it is skipped entirely in keyboard navigation, so think it makes sense to go back to the original interaction.