From dd111fce31d28cb1d8f9a2b19370e704a30428e0 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Thu, 3 Jun 2021 16:54:33 +0200
Subject: [PATCH] MOBILE-3320 a11y: Fix course section buttons

---
 .../course/components/format/format.ts        | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/core/features/course/components/format/format.ts b/src/core/features/course/components/format/format.ts
index b756f4ae0..389abc1f5 100644
--- a/src/core/features/course/components/format/format.ts
+++ b/src/core/features/course/components/format/format.ts
@@ -414,6 +414,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
                 CoreCourse.logView(this.course!.id, newSection.section, undefined, this.course!.fullname),
             );
         }
+
+        this.invalidateSectionButtons();
     }
 
     /**
@@ -506,6 +508,25 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         done?.();
     }
 
+    /**
+     * Invalidate section buttons so that they are rendered again. This is necessary in order to update
+     * some attributes that are not reactive, for example aria-label.
+     *
+     * @see https://github.com/ionic-team/ionic-framework/issues/21534
+     */
+    protected async invalidateSectionButtons(): Promise<void> {
+        const previousSection = this.previousSection;
+        const nextSection = this.nextSection;
+
+        this.previousSection = undefined;
+        this.nextSection = undefined;
+
+        await CoreUtils.nextTick();
+
+        this.previousSection = previousSection;
+        this.nextSection = nextSection;
+    }
+
     /**
      * Show more activities (only used when showing all the sections at the same time).
      *