diff --git a/lib/editor/tiny/plugins/equation/templates/modal_library.mustache b/lib/editor/tiny/plugins/equation/templates/modal_library.mustache
index ebbeede6268..25556ea676d 100644
--- a/lib/editor/tiny/plugins/equation/templates/modal_library.mustache
+++ b/lib/editor/tiny/plugins/equation/templates/modal_library.mustache
@@ -40,7 +40,7 @@
                 <a class="nav-link{{#active}} active{{/active}}"{{!
                    }}{{#active}} aria-selected="true"{{/active}}{{!
                    }}{{^active}} aria-selected="false" tabindex="-1"{{/active}}{{!
-                   }} href="#{{elementid}}_tiny_equation_group_{{key}}"{{!
+                   }} href="#{{elementidescaped}}_tiny_equation_group_{{key}}"{{!
                    }} data-bs-target="#{{elementidescaped}}_tiny_equation_group_{{key}}"
                    role="tab" data-bs-toggle="tab"
                 >
@@ -52,7 +52,7 @@
     <div class="tab-content mb-1 tiny_equation_groups">
         {{#libraries}}
             <div data-medium-type="link" class="tab-pane{{#active}} active{{/active}}"
-                 id="{{elementid}}_tiny_equation_group_{{key}}">
+                 id="{{elementidescaped}}_tiny_equation_group_{{key}}">
                 <div role="toolbar">
                     {{#elements}}
                         <button class="btn btn-secondary tiny_equation_btn" data-tex="{{.}}" aria-label="{{.}}" title="{{.}}">
diff --git a/lib/editor/tiny/plugins/equation/tests/behat/equation.feature b/lib/editor/tiny/plugins/equation/tests/behat/equation.feature
index a788cadfd3b..97d0e870ac2 100644
--- a/lib/editor/tiny/plugins/equation/tests/behat/equation.feature
+++ b/lib/editor/tiny/plugins/equation/tests/behat/equation.feature
@@ -72,3 +72,33 @@ Feature: Equation editor
     And I navigate to "Settings" in current page administration
     And I click on the "Insert" menu item for the "Activity instructions" TinyMCE editor
     And I should see "Equation editor"
+
+  @javascript
+  Scenario: Equation editor modal tabs are navigatable with escaped element ids
+    Given the following "users" exist:
+      | username |
+      | student  |
+    And the following "courses" exist:
+      | fullname | shortname | category |
+      | Course 1 | C1        | 0        |
+    And the following "course enrolments" exist:
+      | user    | course | role    |
+      | student | C1     | student |
+    And the following "question categories" exist:
+      | contextlevel | reference | name           |
+      | Course       | C1        | Test questions |
+    And the following "questions" exist:
+      | questioncategory | qtype | name   | questiontext   | defaultmark |
+      | Test questions   | essay | essay1 | First question | 20          |
+    And the following "activities" exist:
+      | activity | name   | intro              | course | idnumber | grade |
+      | quiz     | Quiz 1 | Quiz 1 description | C1     | quiz1    | 20    |
+    And quiz "Quiz 1" contains the following questions:
+      | question | page |
+      | essay1   | 1    |
+    When I am on the "Quiz 1" "quiz activity" page logged in as "student"
+    And I press "Attempt quiz"
+    And I expand all toolbars for the "Answer" TinyMCE editor
+    And I click on the "Equation editor" button for the "Answer" TinyMCE editor
+    And I click on "Arrows" "link"
+    Then I should see "←"