@ovasileva this is only a visual issue. The functionality works fine; pages can be added or removed from the watchlist.

I don't understand why this is a bug.
We rotate the watchstar 72deg when watched via css transform, hence that's why the focus state gets rotated and the visual effect is correct.

We could of course rotate the glyph so only the pseudo element gets rotated but I don't understand the significance of the focus state. This is not an accessibility problem as far as I'm aware...

Can you enlighten me? cc @alexhollender

It physically changes the focus hit area and it looks terrible when tabbing the focus with the keyboard (which admittedly is already broken).

I don't know enough about screen readers to know if that's a problem or not, but I see several options here:

1. Move rotation onto the pseudo before element like we do for mf-mw-ui-icon-rotate-anti-clockwise
2. Adapt icon so that it can be rotated a denomination of 90 degrees. A 90 degree rotated icon will still appear like a box unlike a 72 degree one.

Ping @Volker_E @alexhollender

Side note: The page actions do not seem to be tab-able to me at all (related: T142527)

I need to double check this with Nirzar, but perhaps another option would just be to remove the rotation animation? I'm also noticing a small jump at the end of the rotation (from empty to green), almost like the icon sits down 1px right at the end of the animation.

In T192313#4154191, @Jdlrobson wrote:

1. Move rotation onto the pseudo before element like we do for mf-mw-ui-icon-rotate-anti-clockwise

That sounds like a good solution to me. Keep the animation and fix the funky :focus state.