From 8dcd1c5c616d6911a727d0fe291058331441e714 Mon Sep 17 00:00:00 2001
From: Ricardo M <lordrip@gmail.com>
Date: Wed, 29 Nov 2023 10:27:23 +0100
Subject: [PATCH] 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: https://github.com/KaotoIO/kaoto-next/issues/442
---
 .../ui/src/multiplying-architecture/KaotoEditor.scss | 12 ++++++++++++
 .../src/multiplying-architecture/KaotoEditorApp.tsx  |  3 ++-
 .../multiplying-architecture/KaotoEditorFactory.ts   |  4 ++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/multiplying-architecture/KaotoEditor.scss b/packages/ui/src/multiplying-architecture/KaotoEditor.scss
index e59fdb39c..07e714f32 100644
--- a/packages/ui/src/multiplying-architecture/KaotoEditor.scss
+++ b/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;
+}
diff --git a/packages/ui/src/multiplying-architecture/KaotoEditorApp.tsx b/packages/ui/src/multiplying-architecture/KaotoEditorApp.tsx
index 1c6c93733..0763d7b57 100644
--- a/packages/ui/src/multiplying-architecture/KaotoEditorApp.tsx
+++ b/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';
diff --git a/packages/ui/src/multiplying-architecture/KaotoEditorFactory.ts b/packages/ui/src/multiplying-architecture/KaotoEditorFactory.ts
index 08bcece50..c6af3d81a 100644
--- a/packages/ui/src/multiplying-architecture/KaotoEditorFactory.ts
+++ b/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));
   }
 }