Skip link in wrong position with RTL language

[Sandstromer]

Description

When using a RTL language, the skip link button/link is positioned at the top left of the browser window.

Step-by-step reproduction instructions

With a FSE theme active or a classic theme without its own skip link function. Change site language to a RTL language. View front-end and tab to bring up the skip link.

Expected behaviour

The skip link should be positioned at the top right.

Actual behaviour

The skip link is positioned at the top left, in the same position as a non-RTL language.

Screenshots or screen recording (optional)

Code snippet (optional)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: 10.5.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1-Blocks

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome & Firefox

[annezazu]

@Sandstromer thanks for reporting this! Are you able to share a screenshot or an example of a block theme to test this with?

[Sandstromer]

Theme: TT1-Blocks

LTR

RTL

.skip-link.screen-reader-text:focus has absolute positioning of 5px from the left.

It looks like we are just missing the rtl styling to position the skip-link to the right.

[annezazu]

Ah ha! Thank you so much. I'll update the labels appropriately.