From dd6bdfe8dae1b3c134fa7bc7b176b43fd294916e Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <hdieterichs@microsoft.com>
Date: Thu, 8 May 2025 18:19:05 +0200
Subject: [PATCH] Fixes https://github.com/microsoft/monaco-editor/issues/4799
 (#4895)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fixes https://github.com/microsoft/monaco-editor/issues/4799

* updates ubuntu version

* Update ci.yml

This change pins the GitHub Actions runner to Ubuntu 22.04 instead of the default ubuntu-latest (currently 24.04) because Playwright's install-deps script is not yet compatible with Ubuntu 24.04. Several packages it tries to install—such as libasound2, libffi7, and libx264-163—have been removed, renamed, or replaced in 24.04, causing the dependency installation to fail and the CI job to exit with an error. Ubuntu 22.04 remains fully supported by Playwright and ensures a stable, consistent environment for browser testing and dependency management until 24.04 compatibility is added upstream.

---------

Co-authored-by: Megan Rogge <megan.rogge@microsoft.com>
---
 .github/workflows/ci.yml                                  | 2 +-
 .../website/pages/playground/PlaygroundPageContent.tsx    | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1ba0bdc4..f2b14066 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,7 +5,7 @@ on: [push, pull_request]
 jobs:
   build:
     name: CI
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
 
diff --git a/website/src/website/pages/playground/PlaygroundPageContent.tsx b/website/src/website/pages/playground/PlaygroundPageContent.tsx
index 4681b0fb..4b163669 100644
--- a/website/src/website/pages/playground/PlaygroundPageContent.tsx
+++ b/website/src/website/pages/playground/PlaygroundPageContent.tsx
@@ -19,7 +19,6 @@ import { Preview } from "./Preview";
 import { SettingsDialog } from "./SettingsDialog";
 import { getNpmVersionsSync } from "./getNpmVersionsSync";
 import { PlaygroundExample, getPlaygroundExamples } from "./playgroundExamples";
-import { getDefaultSettings, toLoaderConfig } from "./SettingsModel";
 
 @hotComponent(module)
 @observer
@@ -85,6 +84,7 @@ export class PlaygroundPageContent extends React.Component<
 											}
 										>
 											<Editor
+												label="JavaScript Input"
 												language={"javascript"}
 												value={ref(model, "js")}
 											/>
@@ -94,6 +94,7 @@ export class PlaygroundPageContent extends React.Component<
 									<div>
 										<LabeledEditor label="HTML">
 											<Editor
+												label="HTML Input"
 												height={{
 													kind: "dynamic",
 													maxHeight: 200,
@@ -107,6 +108,7 @@ export class PlaygroundPageContent extends React.Component<
 									<div>
 										<LabeledEditor label="CSS">
 											<Editor
+												label="CSS Input"
 												height={{
 													kind: "dynamic",
 													maxHeight: 200,
@@ -480,6 +482,7 @@ class Editor extends React.Component<{
 	language: string;
 	value: IReference<string>;
 	height?: MonacoEditorHeight;
+	label: string;
 }> {
 	private editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
 	private disposables: monaco.IDisposable[] = [];
@@ -504,6 +507,9 @@ class Editor extends React.Component<{
 
 	initializeEditor(editor: monaco.editor.IStandaloneCodeEditor) {
 		this.editor = editor;
+		editor.updateOptions({
+			ariaLabel: this.props.label,
+		});
 		this.disposables.push(this.editor);
 		this.disposables.push(
 			this.editor.onDidChangeModelContent((e) => {