Exchange the diff colors in the suggestions from Translation Memory

[Amieiro]

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.

[Amieiro]

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

[vladytimy]

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.

[vladytimy]

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

[Amieiro]

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]

Diff with the patch applied.

[pedromendonca]

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!

[Nao]

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

[tobifjellner]

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.)

[LidiaLAB]

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]

strikethrough

[Amieiro]

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?

[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

[vladytimy]

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

[Amieiro]

<del> and <ins> tags

[Amieiro]

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.

[Amieiro]

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

[Amieiro]

Updated in this commit.