I've updated to the most recent version 5.5.8 and changed the link reading "Skip to main content" in html.html.twig template file. The new version is lacking of classes and seems to have a typo. Due to that it is no longer hidden for me. It was working in the version i had before (5.5.6).
It was introduced in this issue: https://www.drupal.org/project/bootstrap_barrio/issues/3230650
You can see the change here: https://git.drupalcode.org/project/bootstrap_barrio/-/commit/3bc07f39af8...
In my Barrio driven template i still rely on /core/modules/system/css/components/hidden.module.css which is hiding this link by default from core. I would assume this to be a standard provided by Drupal core as it does work this way in other themes as well.
There is no CSS provided for this new class by Barrio. There is some CSS for a skip-link class but it was deleted in that commit.
Update to from 5.5.6 to 5.5.8 and have a template relying on /core/modules/system/css/components/hidden.module.css
Rollback of <a href="#main-content" class="visually-hidden-focusable"> to <a href="#main-content" class="visually-hidden focusable skip-link">
Comments
Comment #2
zaskia commentedProviding a patch.
Comment #3
hatuhay commentedComment #5
zaskia commentedSorry, but the issue is not fixed!
What is the reason behind this new class called
visually-hidden-focusablewhen there was two classes calledvisually-hiddenandfocusable. While i had a dark grey font on top of my site before the current version of the of the template makes it a dark grey box.To me this looks like a typo and you didn't notice the additional dash in the classes that makes two classes to become one.
The Drupal core CSS file works with the
visually-hiddenclass that is not longer present in Barrio.Comment #6
zaskia commentedComment #8
christian deloach commentedzaskia, the visually-hidden-focusable class is part of Bootstrap 5 (see https://getbootstrap.com/docs/5.0/helpers/visually-hidden/). Is it possible you aren't loading the entire Bootstrap CSS library or may be using a custom Bootstrap CSS library?
Comment #9
jmaerckaert commentedThe patch in #2 doesn't apply on version 5.5.9.
I provide a new patch.
Comment #10
jmaerckaert commentedComment #12
hatuhay commentedhttps://getbootstrap.com/docs/5.2/getting-started/accessibility/#visuall...
Comment #14
codigoweb commentedUpdate patch to version 5.5.10
Comment #15
codigoweb commentedComment #16
hatuhay commentedThe actual markup matches Bootstrap 5.2 Docs
Comment #17
orkutmuratyilmazpatch #15 works for me. thank you @codigoweb.
Comment #18
masoom2206 commentedpatch #15 works for me.
Comment #19
orkutmuratyilmazI've tested and seen that 5.5.13 still needs the patch #15. Can you commit that version @hatuhay?
I guess that, there's a typo in Bootstrap 5.2 Docs, maybe it would be better to update those docs too.
Comment #20
hatuhay commentedPlease refer to Bootstrap 5.3 -Accesibility - Visually hidden content
The markup is according to Bootstrap 5.3 docs.
Comment #21
orkutmuratyilmazI've checked the documentation on the link you've shared and it looks like there's no typo. I can't find the reason of this bug, but changing the class name, as in the patch #10, works for my base theme & sub themes. It is interesting.
Anyway, thanks for your quick reply @hatuhay.
Comment #22
hockey2112 commentedThe patch is #15 worked for me, thanks!
Comment #23
kerasai commentedNoting that I ran into this because I was still using Bootstrap 4, instead of 5.
It was mostly trivial to update to Bootstrap 5 for me. If you're in a spot where you have to remain on Bootstrap 4, you'll either need to use one of the patches for this theme or override the template in your custom theme.