Page MenuHomePhabricator
Create Task
Maniphest T185533

Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0
Closed, ResolvedPublic8 Estimated Story Points
Actions

Assigned To
sahil505
Authored By
Volker_E
Jan 22 2018, 10:05 PM
Tags
Referenced Files
F17097736: 1_main-page-before.PNG
Apr 18 2018, 8:29 PM
F17097448: detail-page-before.PNG
Apr 18 2018, 8:29 PM
F17097461: detail-page-after.PNG
Apr 18 2018, 8:29 PM
F17097741: 1_main-page-after.PNG
Apr 18 2018, 8:29 PM
Subscribers
Aklapper
• fdans
gerritbot
Ladsgroup
MCornacchio
mforns
Milimetric
View All 10 Subscribers

Description

Wikistats 2.0: http://stats.wikimedia.org/v2

currently has several accessibility and markup issues (in order of priority):

  • it lacks WCAG level AA conformant color contrast on following elements:
  • lang attribute on html is missing
  • heading must not be empty
  • Wikimedia logo is missing alt attribute
  • search input must have a connected label
  • page must feature a main ARIA landmark

Details

SubjectRepoBranchLines +/-
Fixed accessibility/markup issues of Wikistats 2.0analytics/wikistats2master+83 -89
Darken subdued text and alter footer area for WCAG AA complianceanalytics/wikistats2master+8 -6
Fix accessibility/markup issuesanalytics/wikistats2master+19 -7
Fix stylelint errors and TopicExplorer placeholderanalytics/wikistats2master+85 -68
Fix stylelint errors and TopicExplorer placeholder contrastanalytics/wikistats2master+63 -62
Change TopicExplorer placeholder contrast to WCAG AA complianceanalytics/wikistats2master+15 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Jan 22 2018, 10:05 PM
Restricted Application added a project: Analytics. · View Herald TranscriptJan 22 2018, 10:05 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E added a comment.Jan 22 2018, 10:10 PM

https://gerrit.wikimedia.org/r/#/c/398459/ has aimed at taming a few color issues. IMO making use of Wikimedia UI Base would be a good resource to address basic color UI recommendations conforming to WCAG level AA.
See for example [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.css;95de15a077b4cadf426573c983517018c06f55d4$87 | --color-placeholder ]] for search placeholder.

• Nuria renamed this task from Fix accessibility/markup issues of Wikistats 2.0 to Wikistats Beta: Fix accessibility/markup issues of Wikistats 2.0.Feb 5 2018, 5:34 PM
• Nuria moved this task from Incoming to Dashiki on the Analytics board.
• Nuria added a project: good first task.Feb 24 2018, 10:46 PM
• Nuria updated the task description. (Show Details)Feb 24 2018, 10:53 PM
mforns merged a task: T167673: Address design feedback from Volker.Mar 8 2018, 12:23 PM
mforns subscribed.

From duplicate task:

https://www.mediawiki.org/wiki/Topic:Tp059xh118wkx24b

Also, use this to clean up other things such as:

Replace Language Selector with "coming soon"
Other little cleanup things
View metrics dialog - align
Plan for internationalization

mforns added a parent task: T189210: [Analytics] Improvements to Wikistats2 front-end .Mar 8 2018, 3:13 PM
mforns moved this task from Dashiki to Mentoring on the Analytics board.Mar 8 2018, 6:06 PM
sahil505 subscribed.Mar 14 2018, 12:26 AM
sahil505 added a comment.Mar 14 2018, 12:41 AM

@mforns which search placeholder and input are mentioned here, the one in TopicExplorer or the one in WikiSelector ?

gerritbot added a project: Patch-For-Review.Mar 16 2018, 12:46 AM
gerritbot subscribed.Mar 16 2018, 1:31 AM

Change 419962 had a related patch set uploaded (by Mrcornacchio; owner: mrcornacc):
[analytics/wikistats2@master] Change TopicExplorer placeholder contrast to WCAG AA compliance

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

mforns added a comment.Mar 16 2018, 12:47 PM

@sahil505 I think we should check both.
See that there's already one Gerrit patch to fix that particular issue with the TopicExplorer.

sahil505 mentioned this in T189964: GSoC Proposal 2018 : [Analytics] Improvements to Wikistats2 front-end.Mar 18 2018, 12:43 AM
Sturmkrahe subscribed.Mar 24 2018, 6:19 PM

There's another related patch which the bot didn't seem to catch: https://gerrit.wikimedia.org/r/419958/

Amitjoki mentioned this in T190949: Proposal: [Analytics] Improvements to Wikistats2 front-end.Mar 28 2018, 5:23 PM
MCornacchio claimed this task.Mar 29 2018, 6:24 PM
gerritbot added a comment.Mar 30 2018, 8:10 PM

Change 423176 had a related patch set uploaded (by Mrcornacchio; owner: mrcornacc):
[analytics/wikistats2@master] Fix stylelint errors and TopicExplorer placeholder contrast

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

gerritbot added a comment.Mar 30 2018, 8:23 PM

