Add inner text to star/unstar links on Activity stream.

This helps to prevent "empty links" errors from WAVE and other accessibility checkers. See #3252.
openlab-at-city-tech · Oct 2, 2023 · e61c123 · e61c123
1 parent 1b6443a
commit e61c123
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/wp-content/themes/openlab/parts/activity/entry-group.php b/wp-content/themes/openlab/parts/activity/entry-group.php
@@ -21,17 +21,19 @@
                         <?php if ( bp_activity_can_favorite() ) : ?>
 							<?php if ( !bp_get_activity_is_favorite() ) : ?>
 								<a href="<?php bp_activity_favorite_link(); ?>" title="Star activity" class="button fav bp-secondary-action" data-activity_id="<?php echo bp_get_activity_id(); ?>">
+									<span class="sr-only">Star activity</span>
                                     <span class="fa fa-star-o"></span>
 								</a>
 							<?php else : ?>
 								<a href="<?php bp_activity_unfavorite_link(); ?>" title="Unstar activity" class="button unfav bp-secondary-action" data-activity_id="<?php echo bp_get_activity_id(); ?>">
+									<span class="sr-only">Unstar activity</span>
                                     <span class="fa fa-star"></span>
 								</a>
 							<?php endif; ?>
 						<?php endif; ?>
                     </div>
                     <?php endif; ?>
-                </div>				
+                </div>
 			</div>
 		</div>
 	</div>

diff --git a/wp-content/themes/openlab/style.css b/wp-content/themes/openlab/style.css
@@ -11844,8 +11844,8 @@ body.single-help .entry-content h6 {
   font-size: 20px;
   transition: all 350ms ease-in-out;
 }
-.activity-list .activity-header-meta .fav span,
-.activity-list .activity-header-meta .unfav span {
+.activity-list .activity-header-meta .fav span.fa,
+.activity-list .activity-header-meta .unfav span.fa {
   color: #444;
 }
 .activity-list .activity-header-meta .fav:focus,
@@ -11854,13 +11854,13 @@ body.single-help .entry-content h6 {
 .activity-list .activity-header-meta .unfav:active {
   outline: none;
 }
-.activity-list .activity-header-meta .fav span:before {
+.activity-list .activity-header-meta .fav span.fa:before {
   content: "\f006";
 }
-.activity-list .activity-header-meta .fav:hover span:before {
+.activity-list .activity-header-meta .fav:hover span.fa:before {
   content: "\f005";
 }
-.activity-list .activity-header-meta .unfav span:before {
+.activity-list .activity-header-meta .unfav span.fa:before {
   content: "\f005";
 }
 .activity-list .activity-body p {
@@ -11936,8 +11936,8 @@ body.single-help .entry-content h6 {
   font-size: 20px;
   transition: all 350ms ease-in-out;
 }
-.group-activity-content .activity-action .fav span,
-.group-activity-content .activity-action .unfav span {
+.group-activity-content .activity-action .fav span.fa,
+.group-activity-content .activity-action .unfav span.fa {
   color: #444;
 }
 .group-activity-content .activity-action .fav:focus,
@@ -11946,13 +11946,13 @@ body.single-help .entry-content h6 {
 .group-activity-content .activity-action .unfav:active {
   outline: none;
 }
-.group-activity-content .activity-action .fav span:before {
+.group-activity-content .activity-action .fav span.fa:before {
   content: "\f006";
 }
-.group-activity-content .activity-action .fav:hover span:before {
+.group-activity-content .activity-action .fav:hover span.fa:before {
   content: "\f005";
 }
-.group-activity-content .activity-action .unfav span:before {
+.group-activity-content .activity-action .unfav span.fa:before {
   content: "\f005";
 }
 /**Custom media query items**/

diff --git a/wp-content/themes/openlab/style.less b/wp-content/themes/openlab/style.less
@@ -4932,7 +4932,7 @@ body.single-help {
 
             .fav,
             .unfav {
-                span {
+                span.fa {
                     color: #444;
                 }
 
@@ -4943,14 +4943,14 @@ body.single-help {
             }
 
             .fav {
-                span {
+                span.fa {
                     &:before {
                         content: "\f006";
                     }
                 }
 
                 &:hover {
-                    span {
+                    span.fa {
                         &:before {
                             content: "\f005";
                         }
@@ -4959,7 +4959,7 @@ body.single-help {
             }
 
             .unfav {
-                span {
+                span.fa {
                     &:before {
                         content: "\f005";
                     }
@@ -5059,7 +5059,7 @@ body.single-help {
 
         .fav,
         .unfav {
-            span {
+            span.fa {
                 color: #444;
             }
 
@@ -5070,14 +5070,14 @@ body.single-help {
         }
 
         .fav {
-            span {
+            span.fa {
                 &:before {
                     content: "\f006";
                 }
             }
 
             &:hover {
-                span {
+                span.fa {
                     &:before {
                         content: "\f005";
                     }
@@ -5086,7 +5086,7 @@ body.single-help {
         }
 
         .unfav {
-            span {
+            span.fa {
                 &:before {
                     content: "\f005";
                 }