shell: Modals are broken in RTL

[garrett]

1. Change your language to Hebrew.
2. Try to change it back.

Language modal:

About modal:

SSH key modal:

[garrett]

In-page modals seem fine, however:

So this seems shell-specific.

[garrett]

There's some specific text that's way off the page to the right, which causes the width of the pf-v5-c-backdrop to be much wider than the viewport, which causes this offset problem.

I added pointer-events: none to the backdrop and the shim and found out that text is "דילוג על הניווט הראשי", which is the skip link text.

The classes are screenreader-text skiplink desktop_v and its ID is #hosts-sel (for some reason).

[garrett]

Ah, the problem is this:

It uses negative margins, and since the right/left was changed to inline-start/inline-end, it must've changed the intend and is stretched in both ways instead of one. The intent is to visually hide it, but this makes it go way out of bounds.

[garrett]

1. Why are we implementing our own .screenreader-text instead of using https://www.patternfly.org/utility-classes/accessibility/#screen-reader-only? (Answer: We have a focus style to show it too.)

2. Also, more importantly, why are we implementing our own skip link instead of using PatternFly's? https://www.patternfly.org/components/skip-to-content

To fix this properly, I strongly suggest removing our own custom thing and using PatternFly's skip link instead.

[garrett]

Also: Why did our pixel tests not pick this up at all? I thought we tested these modals and on RTL as well?

[garrett]

This breaks basic functionality in Cockpit (as it moves content offscreen, including switching languages), and it should be simple to fix, so I'm marking it as a release blocker.

[martinpitt]

We do have at least one RTL shell dialog pixel test. I tried this with your recipe (Hebrew) on current Cockpit main (8769d417e5a4) in both firefox-125.0.2-1.fc40.x86_64 and chromium-125.0.6422.141-1.fc40.x86_64. I also changed the window width from ~ 1/4 screen to full screen width continuously, and the dialog keeps being perfectly centered and generally looks okay.

So this is a bit more subtle -- perhaps you have some extension, like a screenreader or so?

Both the skiplink and the screenreader-text stuff were introduced 4 years ago in commit 9e7209d154 (PR #13663) by @marusak. Do you perhaps still remember what all of this does? Why the -999, what is a skiplink, etc?

[martinpitt]

Plan:

• [x] Find a reproducible series of reload, keys, focus events to test the skip link
• [x] Put that into an integration test: PR #20561
• [ ] Try to replace with PF skiplink, hopefully gets rid of all that CSS h4x3ry
• [ ] Let @garrett re-test if the dialogs are still broken for him

[garrett]

I can't reproduce the issues now. We will probably still want to replace it with the PF skiplink, but everything seems better now as of #20561.