Page MenuHomePhabricator
Create Task
Maniphest T313274

Impact Module: Check Accessibility goals & edge cases
Closed, ResolvedPublic
Actions

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

Details

SubjectRepoBranchLines +/-
User impact: always call $i18n().text()mediawiki/extensions/GrowthExperimentsmaster+30 -30
Vue components: codex icons hook exports icons as strings or objectsmediawiki/extensions/GrowthExperimentsmaster+4 -4
User impact: accessibility reviewmediawiki/extensions/GrowthExperimentsmaster+17 -7
Customize query in gerrit

Related Objects
Search...

Event Timeline

KStoller-WMF created this task.Jul 18 2022, 11:09 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 18 2022, 11:09 PM
KStoller-WMF added a parent task: T222310: [EPIC] Positive reinforcement: New Impact Module.Jul 18 2022, 11:09 PM
KStoller-WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.
KStoller-WMF mentioned this in T245508: [BUG] Invalid image URL on the newcomer homepage’s Impact section.Jul 18 2022, 11:12 PM
Tacsipacsi subscribed.Jul 20 2022, 11:56 AM
kostajh subscribed.Sep 19 2022, 4:27 PM
Sgs subscribed.Sep 20 2022, 11:08 AM
MShilova_WMF moved this task from Upcoming Work to Triaged on the Growth-Team board.Nov 7 2022, 6:23 PM
kostajh added a project: Accessibility.Nov 10 2022, 12:03 PM
Sgs claimed this task.Nov 15 2022, 10:57 AM
gerritbot added a comment.Nov 15 2022, 12:00 PM

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

gerritbot added a project: Patch-For-Review.Nov 15 2022, 12:00 PM
Sgs changed the task status from Open to In Progress.Nov 15 2022, 12:09 PM
Sgs moved this task from Triaged to Sprint 0 (Growth Team) on the Growth-Team board.
Sgs edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.
Sgs moved this task from Incoming to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.
gerritbot added a comment.Nov 15 2022, 2:15 PM

Change 842457 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Nov 15 2022, 2:30 PM
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.12; 2022-11-28).Nov 15 2022, 3:00 PM
Sgs moved this task from Code Review to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 16 2022, 8:37 AM
gerritbot added a comment.Nov 16 2022, 5:17 PM

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

gerritbot added a project: Patch-For-Review.Nov 16 2022, 5:17 PM

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

gerritbot added a comment.Nov 16 2022, 5:18 PM

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

Sgs added a comment.Nov 16 2022, 5:24 PM

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: Impact module - finalize copy and QQQ descriptions for TranslateWiki.net is done. The Safari keyboard issues still need to be investigated.

gerritbot added a comment.Nov 17 2022, 9:00 AM

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

gerritbot added a comment.Nov 18 2022, 9:45 AM

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

MShilova_WMF mentioned this in T222310: [EPIC] Positive reinforcement: New Impact Module.Nov 18 2022, 3:10 PM
kostajh added a project: GrowthExperiments-ImpactModule.Nov 21 2022, 4:47 PM
gerritbot added a comment.Nov 22 2022, 1:12 PM

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.Nov 24 2022, 7:55 PM
Sgs updated the task description. (Show Details)Nov 25 2022, 5:36 PM
Sgs mentioned this in T311026: docs: Fix demos to meet a11y requirements (Part I).Nov 27 2022, 6:12 PM
Sgs added a comment.Nov 27 2022, 6:23 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.

Sgs moved this task from In Progress to Blocked / Needs work on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 27 2022, 6:23 PM
kostajh added a subscriber: RHo.Nov 28 2022, 1:33 PM

Bringing over another accessibility issue noticed by @RHo

In T322410#8418148, @RHo wrote:
In T322410#8418102, @kostajh wrote:
In T322410#8417757, @RHo wrote:

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.

kostajh mentioned this in T322410: NewImpact: Limit article table list to 5 articles with data and 5 articles pending data.Nov 28 2022, 1:33 PM
kostajh mentioned this in T322841: NewImpact: Table list component is not keyboard accessible.Nov 29 2022, 8:27 AM
Sgs added a comment.Nov 30 2022, 10:44 AM

The clock icon will be keyboard navigable once the patch for T322841: NewImpact: Table list component is not keyboard accessible is merged.

Sgs updated the task description. (Show Details)Nov 30 2022, 10:45 AM
Sgs moved this task from Blocked / Needs work to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 30 2022, 11:53 AM
kostajh moved this task from Triage to NewImpact Release (nice-to-have or no longer blocking) on the GrowthExperiments-ImpactModule board.Dec 5 2022, 8:36 AM
kostajh moved this task from NewImpact Release (nice-to-have or no longer blocking) to NewImpact improvements on the GrowthExperiments-ImpactModule board.Dec 8 2022, 9:16 AM
Etonkovidova closed subtask T322841: NewImpact: Table list component is not keyboard accessible as Resolved.Dec 15 2022, 8:35 PM
Tgr moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Jan 14 2023, 6:22 AM
Etonkovidova closed this task as Resolved.Feb 10 2023, 6:47 PM
Etonkovidova updated the task description. (Show Details)
Etonkovidova updated the task description. (Show Details)
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL