fix(dashboards): use correct aria roles for widgets in none edit mode

groups dashboard widgets as list in none edit mode so screen reader can allow to jump between widgets without going through content using keyboard.

Author: chintankavathia

projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.html

@@ -1,3 +1,7 @@
-<div class="grid-stack">
+<div
+  class="grid-stack"
+  [attr.role]="editable() ? null : 'list'"
+  [attr.aria-label]="editable() ? null : (a11yWidgetsListLabel | translate)"
+>
   <ng-container #gridstackContainer />
 </div>

projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts

@@ -83,6 +83,18 @@ describe('SiGridstackWrapperComponent', () => {
 
       expect(fixture.debugElement.queryAll(By.css('si-widget-host')).length).toBe(2);
     });
+
+    it('should group widgets as a labeled list when not editable', () => {
+      fixture = TestBed.createComponent(HostComponent);
+      host = fixture.componentInstance;
+      host.widgetCatalogMap = new Map([[TEST_WIDGET.id, TEST_WIDGET]]);
+      host.widgets = [TEST_WIDGET_CONFIG_0, TEST_WIDGET_CONFIG_1];
+      fixture.detectChanges();
+
+      const gridStack = fixture.nativeElement.querySelector('.grid-stack');
+      expect(gridStack.getAttribute('role')).toBe('list');
+      expect(gridStack.getAttribute('aria-label')).toBe('Dashboard widgets');
+    });
   });
 
   describe('updating grid items', () => {

projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.ts

@@ -23,6 +23,7 @@ import {
   ViewContainerRef,
   WritableSignal
 } from '@angular/core';
+import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions } from 'gridstack';
 
 import { DEFAULT_GRIDSTACK_OPTIONS, GridConfig } from '../../model/gridstack.model';
@@ -42,6 +43,7 @@ export interface GridWrapperEvent {
 
 @Component({
   selector: 'si-gridstack-wrapper',
+  imports: [SiTranslatePipe],
   templateUrl: './si-gridstack-wrapper.component.html',
   styleUrl: './si-gridstack-wrapper.component.scss'
 })
@@ -90,6 +92,10 @@ export class SiGridstackWrapperComponent implements OnInit, OnChanges {
 
   readonly gridstackContainer = viewChild('gridstackContainer', { read: ViewContainerRef });
 
+  protected readonly a11yWidgetsListLabel = t(
+    () => $localize`:@@DASHBOARD.A11Y.WIDGETS_LIST:Dashboard widgets`
+  );
+
   private grid!: GridStack;
   private markedForRender: WidgetConfig[] = [];
   private readonly gridItems = signal<

projects/dashboards-ng/src/components/widget-host/si-widget-host.component.spec.ts

@@ -225,6 +225,20 @@ describe('SiWidgetHostComponent', () => {
       expect(cardEl.getAttribute('tabindex')).toBeNull();
     });
 
+    it('should expose the host as a labeled list item when not editable', () => {
+      fixture.componentRef.setInput('editable', false);
+      fixture.detectChanges();
+      expect(hostEl.getAttribute('role')).toBe('listitem');
+      expect(hostEl.getAttribute('aria-roledescription')).toBe('widget');
+      expect(hostEl.getAttribute('aria-label')).toBe('Test');
+    });
+
+    it('should not expose list item semantics on the host when editable', () => {
+      expect(hostEl.getAttribute('role')).toBeNull();
+      expect(hostEl.getAttribute('aria-roledescription')).toBeNull();
+      expect(hostEl.getAttribute('aria-label')).toBeNull();
+    });
+
     it('should activate keyboard mode on Enter', () => {
       cardEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
       expect(component.keyboardActive()).toBe(true);

projects/dashboards-ng/src/components/widget-host/si-widget-host.component.ts

@@ -55,7 +55,13 @@ import { setupWidgetInstance } from '../../widget-loader';
   templateUrl: './si-widget-host.component.html',
   styleUrl: './si-widget-host.component.scss',
   host: {
-    class: 'grid-stack-item'
+    class: 'grid-stack-item',
+    // In non-edit mode, expose each widget as a labeled list item so screen
+    // readers group the widgets and let users jump between them. In edit mode
+    // the inner card carries the interactive `application` role instead.
+    '[attr.role]': "editable() ? null : 'listitem'",
+    '[attr.aria-roledescription]': "editable() ? null : 'widget'",
+    '[attr.aria-label]': 'editable() || !widgetAriaLabel() ? null : widgetAriaLabel()'
   }
 })
 export class SiWidgetHostComponent implements OnInit, OnChanges {
@@ -127,6 +133,13 @@ export class SiWidgetHostComponent implements OnInit, OnChanges {
     () =>
       $localize`:@@DASHBOARD.WIDGET.A11Y.DESCRIPTION:Press Enter or Space to activate. Then use arrow keys to move, Shift+arrow keys to resize, Escape to exit.`
   );
+  protected readonly widgetAriaLabel = computed(() => {
+    const widgetHeading = this.widgetConfig().heading;
+    if (widgetHeading) {
+      return this.translateService.translateSync(widgetHeading);
+    }
+    return null;
+  });
 
   widgetInstance?: WidgetInstance;
   widgetRef?: ComponentRef<WidgetInstance>;

projects/dashboards-ng/translate/si-translatable-keys.interface.ts

@@ -3,6 +3,7 @@
 // Auto-generated file. Run 'npx update-translatable-keys' to update.
 
 export interface SiTranslatableKeys {
+  'DASHBOARD.A11Y.WIDGETS_LIST'?: string;
   'DASHBOARD.ADD_WIDGET'?: string;
   'DASHBOARD.CANCEL'?: string;
   'DASHBOARD.EDIT'?: string;