Fix: update aria labels on H5P listing page (#1301)

pressbooks · Jan 6, 2025 · a63d81e · a63d81e
1 parent 99e1a5c
commit a63d81e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 16 deletions.
diff --git a/assets/src/scripts/routes/common.js b/assets/src/scripts/routes/common.js
@@ -196,34 +196,49 @@ export default {
 			const $h5pActivities = $( '.h5p-row-item' );
 			const $activityContainer = $( '.h5p-activity-container' );
 			$activityContainer.hide();
-			$( '#h5p-show-hide' ).text( $( '#h5p-show-hide' ).attr( 'show-all-text' ) );
-			$( '.h5p-row-item' ).text( $( '.h5p-row-item' ).attr( 'show-activity-text' ) );
+			$( '#h5p-show-hide' )
+				.text( $( '#h5p-show-hide' ).attr( 'show-all-text' ) )
+				.attr( 'aria-label', $( '#h5p-show-hide' ).attr( 'show-all-text' ) );
+			$( '.h5p-row-item' )
+				.text( $( '.h5p-row-item' ).attr( 'show-activity-text' ) )
+				.attr( 'aria-label', $( '.h5p-row-item' ).attr( 'show-activity-text' ) );
 
 			$h5pActivities.on( 'click', function () {
 				if ( $( this ).text() === $( this ).attr( 'show-activity-text' ) ) {
 					$activityContainer.hide();
 					$( this ).closest( 'tr' ).next( this ).show( 'slow' );
-					$( this ).text( $( this ).attr( 'hide-activity-text' ) );
+					$( this )
+						.text( $( this ).attr( 'hide-activity-text' ) )
+						.attr( 'aria-label', $( this ).attr( 'hide-activity-text' ) );
 					window.dispatchEvent( new Event( 'resize' ) );
 				} else {
 					$( this ).closest( 'tr' ).next( this ).hide();
-					$( this ).text( $( this ).attr( 'show-activity-text' ) );
+					$( this )
+						.text( $( this ).attr( 'show-activity-text' ) )
+						.attr( 'aria-label', $( this ).attr( 'show-activity-text' ) );
 				}
 			} );
 
 			$( '#h5p-show-hide' ).on( 'click', function () {
 				if ( $( this ).text() === $( this ).attr( 'show-all-text' ) ) {
 					$activityContainer.show();
-					$( this ).text( $( this ).attr( 'hide-all-text' ) );
-					$( '.h5p-row-item' ).text( $( '.h5p-row-item' ).attr( 'hide-activity-text' ) );
+					$( this )
+						.text( $( this ).attr( 'hide-all-text' ) )
+						.attr( 'aria-label', $( this ).attr( 'hide-all-text' ) );
+					$( '.h5p-row-item' )
+						.text( $( '.h5p-row-item' ).attr( 'hide-activity-text' ) )
+						.attr( 'aria-label', $( '.h5p-row-item' ).attr( 'hide-activity-text' ) );
 					window.dispatchEvent( new Event( 'resize' ) );
 				} else {
 					$activityContainer.hide();
-					$( this ).text( $( this ).attr( 'show-all-text' ) );
-					$( '.h5p-row-item' ).text( $( '.h5p-row-item' ).attr( 'show-activity-text' ) );
+					$( this )
+						.text( $( this ).attr( 'show-all-text' ) )
+						.attr( 'aria-label', $( this ).attr( 'show-all-text' ) );
+					$( '.h5p-row-item' )
+						.text( $( '.h5p-row-item' ).attr( 'show-activity-text' ) )
+						.attr( 'aria-label', $( '.h5p-row-item' ).attr( 'show-activity-text' ) );
 				}
 			} );
-
 		} );
 
 		const ctaSelector = document.getElementsByClassName( 'cta' );

diff --git a/assets/src/styles/layouts/_page.scss b/assets/src/styles/layouts/_page.scss
@@ -40,7 +40,6 @@ body:not(.home) #content h2.denied-title {
 
 #content p.h5p-count {
   font-family: $font-family-sans-serif;
