From 3f8371ec19a35e04b9cc28aaa4cef9e8ea923953 Mon Sep 17 00:00:00 2001
From: Aliyan Haq <55751566+AliyanH@users.noreply.github.com>
Date: Thu, 6 Feb 2025 10:51:17 -0500
Subject: [PATCH] Add toggle state to controls and debug mode contextmenu

---
 src/mapml/handlers/ContextMenu.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js
index d6750c689..3268f7aba 100644
--- a/src/mapml/handlers/ContextMenu.js
+++ b/src/mapml/handlers/ContextMenu.js
@@ -122,12 +122,14 @@ export var ContextMenu = Handler.extend({
       {
         // 8
         text: locale.cmToggleControls + ' (<kbd>T</kbd>)',
-        callback: this._toggleControls
+        callback: this._toggleControls,
+        toggle: true
       },
       {
         // 9
         text: locale.cmToggleDebug + ' (<kbd>D</kbd>)',
-        callback: this._toggleDebug
+        callback: this._toggleDebug,
+        toggle: true
       },
       {
         // 10
@@ -461,6 +463,11 @@ export var ContextMenu = Handler.extend({
   },
 
   _toggleControls: function (e) {
+    let el = this.contextMenu._items[8].el.el;
+    el.setAttribute(
+      'aria-checked',
+      el.getAttribute('aria-checked') === 'true' ? 'false' : 'true'
+    );
     let mapEl =
       e instanceof KeyboardEvent ? this._map.options.mapEl : this.options.mapEl;
     if (mapEl.controls) {
@@ -505,6 +512,11 @@ export var ContextMenu = Handler.extend({
   },
 
   _toggleDebug: function (e) {
+    let el = this.contextMenu._items[9].el.el;
+    el.setAttribute(
+      'aria-checked',
+      el.getAttribute('aria-checked') === 'true' ? 'false' : 'true'
+    );
     let mapEl =
       e instanceof KeyboardEvent ? this._map.options.mapEl : this.options.mapEl;
     mapEl.toggleDebug();
@@ -754,6 +766,11 @@ export var ContextMenu = Handler.extend({
       el.setAttribute('aria-controls', 'mapml-copy-submenu');
     }
 
+    if (options.toggle) {
+      el.setAttribute('role', 'checkbox');
+      el.setAttribute('aria-checked', 'false');
+    }
+
     DomEvent.on(el, 'mouseover', this._onItemMouseOver, this)
       .on(el, 'mouseout', this._onItemMouseOut, this)
       .on(el, 'mousedown', DomEvent.stopPropagation)