From 1903e246e98f605169dbadaba4fbfb2f645ed702 Mon Sep 17 00:00:00 2001
From: Nena Roig <atenea3r@yahoo.com>
Date: Wed, 4 Jun 2025 20:21:26 -0400
Subject: [PATCH] Generate  classes for responsive screen-reader-only hiding.

---
 scss/helpers/_visually-hidden.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss
index 4760ff03d1..08477e39c1 100644
--- a/scss/helpers/_visually-hidden.scss
+++ b/scss/helpers/_visually-hidden.scss
@@ -6,3 +6,20 @@
 .visually-hidden-focusable:not(:focus):not(:focus-within) {
   @include visually-hidden();
 }
+
+// Responsive visually hidden utilities
+//
+// Generates `.visually{-breakpoint}-hidden` classes that apply the
+// `visually-hidden` mixin starting at each breakpoint and up,
+// enabling screen-reader-only content that is conditionally hidden
+// based on viewport size.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-up($breakpoint) {
+    .visually#{$infix}-hidden {
+      @include visually-hidden();
+    }
+  }
+}