fix(vscode): Hide a11y labels

Currently, the a11y labels are visible despite VSCode not being a screen reader.

This happens because some @patternfly css classes are not being loaded when building
for VSCode.

The workaround is to provide the missing class into the KaotoEditor styles.

Fixes: #442

packages/ui/src/multiplying-architecture/KaotoEditor.scss

@@ -7,3 +7,15 @@
     flex-grow: 1;
   }
 }
+
+// Provide a screen reader class to hide elements
+// This is a workaround since this class should be provided by the @patternfly/react-core package
+.pf-v5-u-screen-reader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

packages/ui/src/multiplying-architecture/KaotoEditorApp.tsx

@@ -1,3 +1,4 @@
+import '@patternfly/react-core/dist/styles/base.css'; // This import needs to be first
 import {
   Editor,
   EditorApi,
@@ -12,7 +13,7 @@ import { EntitiesProvider } from '../providers/entities.provider';
 import { SourceCodeProvider } from '../providers/source-code.provider';
 import { KaotoEditor } from './KaotoEditor';
 
-export class KaotoEditorView implements Editor {
+export class KaotoEditorApp implements Editor {
   private readonly editorRef: RefObject<EditorApi>;
   af_isReact = true;
   af_componentId = 'kaoto-editor';

packages/ui/src/multiplying-architecture/KaotoEditorFactory.ts

@@ -1,4 +1,4 @@
-import { KaotoEditorView } from './KaotoEditorApp';
+import { KaotoEditorApp } from './KaotoEditorApp';
 import {
   Editor,
   EditorFactory,
@@ -12,6 +12,6 @@ export class KaotoEditorFactory implements EditorFactory<Editor, KogitoEditorCha
     envelopeContext: KogitoEditorEnvelopeContextType<KogitoEditorChannelApi>,
     initArgs: EditorInitArgs,
   ): Promise<Editor> {
-    return Promise.resolve(new KaotoEditorView(envelopeContext, initArgs));
+    return Promise.resolve(new KaotoEditorApp(envelopeContext, initArgs));
   }
 }