Page MenuHomePhabricator

Test instance: add accessibility preference and colorblind-friendly syntax highlighting
Closed, ResolvedPublic0 Estimated Story Points

Description

Requirements

  • Under 'Appearance' preference tab, add a new section 'Accessibility.' Add a new preference to use colorblind-friendly color scheme for syntax highlighting. Text for preference: "Use colorblind-friendly color scheme for syntax highlighting when editing in wikitext. Note: if using a gadget for highlighting, then this preference will not have an effect."
  • When preference is checked, the same highlighter button turns on syntax highlighting but the user sees the following colors instead
  • Create new color scheme with only two colors, plus the same black and gray for content/comments. See mock for the which content gets which color
  • Remove background highlighting for nested elements

Mock

Syntax Color Scheme - colorblind.png (3,150×1,104 px, 124 KB)

Event Timeline

Lena_WMDE set the point value for this task to 5.Sep 21 2020, 9:52 AM

How is this related to T263410: Test instance: Update CodeMirror color scheme? I see the tasks were written on the same day, so probably not duplicates, but am I reading correctly that this is a task to add preferences, and the preferences control the implementation done in the other task?

The tasks are not dependent on each other and can be implemented separately and in any sequence (unless there is a tech dependency I'm unaware of).

T263410: Test instance: Update CodeMirror color scheme is to update the existing color scheme of the CodeMirror extension (to be applied to the syntax highlighting function). It does not depend on a preference, it should be used by default when the syntax highlighter pen is enabled in the editor.

The current ticket is to add an accessible color scheme to CodeMirror/syntax highlighting and a preference to enable it. So it's a two step process: 1) add preference to enable accessible syntax highlighting, and 2) add a secondary color scheme to CodeMirror to be used by the syntax highlighter when the preference is turned on (or the other way around, whatever makes more sense). Whether this secondary color scheme then replaces the current color scheme used by CodeMirror or the one specified in T263410: Test instance: Update CodeMirror color scheme should not be relevant for this ticket.

Does that makes sense or have I missed/misunderstood something?

I made a mockup of the described feature. Would that be the correct position for the setting? @ECohen_WMDE

mockup_T263416_accessability-in-appearance.png (1,836×1,927 px, 221 KB)

mockup_T263416_accessability-in-appearance-detail.png (856×320 px, 33 KB)

Hey @lilients_WMDE - re Thiemo and Adam's comments, let's move it to the Editing tab, after the Editor preferences. The second image would look the same (section, checkbox, content) but simply moved to be part of the other settings. Thanks!

It lookes like this now:

New option in editing settings:

T263416_accessability-in-editing.png (1,836×1,089 px, 224 KB)

Colorblind-friendly syntax highlighting:

accessible-colors.png (1,195×760 px, 129 KB)

Looks like the accessibility typo is still there in your screenshot, though when I check on the test instance it's looking alright

Right! I have to update the screenshots as well. :)

Lena_WMDE changed the point value for this task from 5 to 0.

Notes from demo time:

  • The accessibility color scheme doesn't show up in the VE source mode (a.k.a. "new wikitext mode").