Fixes https://github.com/microsoft/monaco-editor/issues/4799 (#4895)

* 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

@@ -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
 

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) => {