Merge pull request #618 from CuBoulder/issue/616

Fixes accessibility issues with Article and Article List
CuBoulder · Jan 23, 2024 · a863f83 · a863f83
2 parents 23c5dad + b4d69e3
commit a863f83
Show file tree

Hide file tree

Showing 4 changed files with 247 additions and 227 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Fixes accessibility issues with Article and Article List
+  - Adds alt text to Article List images.
+  - Enhances readability and fixes bugs with article title backgrounds.
+
+  Resolves CuBoulder/tiamat-theme#616
+---
+
 - ### Fixes expandable content `aria-expanded` errors
   Resolves CuBoulder/tiamat-theme#614
 ---

diff --git a/css/ucb-article.css b/css/ucb-article.css
@@ -131,7 +131,7 @@ i.fa-regular.fa-calendar {
   margin-bottom: 20px;
 }
 
-.ucb-article-author-name span:not(:last-of-type):after{
+.ucb-article-author-name span:not(:last-of-type):after {
   content: ",";
 }
 
@@ -142,50 +142,58 @@ i.fa-regular.fa-calendar {
   object-fit: fill;
 }
 
-.centeredTitle {
+.backgroundTitleDiv .ucb-article-heading {
   position: absolute;
-  bottom: 0.5em;
+  display: block;
+  bottom: 0;
+  width: 100%;
+  background-color: transparent;
+  padding: 200px 20px 30px;
+}
+
+.backgroundTitleDiv.ucb-overlay-dark .ucb-article-heading {
+  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+}
+
+.backgroundTitleDiv.ucb-overlay-light .ucb-article-heading {
+  background-image: -webkit-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: -moz-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: -o-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: -ms-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
 }
 
-.article-header-White{
-  color: white;
+.ucb-article-heading.article-header-White, .ucb-article-heading.article-header-White h1 {
+  color: #FFF;
 }
 
-.article-header-Black{
-  color:black
+.ucb-article-heading.article-header-Black, .ucb-article-heading.article-header-Black h1 {
+  color: #000;
 }
 
-.backgroundTitleDiv > div > div > .imageMediaStyle > img {
+.backgroundTitleDiv .imageMediaStyle img {
   width: 100%;
   max-height: 600px;
   object-fit: cover;
 }
 
-.backgroundTitleDiv > div > div > .imageMediaStyle{
+.backgroundTitleDiv .imageMediaStyle {
   padding-bottom: 0;
   margin-bottom: 20px;
 }
 
-.ucb-overlay-dark > div > div > .imageMediaStyle > img, 
-.ucb-overlay-light > div > div > .imageMediaStyle > img{
-  opacity: 75%;
-}
-
-.ucb-overlay-light > div > div > .imageMediaStyle{
-  background: white;
-}
-.ucb-overlay-dark > div > div > .imageMediaStyle{
-  background: black;
-}
-
-.ucb-article-supplemental-text{
+.ucb-article-supplemental-text {
   margin-bottom: 1em;
   font-style: italic;
   font-size: 0.85em;
 }
 
 /* Removes caption on header img */
-.backgroundTitleDiv > div > div > .media-image-caption{
+.backgroundTitleDiv .media-image-caption {
   display: none;
 }
 
@@ -194,6 +202,6 @@ i.fa-regular.fa-calendar {
   display: block;
 }
 
-.backgroundTitleDiv .imageMediaStyle img{
+.backgroundTitleDiv .imageMediaStyle img {
   padding-bottom: 0px;
 }