-  text-align: center;
   margin-bottom: 1.5rem;
 }
 

diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,9 +1,9 @@
 {
-    "/scripts/book.js": "/scripts/book.js?id=4933ce814a30d618fc3381b04adbc909",
+    "/scripts/book.js": "/scripts/book.js?id=688dc1cb1bbf592737f340e054fda46c",
     "/scripts/pane.js": "/scripts/pane.js?id=7e5b385cb135973c79f77706c6f54cd1",
     "/scripts/collapse-sections.js": "/scripts/collapse-sections.js?id=b902d882dd21410b4387d805cd8a197f",
     "/scripts/lightbox.js": "/scripts/lightbox.js?id=cb2b7b2a5fb303c3095de89b8c31a28c",
-    "/styles/book.css": "/styles/book.css?id=3ef7c53a2707ae9100c3fd4fbde21af3",
+    "/styles/book.css": "/styles/book.css?id=1ba552a8e5defc8226a8508f583e6457",
     "/styles/web-house-style.css": "/styles/web-house-style.css?id=c8696663b3ec84a5cad13a7cb3f7e6d6",
     "/scripts/sharer.js": "/scripts/sharer.js?id=a3fcc3d168d2d8fef363c7a3247c2714",
     "/scripts/lity.js": "/scripts/lity.js?id=b91ed0405760d2e124c1ea7629271043",

diff --git a/dist/scripts/book.js b/dist/scripts/book.js
diff --git a/dist/styles/book.css b/dist/styles/book.css
diff --git a/page-h5p-listing.php b/page-h5p-listing.php
@@ -24,7 +24,7 @@
 				<?php echo __( 'This book includes ', 'pressbooks-book' ); ?>
 				<strong><?php echo $data['total'] . ' '; ?></strong>
 				<?php echo __( 'H5P activities. Only those which have been inserted into book content will be included if the book is cloned.', 'pressbooks-book' ); ?>
-				<?php echo sprintf( '<button type="button" id="h5p-show-hide" class="btn btn-secondary btn-sm" show-all-text="%s" hide-all-text="%s" aria-label="%s"></button>', __( 'Expand all', 'pressbooks-book' ), __( 'Hide all', 'pressbooks-book' ), __( 'Expand all activities', 'pressbooks-book' ) ); ?>
+				<?php echo sprintf( '<button type="button" id="h5p-show-hide" class="btn btn-secondary btn-sm" show-all-text="%s" hide-all-text="%s" aria-label="%s"></button>', __( 'Expand all', 'pressbooks-book' ), __( 'Hide all', 'pressbooks-book' ), __( 'Expand all', 'pressbooks-book' ) ); ?>
 			</p>
 		<?php endif; ?>
 		<?php if ( $filtered_does_not_exist ) : ?>
@@ -52,7 +52,7 @@
 				echo sprintf( '<td>%s</td>', $activity['title'] );
 				echo sprintf( '<td>%s</td>', $activity['activity_type'] );
 				if ( ! $filtered_by_id_exists ) {
-					echo sprintf( '<td><button h5p-id="%s" type="button" show-activity-text="%s" hide-activity-text="%s" aria-label="%s" class="btn btn-secondary btn-sm h5p-row-item"></button></td>', $activity['ID'], __( 'Show activity', 'pressbooks-book' ), __( 'Hide activity', 'pressbooks-book' ), __( 'View h5p activity', 'pressbooks-book' ) );
+					echo sprintf( '<td><button h5p-id="%s" type="button" show-activity-text="%s" hide-activity-text="%s" aria-label="%s" class="btn btn-secondary btn-sm h5p-row-item"></button></td>', $activity['ID'], __( 'Show activity', 'pressbooks-book' ), __( 'Hide activity', 'pressbooks-book' ), __( 'Show activity', 'pressbooks-book' ) );
 				}
 				echo '</tr>';
 				echo $filtered_by_id_exists ?