Location of "Skip to Main" link below admin toolbar in Claro is problematic for screen magnifier users

Thanks for filing this, I agree we should address it.

I think the centred horizontal position could be an issue too. A safer placing would be the top corner of the viewport, not just top edge. CSS position:fixed + an high z-index should be enough, no? The z-index would be arbitrary, but higher than the toolbar and header region. I presume that should vary between LTR and RTL languages.

I get the "it's visible, so it should look nice" argument. This issue is only about the position relative to the viewport. So long as it's sufficiently clear, I don't care about colours, rounded corners, or whatever. A border/outline will probably enhance the clarity a lot, to satisfy WCAG 1.4.11 Non-text content need for clear focus style.

The BBC use a design where the skip link appears near the left edge of their central main page container column, but this isn't necessarily the viewport edge, if you have a wide monitor and a wide browser window, say. Unusually, they place the skip-link below their logo visually, instead of right at the top. (Aside: Their skip link is also NOT the first control in the tabbing order. It comes after their logo link. Their cookie banner also comes before the skip-link, and has several links inside it, which rather defeats the object of the skip-link, but that's a separate problem.)

Let's look for a few more examples.

Here are some options for Claro 9.5 using the theme's white-in-green focus ring:

1. Partial focus ring with round edge:
   
2. Partial focus ring with square edge:
   
3. Full focus ring with round edge:
   
4. Full focus ring with square edge:
   

And here's a MR using option 1 (partial focus ring with round edge)

Here's a before/after for option 1

(The different options are just for focus ring style, in all 4 options the link is on the top left)

Before:

After:

Still need to make a right-aligned version for RTL

Seems there is a build failure in the MR.

Also could the issue summary be updated to include the proposed solution please.

Updated proposed solution

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Created MR for 11.x, just for Claro though. Wondering what to do about Olivero since the skiplink design is different. Would be good to have some input from designers...

Think the issue summary could use before/after screenshots of claro, and if not applicable if olivero is included.

Separated Olivero issue into its own issue.

Updated issue summary to use template.

Out of curiosity tried with new navigation module

Change looks good to me.

This fixes it in claro, need to fix umami, it does the same center positioning think as before. Olivero is fine (design is different but it's top-left aligned already)

Lets also include screenshots of umami since the change doesn't appear to be 1 to 1

No RTL needed for Umami?

I have attached after patch screenshot for LTR & RTL.

Believe this is fine.

Fixed css lint error on commit

Committed and pushed 5e0d1efa0a to 11.x and 0b36d01ad6 to 11.0.x and c1f7726488 to 10.4.x and 12b546ca74 to 10.3.x. Thanks!