Page MenuHomePhabricator

Fix instances of tbd- i18n strings
Closed, ResolvedPublic

Description

In the non-vue version of the mentor dashboard some icons do not have any labels. While developing the vue version we added placeholder text keys. We should add their translations so we comply with a11y standards.

modules/ext.growthExperiments.MentorDashboard.Vue/components/MenteeOverview/InfoBox.vue
11:					:icon-label="$i18n( 'tbd-info' )"

modules/ext.growthExperiments.MentorDashboard.Vue/components/DataTable/DataTablePagination.vue
14:				:icon-label="$i18n( 'tbd-prev' )"
25:				:icon-label="$i18n( 'tbd-next' )"

modules/ext.growthExperiments.MentorDashboard.Vue/components/MenteeOverview/DataTableCellMentee.vue
6:			:icon-label="$i18n( 'tbd-favorite' )"

modules/ext.growthExperiments.MentorDashboard.Vue/components/MenteeOverview/MenteeOverview.vue
32:			:icon-label="$i18n( 'tbd-no-results' )"

modules/ext.growthExperiments.MentorDashboard.Vue/components/MenteeOverview/MenteeFilters.vue
10:				:icon-label="$i18n( 'tbd-expand' )"

We should replace these placeholder strings with real i18n strings.

missing icon labelsmissing icon labels
Screenshot 2022-07-06 at 14.31.32.png (1×1 px, 197 KB)
Screenshot 2022-07-06 at 17.34.45.png (1×1 px, 87 KB)

Event Timeline

The reason I left this text keys as tbds is because they don't exist in the non-vue version of the dashboard. However having an aria-label is a a11y best practice as per MDN aria-label and w3c docs and Codex icon component requires one on each icon. (Note something obvious but relevant: icon labels are not directly bound to the icon graphic but rather to its usage context)

Who should be the owner for writing this copy texts?

The reason I left this text keys as tbds is because they don't exist in the non-vue version of the dashboard. However having an aria-label is a a11y best practice as per MDN aria-label and w3c docs and Codex icon component requires one on each icon. (Note something obvious but relevant: icon labels are not directly bound to the icon graphic but rather to its usage context)

Ah, thanks for clarifying.

Who should be the owner for writing this copy texts?

Probably one of @KieranMcCann @BKots-WMF, or @KStoller-WMF

Sgs updated the task description. (Show Details)

The screenshots in the description provide the same copy that I would suggest, with one small exception:

I think "favorite" and "unfavorite" seems a little off since a Mentor is likely using these to watch certain mentees not really "favorite" them. It looks like in the filtering interface we use the term "starred mentees", so perhaps we should stick to that language?

Screen Shot 2022-07-06 at 1.27.07 PM.png (1×1 px, 111 KB)

  • star mentee
  • unstar mentee

That being said, anyone should feel free to push back on that suggestion, since I can see how that language is certainly more descriptive of the graphic than the context and "unstar" is somewhat creative English.

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

[mediawiki/extensions/GrowthExperiments@master] Mentee overview (vue): add labels to all icons

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

Sgs changed the task status from Open to In Progress.Jul 7 2022, 4:02 PM
Sgs claimed this task.
Urbanecm_WMF changed the task status from In Progress to Open.Jul 8 2022, 12:12 PM
Urbanecm_WMF moved this task from Code Review to QA on the Growth-Team (Current Sprint) board.

Change 812022 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentee overview (vue): add labels to all icons

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

This task does not need specific QA, it can be tested as part of its parent T300532: Migration of mentee overview to Vue