refactor: enhance accessibility with ARIA roles and attributes

RRZE-Webteam · May 23, 2024 · b443d6a · b443d6a
1 parent 41dcd94
commit b443d6a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/resources/ts/degree-program-overview/degree-program-overview.ts b/resources/ts/degree-program-overview/degree-program-overview.ts
@@ -74,6 +74,7 @@ export const updateDegreeProgramOverviewDataset = (
 };
 
 export default ( data: DegreeProgramApiData[] ) => {
+	degreeProgramsOverview?.setAttribute( 'aria-busy', 'true' );
 	degreeProgramsOverview
 		?.querySelectorAll( SINGLE_PROGRAM_PREVIEW_SELECTOR )
 		?.forEach( ( element ) => element.remove() );
@@ -84,9 +85,11 @@ export default ( data: DegreeProgramApiData[] ) => {
 
 	if ( ! programs.length ) {
 		showNoResults();
+		degreeProgramsOverview?.setAttribute( 'aria-busy', 'false' );
 		return;
 	}
 
 	hideNoResults();
 	renderPrograms( programs );
+	degreeProgramsOverview?.setAttribute( 'aria-busy', 'false' );
 };
diff --git a/templates/search/collection.php b/templates/search/collection.php
@@ -33,6 +33,9 @@
 <ul
     class="c-degree-programs-collection <?= esc_attr($viewModeClass) ?>"
     data-active-filters="<?= esc_attr(implode(',', $activeFilterNames)) ?>"
+    role="region"
+    aria-labelledby="degree-programs-search-title"
+    aria-live="polite"
 >
     <?php /** @var DegreeProgramViewTranslated $view */ ?>
     <?php // phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped ?>

diff --git a/templates/search/search.php b/templates/search/search.php
@@ -37,9 +37,9 @@
 
 ?>
 
-<section class="c-degree-programs-search" lang="<?= esc_attr(get_bloginfo('language')) ?>">
+<section class="c-degree-programs-search" lang="<?= esc_attr(get_bloginfo('language')) ?>" aria-labelledby="degree-programs-search-title">
     <?php if ($hiddenElements->isTitleVisible()) : ?>
-        <h1 class="c-degree-programs-search__title">
+        <h1 id="degree-programs-search-title" class="c-degree-programs-search__title">
             <?= esc_html_x(
                 'Degree programs',
                 'frontoffice: degree programs search form',