From 5914dc533ff8e404c0553a9eb0d8149eca8a36fd Mon Sep 17 00:00:00 2001
From: Oyku Yilmaz <12100596+oykuyilmaz@users.noreply.github.com>
Date: Mon, 29 Jan 2024 16:53:12 +0100
Subject: [PATCH] change colors for ace_snippet-marker (#5474)

* change colors for ace_snippet-marker

* fix screen reader reading snippets as their insert value

* remove border
---
 src/autocomplete/popup.js          | 2 +-
 src/theme/cloud_editor-css.js      | 4 ++++
 src/theme/cloud_editor_dark-css.js | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/autocomplete/popup.js b/src/autocomplete/popup.js
index 196617dc05c..1211922e57d 100644
--- a/src/autocomplete/popup.js
+++ b/src/autocomplete/popup.js
@@ -153,7 +153,7 @@ class AcePopup {
                 el.setAttribute("aria-activedescendant", ariaId);
                 selected.setAttribute("role", optionAriaRole);
                 selected.setAttribute("aria-roledescription", nls("item"));
-                selected.setAttribute("aria-label", popup.getData(row).value);
+                selected.setAttribute("aria-label", popup.getData(row).caption || popup.getData(row).value);
                 selected.setAttribute("aria-setsize", popup.data.length);
                 selected.setAttribute("aria-posinset", row + 1);
                 selected.setAttribute("aria-describedby", "doc-tooltip");
diff --git a/src/theme/cloud_editor-css.js b/src/theme/cloud_editor-css.js
index 5a1cfba743e..7a94a1ebde7 100644
--- a/src/theme/cloud_editor-css.js
+++ b/src/theme/cloud_editor-css.js
@@ -181,6 +181,10 @@ module.exports = `
 .ace-cloud_editor .ace_tooltip.ace_hover-tooltip:focus > div {
     outline: 1px solid #0073bb;
 }
+.ace-cloud_editor .ace_snippet-marker {
+    background-color: #CED6E0;
+    border: 0;
+}
 
 .ace-cloud_editor.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
     background-color: #f2f3f3;
diff --git a/src/theme/cloud_editor_dark-css.js b/src/theme/cloud_editor_dark-css.js
index c55a7ec384a..1f4558ca83f 100644
--- a/src/theme/cloud_editor_dark-css.js
+++ b/src/theme/cloud_editor_dark-css.js
@@ -184,6 +184,10 @@ module.exports = `
 .ace-cloud_editor_dark .ace_tooltip.ace_hover-tooltip:focus > div {
     outline: 1px solid #44b9d6;
 }
+.ace-cloud_editor_dark .ace_snippet-marker {
+    background-color: #434650;
+    border: 0;
+}
 
 .ace-cloud_editor_dark.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
     background-color: #272A30;