Change 419962 abandoned by Mrcornacchio:
Change TopicExplorer placeholder contrast to WCAG AA compliance

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

MCornacchio added a comment.Apr 10 2018, 8:24 PM

@Volker_E I have a question about this issue:
" heading must not be empty" | Which heading(s) are you referring to? What do they need to contain to be considered non-empty?

Volker_E added a comment.Apr 11 2018, 7:06 PM

@MCornacchio The wikiselector search is wrapped in a h5 currently, which is superfluos semantically IMO.

<h5 class="ui right floated header wikiselector"><div single="true"><div class="ui search"><div class="ui icon input"><input type="text" placeholder="" class="prompt"> <i class="search icon"></i></div> <!----></div></div></h5>
gerritbot added a comment.Apr 12 2018, 11:21 PM

Change 425925 had a related patch set uploaded (by Sturmkrahe; owner: Sturmkrahe):
[analytics/wikistats2@master] Fix accessibility/markup issues

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

gerritbot added a comment.Apr 16 2018, 4:55 AM

Change 423176 abandoned by Mrcornacchio:
Fix stylelint errors and TopicExplorer placeholder contrast

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

gerritbot added a comment.Apr 16 2018, 6:51 AM

Change 426848 had a related patch set uploaded (by Mrcornacchio; owner: mrcornacchio):
[analytics/wikistats2@master] Fix stylelint errors and TopicExplorer placeholder

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

Sturmkrahe added a comment.EditedApr 18 2018, 8:29 PM

Here are before and after pictures for change 419958 (https://gerrit.wikimedia.org/r/419958/), patch set 5:

BeforeAfter
Detail view
detail-page-before.PNG (939×1 px, 66 KB)
detail-page-after.PNG (937×1 px, 66 KB)
Metric widgit
1_main-page-before.PNG (276×326 px, 12 KB)
1_main-page-after.PNG (279×329 px, 12 KB)
gerritbot added a comment.Apr 20 2018, 5:58 AM

Change 426848 merged by jenkins-bot:
[analytics/wikistats2@master] Fix stylelint errors and TopicExplorer placeholder

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

MCornacchio removed MCornacchio as the assignee of this task.May 3 2018, 6:03 PM
MCornacchio subscribed.
mforns added a comment.May 7 2018, 7:55 PM

@Volker_E
Even if you merged this patch, I understand that this task is not done yet, because there are still changes to be applied in other sections of the code. Is that correct?

Volker_E added a comment.May 7 2018, 9:41 PM

@mforns Don't follow which patch you refer to, this one https://gerrit.wikimedia.org/r/#/c/419958/ has also stronger visual impacts, which I support, but I don't want to overrule project owners, therefore only +1. This one was mostly on code level and on undisputable things. Will update task description.

Volker_E updated the task description. (Show Details)May 7 2018, 9:42 PM
mforns added a comment.May 8 2018, 11:15 AM

@Volker_E
Thanks, I understand it better now.
We'll work on this task in the upcoming weeks.

mforns triaged this task as Medium priority.May 8 2018, 2:37 PM
mforns set the point value for this task to 8.
sahil505 claimed this task.May 29 2018, 11:48 AM
sahil505 added a project: Analytics-Kanban.May 29 2018, 11:53 AM
sahil505 moved this task from Next Up to In Progress on the Analytics-Kanban board.
sahil505 added a comment.May 29 2018, 12:14 PM

@mforns @Volker_E : I was going through the task description and I couldn't see the need of a label along with the search inputs? Can you please clarify if you are thinking of this from any other point of view. The 'Explore Topic' heading & the search placeholders are pretty much making clear what the search input is for. Let me know what you think.

sahil505 added a comment.EditedMay 29 2018, 12:18 PM

Color contrast of footer text & links are taken care of in T191672 so updating the description.

Volker_E added a comment.EditedMay 29 2018, 12:19 PM

@sahil505 Neither the “Explore topics” “heading” (which isn't marked up as heading, it's just a span) nor the placeholder are sufficient exposed to describe the search input in a screenreader.
A label, and if it's only a visually hidden one repeating the placeholder text, connected to the input is necessary.

sahil505 updated the task description. (Show Details)May 29 2018, 12:19 PM
gerritbot added a comment.May 29 2018, 1:37 PM

Change 436002 had a related patch set uploaded (by Sahil505; owner: Sahil505):
[analytics/wikistats2@master] Fixed accessibility/markup issues of Wikistats 2.0

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

sahil505 moved this task from In Progress to In Code Review on the Analytics-Kanban board.May 29 2018, 1:52 PM
gerritbot added a comment.Jun 4 2018, 2:41 PM

Change 436002 merged by Mforns:
[analytics/wikistats2@master] Fixed accessibility/markup issues of Wikistats 2.0

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

mforns moved this task from In Code Review to Ready to Deploy on the Analytics-Kanban board.Jun 4 2018, 2:42 PM
Milimetric moved this task from Ready to Deploy to Done on the Analytics-Kanban board.Jun 18 2018, 3:01 PM
• Nuria closed this task as Resolved.Jun 18 2018, 5:56 PM
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 · Credits