From 1d1496ff3e05e1e48c4bf59fdd29d43e09ee54fe Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Tue, 17 Mar 2026 23:46:39 +0800
Subject: [PATCH] MDL-85451 block_timeline: Group the due date filter options

To ensure that the filter options for the day filter menu matches
the menu pattern and pass accessibility checks, we need to:
* Group the due date filter options, labelled by the "Due date"
"heading".
* Set the "Due date" heading with a presentation role to prevent
assistive technologies from announcing it when the user goes through
the menu options.
---
 .../templates/nav-day-filter.mustache         | 100 +++++++++---------
 1 file changed, 51 insertions(+), 49 deletions(-)

diff --git a/public/blocks/timeline/templates/nav-day-filter.mustache b/public/blocks/timeline/templates/nav-day-filter.mustache
index db8c8ae0233..75fbba3383f 100644
--- a/public/blocks/timeline/templates/nav-day-filter.mustache
+++ b/public/blocks/timeline/templates/nav-day-filter.mustache
@@ -60,54 +60,56 @@
             {{#str}} overdue, block_timeline {{/str}}
         </a>
         <div class="dropdown-divider" role="separator"></div>
-        <h6 class="dropdown-header">{{#str}} duedate, block_timeline {{/str}}</h6>
-        <a
-            class="dropdown-item"
-            href="#"
-            data-from="0"
-            data-to="7"
-            data-filtername="next7days"
-            {{#next7days}}aria-current="true"{{/next7days}}
-            aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next7days, block_timeline {{/str}}{{/str}}"
-            role="menuitem"
-        >
-            {{#str}} next7days, block_timeline {{/str}}
-        </a>
-        <a
-            class="dropdown-item"
-            href="#"
-            data-from="0"
-            data-to="30"
-            data-filtername="next30days"
-            {{#next30days}}aria-current="true"{{/next30days}}
-            aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next30days, block_timeline {{/str}}{{/str}}"
-            role="menuitem"
-        >
-            {{#str}} next30days, block_timeline {{/str}}
-        </a>
-        <a
-            class="dropdown-item"
-            href="#"
-            data-from="0"
-            data-to="90"
-            data-filtername="next3months"
-            {{#next3months}}aria-current="true"{{/next3months}}
-            aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next3months, block_timeline {{/str}}{{/str}}"
-            role="menuitem"
-        >
-            {{#str}} next3months, block_timeline {{/str}}
-        </a>
-        <a
-            class="dropdown-item"
-            href="#"
-            data-from="0"
-            data-to="180"
-            data-filtername="next6months"
-            {{#next6months}}aria-current="true"{{/next6months}}
-            aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next6months, block_timeline {{/str}}{{/str}}"
-            role="menuitem"
-        >
-            {{#str}} next6months, block_timeline {{/str}}
-        </a>
+        <div role="group" aria-labelledby="duedatefiltergrouplabel">
+            <div class="h6 dropdown-header" role="presentation" id="duedatefiltergrouplabel">{{#str}} duedate, block_timeline {{/str}}</div>
+            <a
+                    class="dropdown-item"
+                    href="#"
+                    data-from="0"
+                    data-to="7"
+                    data-filtername="next7days"
+                    {{#next7days}}aria-current="true"{{/next7days}}
+                    aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next7days, block_timeline {{/str}}{{/str}}"
+                    role="menuitem"
+            >
+                {{#str}} next7days, block_timeline {{/str}}
+            </a>
+            <a
+                    class="dropdown-item"
+                    href="#"
+                    data-from="0"
+                    data-to="30"
+                    data-filtername="next30days"
+                    {{#next30days}}aria-current="true"{{/next30days}}
+                    aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next30days, block_timeline {{/str}}{{/str}}"
+                    role="menuitem"
+            >
+                {{#str}} next30days, block_timeline {{/str}}
+            </a>
+            <a
+                    class="dropdown-item"
+                    href="#"
+                    data-from="0"
+                    data-to="90"
+                    data-filtername="next3months"
+                    {{#next3months}}aria-current="true"{{/next3months}}
+                    aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next3months, block_timeline {{/str}}{{/str}}"
+                    role="menuitem"
+            >
+                {{#str}} next3months, block_timeline {{/str}}
+            </a>
+            <a
+                    class="dropdown-item"
+                    href="#"
+                    data-from="0"
+                    data-to="180"
+                    data-filtername="next6months"
+                    {{#next6months}}aria-current="true"{{/next6months}}
+                    aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next6months, block_timeline {{/str}}{{/str}}"
+                    role="menuitem"
+            >
+                {{#str}} next6months, block_timeline {{/str}}
+            </a>
+        </div>
     </div>
 </div>