topbar anpassungen

web/js/components/app-async-flash.js

@@ -57,6 +57,10 @@ export function showAsyncFlash(type, message, timeout) {
   const notice = document.createElement('div');
   notice.className = 'notice';
   notice.setAttribute('data-variant', type);
+  const isAssertive = type === 'error' || type === 'warning';
+  notice.setAttribute('role', isAssertive ? 'alert' : 'status');
+  notice.setAttribute('aria-live', isAssertive ? 'assertive' : 'polite');
+  notice.setAttribute('aria-atomic', 'true');
 
   const messageSpan = document.createElement('span');
   messageSpan.textContent = message;

web/js/components/app-contrast-toggle.js

@@ -14,18 +14,24 @@ const setIcon = (button, contrast) => {
   icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half');
 };
 
+const setPressedState = (button, contrast) => {
+  button.setAttribute('aria-pressed', contrast === 'high' ? 'true' : 'false');
+};
+
 const initContrastToggle = () => {
   const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
   if (!button) {return;}
   const root = document.documentElement;
   const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
-  setIcon(button, getCurrent());
+  const current = getCurrent();
+  setIcon(button, current);
+  setPressedState(button, current);
 
   button.addEventListener('click', () => {
-    const current = getCurrent();
-    const next = current === 'high' ? 'normal' : 'high';
+    const next = getCurrent() === 'high' ? 'normal' : 'high';
     setContrast(next);
     setIcon(button, next);
+    setPressedState(button, next);
     try {
       window.localStorage.setItem(STORAGE_KEY, next);
     } catch (e) {

web/js/components/app-nav-history.js

@@ -4,14 +4,21 @@ const updateHistoryButtons = () => {
   if (!back && !forward) {return;}
 
   const hasHistory = window.history.length > 1;
+  const setDisabledState = (link, disabled) => {
+    link.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    link.classList.toggle('is-disabled', disabled);
+    if (disabled) {
+      link.setAttribute('tabindex', '-1');
+    } else {
+      link.removeAttribute('tabindex');
+    }
+  };
 
   if (back) {
-    back.setAttribute('aria-disabled', hasHistory ? 'false' : 'true');
-    back.classList.toggle('is-disabled', !hasHistory);
+    setDisabledState(back, !hasHistory);
   }
   if (forward) {
-    forward.setAttribute('aria-disabled', hasHistory ? 'false' : 'true');
-    forward.classList.toggle('is-disabled', !hasHistory);
+    setDisabledState(forward, !hasHistory);
   }
 };
 
@@ -44,8 +51,8 @@ const initHistoryButtons = () => {
 
   if (back) {
     back.addEventListener('click', (event) => {
+      event.preventDefault();
       if (window.history.length > 1) {
-        event.preventDefault();
         window.history.back();
       }
     });
@@ -53,8 +60,8 @@ const initHistoryButtons = () => {
 
   if (forward) {
     forward.addEventListener('click', (event) => {
+      event.preventDefault();
       if (window.history.length > 1) {
-        event.preventDefault();
         window.history.forward();
       }
     });

web/js/components/app-tenant-switcher.js

@@ -1,5 +1,16 @@
+import { showAsyncFlash } from './app-async-flash.js';
 import { warnOnce } from '../core/app-dom.js';
 
+const setPending = (link, pending) => {
+  link.style.pointerEvents = pending ? 'none' : '';
+  link.style.opacity = pending ? '0.5' : '';
+  if (pending) {
+    link.setAttribute('aria-busy', 'true');
+  } else {
+    link.removeAttribute('aria-busy');
+  }
+};
+
 const switchTenant = async (link) => {
   const tenantId = link.dataset.switchTenant;
   const csrfKey = link.dataset.csrfKey;
@@ -12,8 +23,7 @@ const switchTenant = async (link) => {
   }
 
   // Disable link during request
-  link.style.pointerEvents = 'none';
-  link.style.opacity = '0.5';
+  setPending(link, true);
 
   try {
     const body = new URLSearchParams({
@@ -37,21 +47,18 @@ const switchTenant = async (link) => {
         window.location.reload();
       } else {
         warnOnce('FETCH_FAILED', 'Tenant switch failed', { module: 'tenant-switcher', error: data.error });
-        alert(errorMessage);
-        link.style.pointerEvents = '';
-        link.style.opacity = '';
+        showAsyncFlash('error', errorMessage);
+        setPending(link, false);
       }
     } else {
       warnOnce('FETCH_FAILED', `Tenant switch server error: ${response.status}`, { module: 'tenant-switcher' });
-      alert(errorMessage);
-      link.style.pointerEvents = '';
-      link.style.opacity = '';
+      showAsyncFlash('error', errorMessage);
+      setPending(link, false);
     }
   } catch (error) {
     warnOnce('FETCH_ERROR', 'Tenant switch network error', { module: 'tenant-switcher', error });
-    alert(errorMessage);
-    link.style.pointerEvents = '';
-    link.style.opacity = '';
+    showAsyncFlash('error', errorMessage);
+    setPending(link, false);
   }
 };