Making WordPress.org

#6572 closed defect (bug) (fixed)

Exchange the diff colors in the suggestions from Translation Memory

Reported by: amieiro's profile Amieiro Owned by: amieiro's profile Amieiro
Milestone: Priority: normal
Component: Translate Site & Plugins Keywords:
Cc:

Description

When a user is translating a string and gets feedback from the Translation Memory, the suggestions from translation memory have exchanged the added and delete substrings.
If you review the HTML code in the screenshot, the <del> and <ins> have been exchanged.

Attachments (4)

diff-01.jpg (174.4 KB) - added by Amieiro 19 months ago.
HTML code where you can see that the <del> and <ins> tags have been exchanged.
diff-02.jpg (482.3 KB) - added by Amieiro 19 months ago.
Diff with the patch applied.
line-through.jpg (455.3 KB) - added by Amieiro 18 months ago.
strikethrough
translate-del-ins.jpg (201.3 KB) - added by Amieiro 18 months ago.
<del> and <ins> tags

Download all attachments as: .zip

Change History (18)

@Amieiro
19 months ago

HTML code where you can see that the <del> and <ins> tags have been exchanged.

#1 @vladytimy
19 months ago

I wonder if this was done on purpose because it does make sense if you think it like this: This translation memory suggestion's original doesn't have distraction (red/<del>) but has disrtaction (green/<ins>) compared to the current original.

I agree it's a bit reversed logic but once you get used to it it makes sense.

The question here is what do you compare

  • current original vs this previous original
  • this previous original vs current original

I think this needs the community input to see how the majority feels about this.

Last edited 19 months ago by vladytimy (previous) (diff)

#2 @vladytimy
19 months ago

I see this was changed in changeset 12229. Let's see if there's any feedback in the coming period from translators.

#3 @Amieiro
19 months ago

Hi @vladytimy

I understand your point of view. For me, it is much clearer to have in green what has been added in the current original from what we have in the translation memory. And, of course, in red what has been removed. I like to consider:

  • Old: the string we have in the translation memory.
  • New: the current original string.

So what I have deployed is the diff between one string we have in the translation memory, as old string, and the string we have as current original string, as new string.

I am not going to close this ticket until we talk the 2 different approaches with the community in the next Polyglots meeting, so, as usual, I am open to revert this commit.

@Amieiro
19 months ago

Diff with the patch applied.

#4 @pedromendonca
19 months ago

Wow! This has been messing with my brain since ever, I thought it was by design as @vladytimy says, but it really makes much more sense as it is now.
Thank you @Amieiro!

#5 @Nao
18 months ago

The updated version (patch) makes a lot more sense to me too!

This ticket was mentioned in Slack in #polyglots by amieiro. View the logs.


18 months ago

#7 @tobifjellner
18 months ago

Yeah. Much better now, after this update. I always had to think twice before.
(Only related question would be to get feedback from someone with red-green color blindness if these two colors differ enough between themselves to be understood, after all that is the most common type of color blindness.)

#8 @LidiaLAB
18 months ago

It makes sense to me too.
But I don't know if red and green mean the same all over the world, probably yes.

But thinking about what Tobi said, maybe we could also add the strikethrough for the removed text, it will be a little harder to read, but the meaning will be clear at a glance and regardless of the colors chosen.

But I'm not a UXer :)

@Amieiro
18 months ago

strikethrough

#9 @Amieiro
18 months ago

I think adding a strike-through to the removed text is a good option, for people without any visual problem and for people with color blindness, as you can see in the previous image. What do you think?

#10 follow-up: @LidiaLAB
18 months ago

Thanks for showing it visually @Amieiro!
I still think it works.

Is it planned to use semantic tags or ARIA attributes suitable for screen readers?
I'm reading it is not so easy to find a solution for this, but I'm new in learning about A11y stuff.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s

#11 @vladytimy
18 months ago

The strike-through makes it even more accessible! Looks great! Thanks for experimenting with this.

@Amieiro
18 months ago

<del> and <ins> tags

#12 in reply to: ↑ 10 @Amieiro
18 months ago

Replying to LidiaLAB:

Thanks for showing it visually @Amieiro!
I still think it works.

Is it planned to use semantic tags or ARIA attributes suitable for screen readers?
I'm reading it is not so easy to find a solution for this, but I'm new in learning about A11y stuff.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s

@LidiaLAB yes, we currently are using the <del> and <ins> tags. You can see it here.

#13 @Amieiro
18 months ago

I have analized the color blindness and the contrast in a P2: Color blindness in the diffs from the translation memory

#14 @Amieiro
18 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Updated in this commit.

Note: See TracTickets for help on using tickets.