In T329046#9356823, @Tacsipacsi wrote:

In T329046#9356277, @Pginer-WMF wrote:

Currently the indicators are placed after the language labels in the language selector. The language selector has space reserved for this kind of indicators before the labels. This is used on Wikipedia for signals such as featured/good article.

I’ve thought about this, but I thought that they would be too prominent if placed before the links (only a small portion of languages have featured/good articles on a given subject, while all translations have progress levels, which results in much more indicators). However, looking at your mockup, it isn’t that bad, so it may be worth implementing it and evaluating it on other skins as well.

In T329046#9362905, @Pginer-WMF wrote:

I’ve thought about this, but I thought that they would be too prominent if placed before the links (only a small portion of languages have featured/good articles on a given subject, while all translations have progress levels, which results in much more indicators). However, looking at your mockup, it isn’t that bad, so it may be worth implementing it and evaluating it on other skins as well.

Having the circles closer to the labels helps to perceive them more sa a unit, making the perception of being a lower number of elements (i.e., looking simpler). For cases where the language selector has many languages, andl multiple columns are used, placing the indicators after the label in the first column would make them closer to the labels of the second column, creating potential confusion too.

Also, maybe this shouldn’t be constrained to the ULS language selector. Other skins, like Vector 2010, also display the FA/GA badges left to the links, so if Vector 2022 is changed, it would make sense to change Vector 2010 (and other skins) as well to remain consistent.

I did some initial exploration on this. I quickly identified that it is challenging to align the indicators which we are creating with ::after on the language selector where the badges style the list item ::marker instead. Unfortunately ::marker doesn't support css backgrounds.

On option would be to back to SVG images (which should btw solve the anti-aliasing issues too) where we can target them for ::marker or ::after depending on the context.

Change #1041694 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] ULS: Put progress indicators on other side for translatable pages

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