Accessibility

projects/ngx/cards/visited-service-card/visited-service-card.component.html

@@ -1,7 +1,9 @@
-<!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
 <div
   class="visited-card-wrapper"
+  role="button"
+  tabindex="0"
   (click)="cardClick.emit(path())"
+  (keydown.enter)="cardClick.emit(path())"
 >
   <span class="visited-card__type-badge">{{ serviceType() }}</span>
   <ui5-card class="visited-card">

projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.html

@@ -6,6 +6,7 @@
           class="card__remove"
           design="Default"
           icon="decline"
+          [accessibleName]="'Remove card: ' + (card().label || card().component)"
           (click)="removeCard.emit()"
         />
       </div>

projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html

@@ -15,7 +15,9 @@
       <div class="mfp-dashboard__toolbar">
         @if (editMode()) {
           <ui5-button
+            #addCardBtn
             id="add-card-btn"
+            [accessibleName]="addCardButton().text || addCardButton().tooltip || 'Add Card'"
             [design]="addCardButton().design"
             [icon]="addCardButton().icon"
             [tooltip]="addCardButton().tooltip"
@@ -25,6 +27,7 @@
         } @else if (compactToolbar()) {
           <ui5-button
             #menuBtn
+            accessibleName="Actions"
             design="Transparent"
             icon="menu2"
             tooltip="Actions"
@@ -61,6 +64,7 @@
         } @else {
           @for (action of customActions(); track action.action) {
             <ui5-button
+              [accessibleName]="action.text || action.tooltip || action.action"
               [design]="action.design ?? 'Default'"
               [endIcon]="action?.endIcon"
               [icon]="action.icon ?? ''"
@@ -73,6 +77,7 @@
           }
           @if (config().editable) {
             <ui5-button
+              [accessibleName]="editViewButton().text || editViewButton().tooltip || 'Edit View'"
               [design]="editViewButton().design"
               [icon]="editViewButton().icon"
               [tooltip]="editViewButton().tooltip"

projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts

@@ -8,10 +8,12 @@ import { DashboardSection } from '../section/dashboard-section.component';
 import {
   Component,
   ElementRef,
+  Injector,
   OnDestroy,
   OnInit,
   Type,
   ViewEncapsulation,
+  afterNextRender,
   computed,
   inject,
   input,
@@ -84,8 +86,10 @@ export class Dashboard implements OnInit, OnDestroy {
   private sectionsSnapshot: SectionConfig[] = [];
   private cardsSnapshot: CardConfig[] = [];
   private gridStackItems = viewChild.required<GridstackComponent>('grid');
+  private addCardBtn = viewChild<Button>('addCardBtn');
   private resizeObserver?: ResizeObserver;
   private readonly hostEl = inject(ElementRef<HTMLElement>);
+  private readonly injector = inject(Injector);
 
   protected gridOptions = computed(
     (): GridStackOptions => ({
@@ -168,6 +172,9 @@ export class Dashboard implements OnInit, OnDestroy {
     this.sectionsSnapshot = [...this.sections()];
     this.cardsSnapshot = [...this.cards()];
     this.editMode.set(true);
+    afterNextRender(() => {
+      this.addCardBtn()?.element.focus();
+    }, { injector: this.injector });
   }
 
   saveEdit(): void {

projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.html

@@ -7,6 +7,7 @@
       class="section__remove"
       design="Default"
       icon="decline"
+      [accessibleName]="'Remove section: ' + (section().title || section().id)"
       (click)="removeSection.emit()"
     />
   }

projects/ngx/declarative-ui/table-card/declarative-table-card.component.html

@@ -30,6 +30,7 @@
         <ui5-button
           class="card__search-btn"
           design="Transparent"
+          [accessibleName]="searchButtonConfig()?.tooltip ?? 'Search'"
           [icon]="searchButtonConfig()?.icon ?? 'search'"
           [tooltip]="searchButtonConfig()?.tooltip ?? 'Search'"
           (click)="toggleSearch()"
@@ -38,6 +39,7 @@
       @if (createFormConfig()) {
         <ui5-button
           class="card__create-btn"
+          [accessibleName]="createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'"
           [design]="createButtonConfig()?.design ?? 'Transparent'"
           [icon]="createButtonConfig()?.icon ?? 'add'"
           [tooltip]="createButtonConfig()?.tooltip"
@@ -71,6 +73,7 @@
 
 @if (createFormConfig(); as config) {
   <ui5-dialog
+    [accessibleName]="config.title ?? 'Create'"
     [open]="createDialogOpen()"
     (ui5BeforeClose)="createDialogOpen.set(false)"
   >
@@ -103,6 +106,7 @@
 
 @if (editFormConfig(); as config) {
   <ui5-dialog
+    [accessibleName]="config.title ?? 'Edit'"
     [open]="editDialogOpen()"
     (ui5BeforeClose)="editDialogOpen.set(false)"
   >
@@ -136,6 +140,7 @@
 
 @if (deleteConfirmationConfig(); as config) {
   <ui5-dialog
+    [accessibleName]="config.title ?? 'Confirm Delete'"
     [open]="deleteDialogOpen()"
     (ui5BeforeClose)="deleteDialogOpen.set(false)"
   >

projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts

@@ -241,6 +241,7 @@ export class DeclarativeTableCard<T extends GenericResource> {
             icon: 'edit',
             design: 'Transparent',
             action: 'edit',
+            tooltip: 'Edit',
             ...buttonSettings?.editButton,
           },
         },
@@ -258,6 +259,7 @@ export class DeclarativeTableCard<T extends GenericResource> {
             icon: 'decline',
             design: 'Transparent',
             action: 'delete',
+            tooltip: 'Delete',
             ...buttonSettings?.deleteButton,
           },
         },

projects/ngx/declarative-ui/value-cell/value-cell.component.html

@@ -5,6 +5,8 @@
       <mfp-secret-value [isVisible]="isVisible()" [testId]="testId() + '-secret'" [value]="value()" />
       <ui5-icon
         class="toggle-icon"
+        mode="Interactive"
+        [accessibleName]="isVisible() ? 'Hide value' : 'Show value'"
         [attr.test-id]="testId() + '-secret-toggle'"
         [name]="isVisible() ? 'hide' : 'show'"
         (click)="toggleVisibility($event)"
@@ -37,6 +39,7 @@
   } @else if (displayType === 'button') {
     @let buttonSettings = uiSettings()?.buttonSettings;
     <ui5-button
+      [accessibleName]="buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''"
       [design]="buttonSettings?.design"
       [endIcon]="buttonSettings?.endIcon"
       [icon]="buttonSettings?.icon"
@@ -58,8 +61,11 @@
 @if (withCopyButton()) {
   <ui5-icon
     class="toggle-icon"
-    name="copy"
+    mode="Interactive"
+    [accessibleName]="copySuccess() ? 'Copied' : 'Copy value'"
     [attr.test-id]="testId() + '-copy'"
+    [design]="copySuccess() ? 'Positive' : 'Default'"
+    [name]="copySuccess() ? 'accept' : 'copy'"
     (click)="copyValue($event)"
   />
 }

projects/ngx/declarative-ui/value-cell/value-cell.component.ts

@@ -62,6 +62,7 @@ export class ValueCell<T extends GenericResource, F extends FieldDefinition> {
   stringValue = computed(() => this.normalizeString(this.value()));
   tags = computed(() => this.normalizeTagsArray(this.value()));
   isVisible = signal(false);
+  copySuccess = signal(false);
 
   toggleVisibility(e: Event): void {
     e.stopPropagation();
@@ -113,7 +114,12 @@ export class ValueCell<T extends GenericResource, F extends FieldDefinition> {
 
   public copyValue(event: Event) {
     event.stopPropagation();
-    navigator.clipboard.writeText(this.value() || '');
+    navigator.clipboard.writeText(this.value() || '').then(() => {
+      this.copySuccess.set(true);
+      setTimeout(() => {
+        this.copySuccess.set(false);
+      }, 2000);
+    });
   }
 
   protected buttonClicked(event: MouseEvent) {