Olivero: Skip link focus should not create layout shift

Kindly review the attached patch.

Thanks!

Testing Steps:
1. Apply the patch.
2. Go to site and clear the cache.
3. Visit any page. And press tab and verify the position of Skip to the Main Content link.
3. Verified it for anonymous and authenticated users

Testing Results:
Tested after applying the patch created by @kiran.kadam911. and It's working as expected.

Adding link to video recording of the review in accessibility office hours.

It would be good to get screenshot/gif of the behaviour at narrow viewports (say 360px)

Video recording of review attached.

Are we going to display Skip To Main Link on mobile as well? As per my understanding, we don't need Skip Main Links on Devices because there we don't have keyboard Navigation.
I think we need to hide it for Devices.

Thanks for the video demos @ambuj_gupta. Both of the videos in #10 and #11 are good.

In #11, showing a narrow (mobile) viewport, the skip link obscures the site name while the skip link is focused. This is acceptable per WCAG success criterion 1.4.13 Content on Hover or Focus.

Are we going to display Skip To Main Link on mobile as well? As per my understanding, we don't need Skip Main Links on Devices because there we don't have keyboard Navigation.

YES - we need to make this skip link available on all devices.

It's incorrect to say that phones, tablets, etc. don't have keyboard navigation:

• Many phones and tablets don't have built-in physical keyboards, but some do. The first Android device on sale (HTC G1) had a physical keyboard, and they keep cropping up in new models too. Most recently, some Blackberry Android devices have built-in physical keyboards. I've used one to operate the Talkback screen reader!
• Regardless of whether the device has a physical keyboard built in, all the major mobile operating systems support the use of external keyboards via Bluetooth. Android also supports USB keyboards. There are hundreds of compact Bluetooth keyboards on the market, and their use is popular. A Google image search for "iPhone Bluetooth keyboard" and "iPad Bluetooth keyboard" reveals different products and situations where they are used.
• When we talk about a website being "keyboard" accessible, we don't necessarily mean that someone is using a typical QWERTY sort of keyboard. It's also important because there's a huge variety of assistive technology (hardware and software) which can be set up to send keyboard commands. This includes things such as programmable keypads, games controllers, "macro" recorders, scripting tools, and other approaches.

Blocker https://www.drupal.org/project/drupal/issues/2958478 to resolve issue pointed in previous comment

Please review the attached patch.

Please refer updated patch.

Applied patch #21 and it works fine.Adding screenshots below.

Before patch:

After patch:

Mobile

Patch #21, Working fine and fixed the layout shift issue.
Adding after patch screenshot for reference.

Moving to RTBC.

Hey, I have tried to cover the points mentioned in #25
Please review

Thanks patch @mherchel, @kishor_kolekar

#26 patch applied. The patch is working fine

HI @mherchel,
Patch #29, Working fine.
Fixed the layout shift issue.
Adding after patch screenshot for reference.

Moving to RTBC.

position: absolute makes the focus ring visible. The while focus ring doesn't work well in this use case. Since the focus ring is not visible before, we should probably make it invisible here.

Providing updated & re-rolled 9.3.x patch as per #33 removing outline on focus.

Kindly review.

Thanks!

Verified and tested patch #34.
Patch applied successfully and looks good to me.

Testing Steps:
# Press tab button
# User is able to see "Skip to main content"

Expected Results:
# User should not see white focus ring under skip to main content

Actual Results:
# Currently user is able to see the white focus line under skip to main content.

Can be a move to RTBC.

Committed 8f711d9 and pushed to 9.3.x and 9.2.x. Thanks!