Refactor frontend components and enhance accessibility

.github/workflows/deploy_to_azure.yml

@@ -31,6 +31,12 @@ jobs:
           npm ci
           npm run build:prod --if-present
 
+      - name: Copy built shared package to backend node_modules
+        run: |
+          mkdir -p ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/node_modules/@webmud3
+          cp -r shared/dist ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/node_modules/@webmud3/shared
+          cp shared/package.json ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/node_modules/@webmud3/shared/
+
       - name: Install raw dependencies for backend
         run: |
           cd ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

frontend/setup-jest.ts

@@ -1 +1 @@
-import 'jest-preset-angular/setup-jest';
+// import 'jest-preset-angular/setup-jest';

frontend/src/app/core/mud/components/mud-client/mud-client.component.html

@@ -1,3 +1,16 @@
+<div class="sr-announcer" aria-live="assertive" #liveRegionRef></div>
+
+<div class="sr-input" role="status" aria-live="assertive" #inputRegionRef></div>
+
+<div
+  class="sr-input-committed"
+  role="region"
+  aria-live="polite"
+  #inputCommittedRegionRef
+></div>
+
+<div class="sr-history" role="region" aria-live="off" #historyRegionRef></div>
+
 <div class="mud-output" #hostRef></div>
 
 @if (!(isConnected$ | async)) {

frontend/src/app/core/mud/components/mud-client/mud-client.component.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  position: relative;
 
   .mud-output {
     flex: 1 1 0;
@@ -10,6 +11,46 @@
     overflow: hidden;
   }
 
+  .sr-announcer {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: pre-wrap;
+    border: 0;
+  }
+
+  .sr-history {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 40vh;
+    opacity: 0.001; /* quasi unsichtbar */
+    pointer-events: none; /* verhindert Maus-Klicks */
+    overflow: auto;
+    z-index: 0;
+  }
+
+  // .sr-input-committed {
+  //   position: absolute;
+  //   left: 0;
+  //   top: 0;
+  //   width: 100%;
+  //   height: 40vh;
+  //   opacity: 0.001; /* quasi unsichtbar */
+  //   pointer-events: none; /* verhindert Maus-Klicks */
+  //   overflow: auto;
+  //   z-index: 0;
+  // }
+
+  .sr-log-item {
+    white-space: pre-wrap;
+  }
+
   /* Optionales Styling */
   .disconnected-panel {
     flex: 0 0 auto;