diff --git a/CHANGELOG.md b/CHANGELOG.md index 5662bfc2..f1f3b06c 100644 --- 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 index aa780922..86d449a2 100644 --- 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 index 5585ca11..a0f28d4b 100644 --- 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 index 5b748152..e67bc063 100644 --- 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 = 'Loading'; + loadingElement.innerHTML = ''; chromeElement.appendChild(userFormElement); contentWrapperElement.appendChild(messageElement); contentWrapperElement.appendChild(contentElement); @@ -619,7 +619,7 @@ - Email ${personName} at ${personEmail} + ` : "" diff --git a/templates/content/node--basic-page.html.twig b/templates/content/node--basic-page.html.twig index 848fefaa..1d3f746f 100644 --- a/templates/content/node--basic-page.html.twig +++ b/templates/content/node--basic-page.html.twig @@ -79,7 +79,7 @@ ] %} -

+

{{ label }}

{% if content %} diff --git a/templates/content/node--collection-item-page.html.twig b/templates/content/node--collection-item-page.html.twig index 49a73936..3daad35b 100644 --- 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 index 84b4a108..4019a15c 100644 --- a/templates/content/node--form-page.html.twig +++ b/templates/content/node--form-page.html.twig @@ -11,7 +11,7 @@
- + {{ label }} {% if content.body|render %} diff --git a/templates/content/node--newsletter.html.twig b/templates/content/node--newsletter.html.twig index 795071af..494cb3d9 100644 --- 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 #} - + {{ label }} {# Newsletter Intro #} diff --git a/templates/content/node--ucb-article-list.html.twig b/templates/content/node--ucb-article-list.html.twig index 6064aa33..95a5bad2 100644 --- 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 #} - + {{ label }} diff --git a/templates/content/node--ucb-article.html.twig b/templates/content/node--ucb-article.html.twig index f57ec676..ea152f2e 100644 --- a/templates/content/node--ucb-article.html.twig +++ b/templates/content/node--ucb-article.html.twig @@ -141,10 +141,10 @@
{# If using a Title Background img, render that #} {% if content.field_article_title_background.0 %} -

{{ label }}

+

{{ label }}

{{ content.field_article_title_background }} - +

{{ label }}

@@ -154,7 +154,7 @@
{# If NO Title Background img, render the regular title #} {% if not content.field_article_title_background.0 %} - + {{ label }} {% endif %} @@ -170,7 +170,7 @@ {% if showDate %}
- Published:{{ date_formatted }} + @@ -194,7 +194,7 @@ {% if content.field_appears_in_issue|render %}