Modified styling for diff viewer lines to be colorblind-friendly

Review Request #10981 — Created March 29, 2020 and updated

Information

Review Board
release-4.0.x
87859c5...

Reviewers

The red, green, and yellow colors used in Review Board's diff viewer aren't
easily dintinguishable for users with various colorblind disabilities.

To address this, icons have been added to inserted, replaced, and deleted
diff viewer lines (+, ~, and - respectively) to visually represent the type
of change made without having to solely rely on color. Alignment for equal
lines (unmodified lines of code) was also updated; line numbers for all
diff types should now be aligned.

I've attached a video below showing how the diff viewer would like with my
new changes.

For more information on how I came up with these changes, see my notes here.

All current unit tests pass. No additional tests were made.


Description From Last Updated

Could we perhaps reuse some of the builtin colors already defined in reviewboard/reviewboard/static/rb/css/ui/colors.less? For example, #rb-ns-ui.colors[@red-60]; You'll just need to …

bui1bui1

Same comment here about reusing colors #rb-ns-ui.colors[@green-70];

bui1bui1

Same comment here about colors #rb-ns-ui.colors[@yellow-90];. I know the shades of yellow here are limited so if they don't work …

bui1bui1

I think this comment should use /* ... */

hxqlinhxqlin
kpatenio
bui1
  1. The screenshots look good to me! The icons themselves are easier to see given the size and boldness.

    Just another question (maybe since I'm not sure of the current state of the project), did we scrap the idea of changing colors altogether per mode of colorblindness?

    1. Sorry the delayed response! I believe we did scrap the idea of changing colours. If we do decide to do that, I'd ideally like to do that change in another request if possible.

  2. Show all issues

    Could we perhaps reuse some of the builtin colors already defined in reviewboard/reviewboard/static/rb/css/ui/colors.less?

    For example,
    #rb-ns-ui.colors[@red-60];

    You'll just need to play around with the different shades of red to get the best one you need for the job

  3. Show all issues

    Same comment here about reusing colors

    #rb-ns-ui.colors[@green-70];

  4. Show all issues

    Same comment here about colors
    #rb-ns-ui.colors[@yellow-90];.

    I know the shades of yellow here are limited so if they don't work out, I think leaving it as is should ok or even defining it as a variable for future reusability is also a good idea.

  5. 
      
kpatenio
hxqlin
  1. This looks pretty good! One another suggestion is to add a short comment of what the attached screenshots are for and possibly updating their captions. For a small change like this, it's relatively obvious that they're showing the UI changes but in a review request that might have multiple attached files to explain different parts of the change, it might not be so clear.

    1. Oops just to clarify the add a short comment bit - I meant for this to be added in the description.

    2. Thanks for your feedback Hannah! I've updated the description to more clear. :)

  2. Show all issues

    I think this comment should use /* ... */

  3. 
      
kpatenio
kpatenio
kpatenio
kpatenio
kpatenio
Review request changed
Change Summary:

Updated description

Description:
   

The red, green, and yellow colors used in Review Board's diff viewer aren't

    easily dintinguishable for users with various colorblind disabilities.

   
   

To address this, icons have been added to inserted, replaced, and deleted

    diff viewer lines (+, ~, and - respectively) to visually represent the type
~   of change made without having to solely rely on color.

  ~ of change made without having to solely rely on color. Alignment for equal
  + lines (unmodified lines of code) was also updated; line numbers for all
  + diff types should now be aligned.

   
~  

For a visual representation of these changes, I've attached screenshots

~   below. I chose screenshots showing the three different types of diffs; this
  ~

I've attached a video below showing how the diff viewer would like with my

  ~ new changes.

-   is to demonstrate the readability of the diffs with the newly added icons.

   
~  

For more information, see my notes here.

  ~

For more information on how I came up with these changes, see my notes here.