Page MenuHomePhabricator

Invalid text input `border`/`box-shadow` and dialog error border color should be set to `@destructive`
Closed, ResolvedPublic

Description

Currently the invalid text input "framing" color is set to #f00 and the dialog error border color is set to #ff9e9e. We have an accorded "destructive" color, we should probably use it for marking invalid inputs and errors as much as possible. Or do I miss a use case, where this might cause issues?

BeforeAfter

Related Objects

StatusAssignedTask
Resolved Spage
OpenNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
InvalidVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
DuplicateVolker_E
ResolvedNone
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedNirzar
ResolvedVolker_E

Event Timeline

Volker_E claimed this task.
Volker_E raised the priority of this task from to Needs Triage.
Volker_E updated the task description. (Show Details)
Volker_E added a project: OOUI.
Volker_E added subscribers: Volker_E, matmarex, Prtksxna and 3 others.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptJan 16 2016, 12:09 AM

I don't see any harm in using the destructive color here as long as we create a new @color-invalid (or something) variable that references the destructive red.

@violetto, given the changes being proposed to the colors, would the destructive red still be appropriate to show invalid data?

The currently applied red – #f00 – also has accessibility issues as it fails WCAG 2.0 level AA contrast while current destructive @d11d13 passes AA.

Volker_E set Security to None.

@Prtksxna Your question is pointed. I think we should merge those two right now and revisit the invalid with the proposed destructive again (probably lighten it for this certain use case). – @violetto An example of an invalid input field needs to go into

  • under input fields and into the OOjs UI demo page always visible.

    Change 264429 had a related patch set uploaded (by VolkerE):
    MediaWiki theme: Change @color-invalid to destructive

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

    Volker_E renamed this task from Invalid text input `border`/`box-shadow` color should be merged with `@destructive` to Invalid text input `border`/`box-shadow` and dialog error border color should be set to `@destructive`.EditedJan 17 2016, 5:40 AM
    Volker_E updated the task description. (Show Details)

    Accessibility color contrast issue is true for custom dialog error border color #ff9e9e as well with a failing contrast ratio of 1.97:1

    Change 264563 had a related patch set uploaded (by VolkerE):
    MediaWiki theme: Change custom error border color to destructive

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

    Hmm, I think we're going a bit overboard here.

    About the 'invalid' input state:

    Currently the invalid text input "framing" color is set to #f00 and the dialog error border color is set to #ff9e9e. We have an accorded "destructive" color, we should probably use it for marking invalid inputs and errors as much as possible. Or do I miss a use case, where this might cause issues?

    A "destructive" button is very distinct from a widget in "invalid" state. While giving them the same color might be neat from maintainability perspective, that doesn't seem like enough justification for me. If anything, I'd strive for different colors to indicate the difference. (We need to draw users' attention to "invalid" widgets, since they require a correction from the user; we need to draw their attention away from destructive buttons, as they're not meant to be clicked often.)

    I'm not very fond of #f00 either, so I dunno, go wild. But the destructive color looks very meh with the current design:

    About error message box in dialogs

    Accessibility color contrast issue is true for custom dialog error border color #ff9e9e as well with a failing contrast ratio of 1.97:1

    We don't need high contrast for a border of an error message against anything (I'm not sure what you compared to); we need it for the text color against background color. I haven't checked, but it being pure black #000 on very light pink #fff7f7, it's probably fine.

    If we want to be consistent here, we should aim for consistency with the existing MediaWiki errorbox class, which we've been using with MediaWiki UI forms for a while. (It would be pretty good to have it codified in M101 or something too, after checking for contrast issues and the like.) The colors are only a bit different (live example: https://rawgit.com/wikimedia/mediawiki/master/docs/uidesign/design.html):

    Danny_B moved this task from Unsorted to Colors on the Accessibility board.Jan 22 2016, 11:23 PM

    @matmarex Just as short reply here before going into a longer one at the linked task. I completely agree with it being useful to try a consistent approach on the message box classes.

    I oppose that the border contrast doesn't play –and even if just a small– a role though in ensuring widely accessible interfaces. Citing from WCAG 2.0 Techniques and Failures for Success Criterion

    Using a higher contrast values for lines in diagrams (future link)

    Does the color in this case convey important information? Yes.
    Should the color be the only way of conveying information? No.
    Should the color be a low contrast red or a close higher contrast one? Probably the latter depending on the solution.

    Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.Mar 8 2016, 11:19 PM
    Jdforrester-WMF triaged this task as Low priority.Mar 22 2016, 6:25 PM

    Change 264429 abandoned by VolkerE:
    MediaWiki theme: Change @color-invalid to destructive

    Reason:
    Eventually picking this up later again. No buy-in for proposed change.

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

    Change 264563 abandoned by VolkerE:
    MediaWiki theme: Change custom error border color to destructive

    Reason:
    No buy-in here right now. This is a clear issue, that needs to be targeted for our users. Getting back to it after definition of overhauled and improved color palette is finished.

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

    Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Sep 10 2016, 12:24 AM

    Change 264429 restored by VolkerE:
    MediaWiki theme: Change @color-invalid to destructive

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

    Change 264563 restored by VolkerE:
    MediaWiki theme: Change custom error border color to destructive

    Reason:
    Revisiting with new color palette.

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

    Volker_E added a project: Patch-For-Review.
    Volker_E moved this task from Doing to Reviewing on the OOUI board.Dec 6 2016, 3:49 AM
    Volker_E updated the task description. (Show Details)Dec 13 2016, 9:15 PM
    Volker_E edited subscribers, added: RHo; removed: violetto.

    +1. While the new red isn't as bright, it's certainly good enough.

    Change 264429 merged by jenkins-bot:
    MediaWiki theme: Change error/invalid color to alias of destructive

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

    Change 264563 merged by jenkins-bot:
    MediaWiki theme: Change custom error border color to destructive

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

    Jdforrester-WMF closed this task as Resolved.Dec 14 2016, 10:17 PM
    Jdforrester-WMF moved this task from Reviewing to OOjs-UI-0.18.3 on the OOUI board.
    Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.18.3); removed OOUI.
    Volker_E removed a project: Patch-For-Review.