use understrap_get_screen_reader_class() for the skip link

css/theme-bootstrap4.css

@@ -8757,7 +8757,7 @@ button.bg-dark:focus {
   }
 }
 
-.sr-only, a.skip-link {
+.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8769,7 +8769,7 @@ button.bg-dark:focus {
   border: 0;
 }
 
-.sr-only-focusable:active, a.skip-link:active, .sr-only-focusable:focus, a.skip-link:focus {
+.sr-only-focusable:active, .sr-only-focusable:focus {
   position: static;
   width: auto;
   height: auto;
@@ -11086,6 +11086,26 @@ article img,
   height: auto;
 }
 
+a.skip-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+a.skip-link:active, a.skip-link:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
 .navbar-dark .navbar-nav .dropdown-menu .nav-link {
   display: block;
   width: 100%;
@@ -14669,7 +14689,7 @@ figure.woocommerce-product-gallery__wrapper {
   content: "\f2e0";
 }
 
-.sr-only, a.skip-link {
+.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -14680,7 +14700,7 @@ figure.woocommerce-product-gallery__wrapper {
   border: 0;
 }
 
-.sr-only-focusable:active, a.skip-link:active, .sr-only-focusable:focus, a.skip-link:focus {
+.sr-only-focusable:active, .sr-only-focusable:focus {
   position: static;
   width: auto;
   height: auto;

css/theme.css

@@ -7748,8 +7748,7 @@ textarea.form-control-lg {
 }
 
 .visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within),
-a.skip-link:not(:focus):not(:focus-within) {
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
@@ -11794,6 +11793,18 @@ article img,
   height: auto;
 }
 
+a.skip-link:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .navbar-dark .navbar-nav .dropdown-menu .nav-link {
   display: block;
   width: 100%;

header.php

@@ -29,7 +29,9 @@ $navbar_type       = get_theme_mod( 'understrap_navbar_type', 'collapse' );
 	<!-- ******************* The Navbar Area ******************* -->
 	<header id="wrapper-navbar">
 
-		<a class="skip-link" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
+		<a class="skip-link <?php echo understrap_get_screen_reader_class( true ); ?>" href="#content">
+			<?php esc_html_e( 'Skip to content', 'understrap' ); ?>
+		</a>
 
 		<?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?>
 

inc/editor-color-palette.json

@@ -1 +1 @@
-{"--bs-blue":"#0d6efd","--bs-indigo":"#6610f2","--bs-purple":"#5533ff","--bs-pink":"#d63384","--bs-red":"#dc3545","--bs-orange":"#fd7e14","--bs-yellow":"#ffc107","--bs-green":"#198754","--bs-teal":"#20c997","--bs-cyan":"#0dcaf0","--bs-white":"#fff","--bs-gray":"#6c757d","--bs-gray-dark":"#343a40"}
+{"--blue":"#007bff","--indigo":"#6610f2","--purple":"#5533ff","--pink":"#e83e8c","--red":"#dc3545","--orange":"#fd7e14","--yellow":"#ffc107","--green":"#28a745","--teal":"#20c997","--cyan":"#17a2b8","--white":"#fff","--gray":"#6c757d","--gray-dark":"#343a40"}

inc/template-tags.php

@@ -371,3 +371,20 @@ if ( ! function_exists( 'understrap_get_list_item_separator' ) ) {
 		return esc_html__( ', ', 'understrap' );
 	}
 }
+
+if ( ! function_exists( 'understrap_get_screen_reader_class' ) ) {
+	/**
+	 * Retrieves Bootstrap's screen reader text class.
+	 *
+	 * @param bool $focusable (Optional) Whether to make the screen reader text
+	 *                        visually focusable. Default: false.
+	 * @return string Bootstrap's screen reader text class.
+	 */
+	function understrap_get_screen_reader_class( $focusable = false ) {
+		$bootstrap_version = get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' );
+		if ( 'bootstrap4' === $bootstrap_version ) {
+			return $focusable ? 'sr-only sr-only-focusable' : 'sr-only';
+		}
+		return $focusable ? 'visually-hidden-focusable' : 'visually-hidden';
+	}
+}

phpcs.xml.dist

@@ -76,6 +76,7 @@
 				<element value="get_the_archive_title"/>
 				<element value="get_the_archive_description"/>
 				<element value="understrap_get_list_item_separator"/>
+				<element value="understrap_get_screen_reader_class"/>
 			</property>
 		</properties>
 	</rule>

src/sass/theme/_understrap.scss

@@ -150,10 +150,10 @@ article img,
 // Skip to content link
 a.skip-link {
 	@if variable-exists('bootstrap4') {
-		@extend .sr-only;
-		@extend .sr-only-focusable;
+		@include sr-only();
+		@include sr-only-focusable();
 	} @else {
-		@extend .visually-hidden-focusable;
+		@include visually-hidden-focusable();
 	}
 }