Merge pull request #1024 from CuBoulder/issue/1021

Replaces `sr-only` Bootstrap 4 class with `visually-hidden` Bootstrap 5 class
CuBoulder · Jun 3, 2024 · 84c9f62 · 84c9f62
2 parents aaae6c2 + a89079c
commit 84c9f62
Show file tree

Hide file tree

Showing 22 changed files with 62 additions and 58 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Replaces `sr-only` Bootstrap 4 class with `visually-hidden` Bootstrap 5 class
+  [Bug, a11y] Resolves CuBoulder/tiamat-theme#1021 Visually hidden (screenreader) elements briefly visible on page load
+---
+
 - ### Block Alignments
   Made fixes to layout alignment so that blocks will always be synced.
   The main thing is that the left edge and right edge of the row content should align properly. 

diff --git a/js/ucb-article-feature-block.js b/js/ucb-article-feature-block.js
@@ -450,7 +450,7 @@ class ArticleFeatureBlockElement extends HTMLElement {
         featureReadMore.innerText = "Read More";
         //Screen Reader text
         var srOnly = document.createElement("span");
-        srOnly.className = "sr-only";
+        srOnly.className = "visually-hidden";
         srOnly.innerText = ` about ${article.title}`;
         featureReadMore.appendChild(srOnly);
 
@@ -552,7 +552,7 @@ class ArticleFeatureBlockElement extends HTMLElement {
         featureReadMore.innerText = "Read More";
         //Screen Reader text
         var srOnly = document.createElement("span");
-        srOnly.className = "sr-only";
+        srOnly.className = "visually-hidden";
         srOnly.innerText = ` about ${article.title}`;
         featureReadMore.appendChild(srOnly);
 

diff --git a/js/ucb-newsletter.js b/js/ucb-newsletter.js
@@ -56,9 +56,9 @@
         var style = document.getElementsByTagName('style')
         var email = document.getElementById('email-preview')
         var categories = email.getElementsByClassName("ucb-article-categories");
-        // Need to strip sr-only Categories text to force-hide, CSS hides don't work in Outlook Clients
+        // Need to strip visually-hidden Categories text to force-hide, CSS hides don't work in Outlook Clients
         for (var i = 0; i < categories.length; i++) {
-          var span = categories[i].querySelector("span.sr-only");
+          var span = categories[i].querySelector("span.visually-hidden");
           if (span) {
             span.innerText = "";
           }

diff --git a/js/ucb-people-list.js b/js/ucb-people-list.js
@@ -107,7 +107,7 @@
       messageElement.className = 'ucb-list-msg';
       messageElement.setAttribute('hidden', '');
       loadingElement.className = 'ucb-loading-data';
-      loadingElement.innerHTML = '<span class="sr-only">Loading</span><i aria-hidden="true" class="fa-solid fa-spinner fa-3x fa-spin-pulse"></i>';
+      loadingElement.innerHTML = '<span class="visually-hidden">Loading</span><i aria-hidden="true" class="fa-solid fa-spinner fa-3x fa-spin-pulse"></i>';
       chromeElement.appendChild(userFormElement);
       contentWrapperElement.appendChild(messageElement);
       contentWrapperElement.appendChild(contentElement);
@@ -619,7 +619,7 @@
                     <i class="fa-solid fa-envelope iconColor"></i>
                     <a href="mailto:${personEmail}">
                       <span aria-hidden="true" class="ucb-people-list-contact">Email</span>
-                      <span class="sr-only">Email ${personName} at ${personEmail}</span> 
+                      <span class="visually-hidden">Email ${personName} at ${personEmail}</span> 
                     </a>
                   </span>`
                     : ""

diff --git a/templates/content/node--basic-page.html.twig b/templates/content/node--basic-page.html.twig
@@ -79,7 +79,7 @@
 ] %}
 
 <article{{ attributes.addClass(classes) }}>
-  <h1 class="sr-only">
+  <h1 class="visually-hidden">
     {{ label }}
   </h1>
   {% if content %}

diff --git a/templates/content/node--collection-item-page.html.twig b/templates/content/node--collection-item-page.html.twig
@@ -3,10 +3,10 @@
 {#Dummy variable to ensure that all content tags are set for caching purposes#}
 {% set content_render = content|render %}
 
-{# Used for hiding site title visibly using sr-only bootstrap class, if front page #}
+{# Used for hiding site title visibly using visually-hidden bootstrap class, if front page #}
 {% set isFrontPage = '' %}
 {% if is_front %}
-	{% set isFrontPage = 'sr-only' %}
+	{% set isFrontPage = 'visually-hidden' %}
 {% endif %}
 
 {%

diff --git a/templates/content/node--form-page.html.twig b/templates/content/node--form-page.html.twig
@@ -11,7 +11,7 @@
 
 <article{{ attributes.addClass(classes) }}>
   <div class="container">
-    <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+    <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
       {{ label }}
     </h1>
     {% if content.body|render %}

diff --git a/templates/content/node--newsletter.html.twig b/templates/content/node--newsletter.html.twig
@@ -23,7 +23,7 @@
     'class': ['container', 'ucb-newsletter'],
     'data-loggedin': logged_in ? 'true' : 'false' }) }}>
     {# Newsletter Title #}
-    <h1{{ title_attributes.addClass('ucb-newsletter-title', is_front ? 'sr-only').setAttribute('itemprop', 'name') }}>
+    <h1{{ title_attributes.addClass('ucb-newsletter-title', is_front ? 'visually-hidden').setAttribute('itemprop', 'name') }}>
       {{ label }}
     </h1>
     {# Newsletter Intro #}

diff --git a/templates/content/node--ucb-article-list.html.twig b/templates/content/node--ucb-article-list.html.twig
@@ -260,7 +260,7 @@
 
 {# JSON API Filter logic #}
 <article{{ attributes.addClass('container', 'ucb-content-wrapper') }}>
-  <h1{{ title_attributes.addClass('ucb-article-list-header', is_front ? 'sr-only') }}>
+  <h1{{ title_attributes.addClass('ucb-article-list-header', is_front ? 'visually-hidden') }}>
     {{ label }}
   </h1>
 

diff --git a/templates/content/node--ucb-article.html.twig b/templates/content/node--ucb-article.html.twig
@@ -141,10 +141,10 @@
     <div class="ucb-article" itemscope itemtype="https://schema.org/Article">
       {# If using a Title Background img, render that #}
       {% if content.field_article_title_background.0 %}
-        <header><h1 class="sr-only">{{ label }}</h1></header>
+        <header><h1 class="visually-hidden">{{ label }}</h1></header>
         <div class="backgroundTitleDiv {{ overlayClass }}">
           {{ content.field_article_title_background }}
-          <div{{ title_attributes.addClass('ucb-article-heading', 'article-header-' ~ textColor, is_front ? 'sr-only') }}>
+          <div{{ title_attributes.addClass('ucb-article-heading', 'article-header-' ~ textColor, is_front ? 'visually-hidden') }}>
             <div class="container">
               <h1>{{ label }}</h1>
             </div>
@@ -154,7 +154,7 @@
       <div class="container">
         {# If NO Title Background img, render the regular title #}
         {% if not content.field_article_title_background.0 %}
-          <h1{{ title_attributes.addClass('ucb-article-heading', is_front ? 'sr-only') }}>
+          <h1{{ title_attributes.addClass('ucb-article-heading', is_front ? 'visually-hidden') }}>
             {{ label }}
           </h1>
         {% endif %}
@@ -170,7 +170,7 @@
           {% if showDate %}
             <div class="ucb-article-date">
               <i class="fa-regular fa-calendar"></i>
-              <span class="sr-only">Published:{{ date_formatted }}</span>
+              <span class="visually-hidden">Published:{{ date_formatted }}</span>
               <span itemprop="datePublished">
                 {{ date_formatted }}
               </span>
@@ -194,7 +194,7 @@
       {% if content.field_appears_in_issue|render %}
         <div role="contentinfo" class="container ucb-article-issue" itemprop="keywords">
           <div>
-            <span class="sr-only">Issues:</span>
+            <span class="visually-hidden">Issues:</span>
             <i class="fa-solid fa-book"></i>
           </div>
           {{ content.field_appears_in_issue }}

diff --git a/templates/content/node--ucb-class-notes-list-page.html.twig b/templates/content/node--ucb-class-notes-list-page.html.twig
@@ -23,7 +23,7 @@
 
 <article{{ attributes.addClass(classes) }}>
   <div class="ucb-class-notes-list-title">
-    <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+    <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
       {{ label }}
     </h1>
   </div>

diff --git a/templates/content/node--ucb-class-notes.html.twig b/templates/content/node--ucb-class-notes.html.twig
@@ -8,7 +8,7 @@
 
 
 <article{{ attributes.addClass(classes) }}>
-  <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+  <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
     {{ label }}
   </h1>
   {% if content %}

diff --git a/templates/content/node--ucb-faq-page.html.twig b/templates/content/node--ucb-faq-page.html.twig
@@ -14,7 +14,7 @@
 
   <div{{ attributes.addClass(classes) }}>
     <div class="ucb-faq-title">
-      <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+      <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
         {{ label }}
       </h1>
     </div>

diff --git a/templates/content/node--ucb-issue-archive.html.twig b/templates/content/node--ucb-issue-archive.html.twig
@@ -13,7 +13,7 @@
 
 <div{{ attributes.addClass(classes) }}>
   <div class="ucb-issue-archive-title">
-    <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+    <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
       {{ label }}
     </h1>
   </div>

diff --git a/templates/content/node--ucb-issue.html.twig b/templates/content/node--ucb-issue.html.twig
@@ -12,7 +12,7 @@
 <div {{attributes.addClass(classes)}}>
   <div class="row">
     <header role="banner" class="ucb-article-banner">
-      <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+      <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
         {{ label }}
       </h1>
     </header>

diff --git a/templates/content/node--ucb-people-list-page.html.twig b/templates/content/node--ucb-people-list-page.html.twig
@@ -66,7 +66,7 @@
 } %}
 <article{{ attributes.addClass(classes) }}>
   <div class="ucb-people-list-title">
-    <h1{{ title_attributes.addClass(is_front ? 'sr-only') }}>
+    <h1{{ title_attributes.addClass(is_front ? 'visually-hidden') }}>
       {{ label }}
     </h1>
   </div>

diff --git a/templates/field/field--field-ucb-article-categories.html.twig b/templates/field/field--field-ucb-article-categories.html.twig
@@ -8,7 +8,7 @@
 {% set items = items|filter(item => item.content['#options'].entity.field_ucb_category_display.value == '1') %}
 {% if items %}
   <div role="contentinfo" class="container ucb-article-categories" itemprop="about">
-    <span class="sr-only">Categories:</span>
+    <span class="visually-hidden">Categories:</span>
     <div class="ucb-article-category-icon" aria-hidden="true">
       <i class="fa-solid fa-folder-open"></i>
     </div>

diff --git a/templates/field/field--field-ucb-article-tags.html.twig b/templates/field/field--field-ucb-article-tags.html.twig
@@ -7,7 +7,7 @@
 {% set items = items|filter(item => item.content['#options'].entity.field_ucb_tag_display.value == '1') %}
 {% if items %}
   <div role="contentinfo" class="container ucb-article-tags" itemprop="keywords">
-    <span class="sr-only">Tags:</span>
+    <span class="visually-hidden">Tags:</span>
     <div class="ucb-article-tag-icon" aria-hidden="true">
       <i class="fa-solid fa-tags"></i>
     </div>

diff --git a/templates/field/field--field-ucb-person-links.html.twig b/templates/field/field--field-ucb-person-links.html.twig
@@ -20,7 +20,7 @@
 
 					{% set linkTitle = item.content['#title'] %}
 					{% if item.content['#url']|render|first == '/' %}
-						<span class="sr-only">Primary Link</span>
+						<span class="visually-hidden">Primary Link</span>
 						<i class="fa-solid fa-link primaryLinkIcon"></i>
 						<a href="{{ item.content['#url']|render }}" class="ucb-person-social-link ucb-person-other-link" title="Social Media" alt="Social Media">
 							{% if linkTitle|render %}
@@ -35,98 +35,98 @@
 						{% set linkUrlUpper = linkUrl|upper %}
 
 						{% if 'FACEBOOK' in linkUrlUpper %}
-							<span class="sr-only">Facebook</span>
+							<span class="visually-hidden">Facebook</span>
 							<i class="fa-brands fa-facebook"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-facebook-link" title="Facebook" alt="Facebook">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'TWITTER' in linkUrlUpper %}
-							<span class="sr-only">Twitter</span>
+							<span class="visually-hidden">Twitter</span>
 							<i class="fa-brands fa-x-twitter"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-twitter-link" title="Twitter" alt="Twitter">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'FLICKR' in linkUrlUpper %}
-							<span class="sr-only">Flickr</span>
+							<span class="visually-hidden">Flickr</span>
 							<i class="fa-brands fa-flickr"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-flickr-link" title="Flickr" alt="Flickr">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'LINKEDIN' in linkUrlUpper %}
-							<span class="sr-only">LinkedIn</span>
+							<span class="visually-hidden">LinkedIn</span>
 							<i class="fa-brands fa-linkedin"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-linkedin-link" title="LinkedIn" alt="LinkedIn">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'YOUTUBE' in linkUrlUpper %}
-							<span class="sr-only">YouTube</span>
+							<span class="visually-hidden">YouTube</span>
 							<i class="fa-brands fa-youtube"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-youtube-link" title="YouTube" alt="YouTube">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'INSTAGRAM' in linkUrlUpper %}
-							<span class="sr-only">Instagram</span>
+							<span class="visually-hidden">Instagram</span>
 							<i class="fa-brands fa-instagram"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-instagram-link" title="Instagram" alt="Instagram">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'DISCORD' in linkUrlUpper %}
-							<span class="sr-only">Discord</span>
+							<span class="visually-hidden">Discord</span>
 							<i class="fa-brands fa-discord"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-discord-link" title="Discord" alt="Discord">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'PINTREST' in linkUrlUpper %}
-							<span class="sr-only">Pintrest</span>
+							<span class="visually-hidden">Pintrest</span>
 							<i class="fa-brands fa-pinterest-p"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-pintrest-link" title="Pintrest" alt="Pintrest">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'VIMEO' in linkUrlUpper %}
-							<span class="sr-only">Vimeo</span>
+							<span class="visually-hidden">Vimeo</span>
 							<i class="fa-brands fa-vimeo-v"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-vimeo-link" title="Vimeo" alt="Vimeo">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'WORDPRESS' in linkUrlUpper %}
-							<span class="sr-only">Wordpress</span>
+							<span class="visually-hidden">Wordpress</span>
 							<i class="fa-brands fa-wordpress-simple"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-wordpress-link" title="Wordpress" alt="Wordpress">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'TIKTOK' in linkUrlUpper %}
-							<span class="sr-only">TikTok</span>
+							<span class="visually-hidden">TikTok</span>
 							<i class="fa-brands fa-tiktok"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-tiktok-link" title="TikTok" alt="TikTok">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'REDDIT' in linkUrlUpper %}
-							<span class="sr-only">Reddit</span>
+							<span class="visually-hidden">Reddit</span>
 							<i class="fa-brands fa-reddit-alien"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-reddit-link" title="Reddit" alt="Reddit">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% elseif 'PATREON' in linkUrlUpper %}
-							<span class="sr-only">Patreon</span>
+							<span class="visually-hidden">Patreon</span>
 							<i class="fa-brands fa-patreon"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-patreon-link" title="Patreon" alt="Patreon">
 								<span>{{ linkTitle }}</span>
 							</a>
 
 						{% else %}
-							<span class="sr-only">Link</span>
+							<span class="visually-hidden">Link</span>
 							<i class="fa-solid fa-up-right-from-square"></i>
 							<a href="{{ linkUrl }}" class="ucb-person-social-link ucb-person-other-link" title="Social Media" alt="Social Media">
 								{% if linkTitle|render %}