A11y improvements (#1290)

* Expanded left panel.

* Fix panel label.

* a11y improvements

* Fix test

frontend/src/app/features/apps/pages/app.component.html

@@ -46,14 +46,14 @@
                 <i class="icon-dots"></i>
             </button>
             <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
-                <a
+                <button
                     class="dropdown-item dropdown-item-delete"
                     confirmRememberKey="leaveApp"
                     confirmText="i18n:apps.leaveConfirmText"
                     confirmTitle="i18n:apps.leaveConfirmTitle"
                     (sqxConfirmClick)="leave.emit(app)">
                     {{ "apps.leave" | sqxTranslate }}
-                </a>
+                </button>
             </sqx-dropdown-menu>
         }
     </div>

frontend/src/app/features/apps/pages/onboarding-dialog.component.html

@@ -3,7 +3,7 @@
         <div class="squid d-flex align-items-center justify-content-center"><img src="./images/squid.svg" /></div>
     </ng-container>
     <ng-container content>
-        <a class="header-right modal-close force" (click)="cancel()">{{ "tour.skip" | sqxTranslate }}</a>
+        <button class="header-right modal-close btn-inline-link" (click)="cancel()">{{ "tour.skip" | sqxTranslate }}</button>
         @if (step === 0) {
             <div class="onboarding-step">
                 <img class="header-left" animate.enter="fade-in" animate.leave="fade-out" src="./images/logo-white-small.png" />

frontend/src/app/features/apps/pages/team.component.html

@@ -19,14 +19,14 @@
                 <i class="icon-dots"></i>
             </button>
             <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
-                <a
+                <button
                     class="dropdown-item dropdown-item-delete"
                     confirmRememberKey="leaveApp"
                     confirmText="i18n:teams.leaveConfirmText"
                     confirmTitle="i18n:teams.leaveConfirmTitle"
                     (sqxConfirmClick)="leave.emit(team)">
                     {{ "teams.leave" | sqxTranslate }}
-                </a>
+                </button>
             </sqx-dropdown-menu>
         </div>
     </div>

frontend/src/app/features/assets/pages/asset-tags.component.html

@@ -1,11 +1,11 @@
 <div class="nav nav-light flex-column">
     <div class="nav-item">
-        <a class="nav-link" [class.active]="isEmpty()" (click)="tagsReset.emit()"> {{ "common.tagsAll" | sqxTranslate }} </a>
+        <button class="nav-link" [class.active]="isEmpty()" (click)="tagsReset.emit()">{{ "common.tagsAll" | sqxTranslate }}</button>
     </div>
 
     @for (tag of tags; track tag.name) {
         <div class="nav-item">
-            <a class="nav-link" [class.active]="isSelected(tag)" (click)="toggle.emit(tag.name)">
+            <button class="nav-link" [class.active]="isSelected(tag)" (click)="toggle.emit(tag.name)">
                 <div class="row g-0">
                     <div class="col">
                         <span class="truncate">{{ tag.name }}</span>
@@ -15,13 +15,13 @@
                         <div class="badge badge-secondary rounded-pill">{{ tag.count }}</div>
 
                         @if (canRename) {
-                            <a class="btn-sm btn-text-secondary btn-rename" (click)="renameTag(tag)" sqxStopClick>
+                            <button class="btn-sm btn-text-secondary btn-rename" (click)="renameTag(tag)" sqxStopClick>
                                 <i class="icon-pencil"></i>
-                            </a>
+                            </button>
                         }
                     </div>
                 </div>
-            </a>
+            </button>
         </div>
     }
 </div>

frontend/src/app/features/content/pages/content/content-event.component.html

@@ -14,8 +14,8 @@
         <div class="event-created">{{ event.created | sqxFromNow }}</div>
 
         @if (canLoadOrCompare) {
-            <a class="event-load force" (click)="dataLoad.emit()">{{ "contents.loadContent" | sqxTranslate }}</a> &middot;
-            <a class="event-load force" (click)="dataCompare.emit()">{{ "contents.versionCompare" | sqxTranslate }}</a>
+            <button class="event-load btn-inline-link" (click)="dataLoad.emit()">{{ "contents.loadContent" | sqxTranslate }}</button> &middot;
+            <button class="event-load btn-inline-link" (click)="dataCompare.emit()">{{ "contents.versionCompare" | sqxTranslate }}</button>
         }
     </div>
 </div>

frontend/src/app/features/content/pages/content/content-history-page.component.html

@@ -36,15 +36,15 @@
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdownNew; closeAlways: true">
                         @if (content.statusUpdates.length > 0) {
                             @for (info of content.statusUpdates; track info) {
-                                <a class="dropdown-item" (click)="changeStatus(info.status)">
+                                <button class="dropdown-item" (click)="changeStatus(info.status)">
                                     {{ "common.statusChangeTo" | sqxTranslate }}
                                     <i class="icon-circle icon-sm" [style.color]="info.color"></i> {{ info.status }}
-                                </a>
+                                </button>
                             }
 
                             <div class="dropdown-divider"></div>
                         }
-                        <a
+                        <button
                             class="dropdown-item dropdown-item-delete"
                             [class.disabled]="!content.canDraftDelete"
                             confirmRememberKey="deleteDraft"
@@ -52,9 +52,9 @@
                             confirmTitle="i18n:contents.deleteConfirmTitle"
                             (sqxConfirmClick)="deleteDraft()">
                             {{ "contents.versionDelete" | sqxTranslate }}
-                        </a>
+                        </button>
                         <div class="dropdown-divider"></div>
-                        <a
+                        <button
                             class="dropdown-item dropdown-item-delete"
                             [class.disabled]="!content.canDelete"
                             confirmRememberKey="deleteContent"
@@ -62,7 +62,7 @@
                             confirmTitle="i18n:contents.deleteConfirmTitle"
                             (sqxConfirmClick)="delete()">
                             {{ "common.delete" | sqxTranslate }}
-                        </a>
+                        </button>
                     </sqx-dropdown-menu>
                 }
             </div>
@@ -88,15 +88,15 @@
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                         @if (content.statusUpdates.length > 0) {
                             @for (info of content.statusUpdates; track info) {
-                                <a class="dropdown-item" (click)="changeStatus(info.status)">
+                                <button class="dropdown-item" (click)="changeStatus(info.status)">
                                     {{ "common.statusChangeTo" | sqxTranslate }}
                                     <sqx-content-status layout="text" small="true" [status]="info.status" [statusColor]="info.color" />
-                                </a>
+                                </button>
                             }
 
                             <div class="dropdown-divider"></div>
                         }
-                        <a
+                        <button
                             class="dropdown-item dropdown-item-delete"
                             [class.disabled]="!content.canCancelStatus"
                             confirmRememberKey="cancelStatus"
@@ -104,9 +104,9 @@
                             confirmTitle="i18n:contents.cancelStatusConfirmTitle"
                             (sqxConfirmClick)="cancelStatus()">
                             {{ "contents.cancelStatus" | sqxTranslate }}
-                        </a>
+                        </button>
                         <div class="dropdown-divider"></div>
-                        <a
+                        <button
                             class="dropdown-item dropdown-item-delete"
                             [class.disabled]="!content.canDelete"
                             confirmRememberKey="deleteContent"
@@ -114,7 +114,7 @@
                             confirmTitle="i18n:contents.deleteConfirmTitle"
                             (sqxConfirmClick)="delete()">
                             {{ "common.delete" | sqxTranslate }}
-                        </a>
+                        </button>
                     </sqx-dropdown-menu>
                 </div>
             } @else {

frontend/src/app/features/content/pages/content/content-page.component.html

@@ -4,9 +4,9 @@
         <ng-container title>
             <div class="d-flex align-items-center">
                 @if (schema.type !== "Singleton") {
-                    <a class="btn btn-text-secondary" aria-labelledby="content-back" (click)="back()">
+                    <button class="btn btn-text-secondary" aria-labelledby="content-back" (click)="back()">
                         <span id="content-back" hidden>{{ "common.back" | sqxTranslate }}</span> <i class="icon-angle-left"></i>
-                    </a>
+                    </button>
                 }
 
                 @if (content) {
@@ -75,21 +75,20 @@
                         </button>
                         <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                             @if (content.canClone) {
-                                <a (click)="clone()"
-                                    class="dropdown-item">
+                                <button class="dropdown-item" (click)="clone()">
                                     {{ "common.clone" | sqxTranslate }}
-                                </a>
+                                </button>
                             }
 
                             @if (content.canDelete) {
-                                <a
+                                <button
                                     class="dropdown-item dropdown-item-delete"
                                     confirmRememberKey="deleteContent"
                                     confirmText="i18n:contents.deleteConfirmText"
                                     confirmTitle="i18n:contents.deleteConfirmTitle"
                                     (sqxConfirmClick)="delete()">
                                     {{ "common.delete" | sqxTranslate }}
-                                </a>
+                                </button>
                             }
                         </sqx-dropdown-menu>
                     }
@@ -134,8 +133,8 @@
                                     scrollY="true"
                                     [sqxAnchoredTo]="buttonSave"
                                     *sqxModal="saveOnlyDropdown; closeAlways: true">
-                                    <a class="dropdown-item" (click)="saveAsDraft('Add')"> {{ "common.saveAdd" | sqxTranslate }} </a>
-                                    <a class="dropdown-item" (click)="saveAsDraft('Close')"> {{ "common.saveClose" | sqxTranslate }} </a>
+                                    <button class="dropdown-item" (click)="saveAsDraft('Add')">{{ "common.saveAdd" | sqxTranslate }}</button>
+                                    <button class="dropdown-item" (click)="saveAsDraft('Close')">{{ "common.saveClose" | sqxTranslate }}</button>
                                 </sqx-dropdown-menu>
                             </div>
                         }
@@ -158,12 +157,12 @@
                                     scrollY="true"
                                     [sqxAnchoredTo]="buttonSave"
                                     *sqxModal="savePublishDropdown; closeAlways: true">
-                                    <a class="dropdown-item" (click)="saveAndPublish('Add')">
+                                    <button class="dropdown-item" (click)="saveAndPublish('Add')">
                                         {{ "contents.saveAndPublishAdd" | sqxTranslate }}
-                                    </a>
-                                    <a class="dropdown-item" (click)="saveAndPublish('Close')">
+                                    </button>
+                                    <button class="dropdown-item" (click)="saveAndPublish('Close')">
                                         {{ "contents.saveAndPublishClose" | sqxTranslate }}
-                                    </a>
+                                    </button>
                                 </sqx-dropdown-menu>
                             </div>
                         }

frontend/src/app/features/content/pages/content/editor/content-editor.component.html

@@ -8,7 +8,7 @@
         @if (contentVersion) {
             <div class="alert alert-danger">
                 <div class="float-end">
-                    <a (click)="loadLatest.emit()">{{ "contents.viewLatest" | sqxTranslate }}</a>
+                    <button (click)="loadLatest.emit()">{{ "contents.viewLatest" | sqxTranslate }}</button>
                 </div>
 
                 @if (isDeleted) {

frontend/src/app/features/content/pages/content/inspecting/content-inspection.component.html

@@ -3,21 +3,21 @@
     @if (mode | async; as currentMode) {
         <ul class="nav nav-tabs2">
             <li class="nav-item">
-                <a class="nav-link" [class.active]="currentMode === 'Content'" (click)="setMode('Content')">
+                <button class="nav-link" [class.active]="currentMode === 'Content'" (click)="setMode('Content')">
                     {{ "contents.inspectContent" | sqxTranslate }}
-                </a>
+                </button>
             </li>
 
             <li class="nav-item">
-                <a class="nav-link" [class.active]="currentMode === 'Data'" (click)="setMode('Data')">
+                <button class="nav-link" [class.active]="currentMode === 'Data'" (click)="setMode('Data')">
                     {{ "contents.inspectData" | sqxTranslate }}
-                </a>
+                </button>
             </li>
 
             <li class="nav-item">
-                <a class="nav-link" [class.active]="currentMode === 'FlatData'" (click)="setMode('FlatData')">
+                <button class="nav-link" [class.active]="currentMode === 'FlatData'" (click)="setMode('FlatData')">
                     {{ "contents.inspectFlatData" | sqxTranslate }}
-                </a>
+                </button>
             </li>
         </ul>
     }

frontend/src/app/features/content/shared/forms/array-editor.component.html

@@ -90,7 +90,7 @@
                     </button>
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonSelect" *sqxModal="schemasDropdown; closeAlways: true">
                         @for (schema of schemasList; track schema) {
-                            <a class="dropdown-item" (click)="addComponent(schema)"> {{ schema.displayName }} </a>
+                            <button class="dropdown-item" (click)="addComponent(schema)">{{ schema.displayName }}</button>
                         }
                     </sqx-dropdown-menu>
                 }

frontend/src/app/features/content/shared/forms/assets-editor.component.html

@@ -18,7 +18,7 @@
 
     @if (hasChatBot) {
         <div class="col-auto">
-            <button class="btn btn-outline-secondary force no-focus-shadow" (click)="chatDialog.show()" tabindex="-1" type="button">AI</button>
+            <button class="btn btn-outline-secondary no-focus-shadow" (click)="chatDialog.show()" tabindex="-1" type="button">AI</button>
         </div>
     }
 

frontend/src/app/features/content/shared/forms/component.component.html

@@ -28,7 +28,7 @@
             </button>
             <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonSelect" *sqxModal="schemasDropdown; closeAlways: true">
                 @for (schema of schemasList; track schema) {
-                    <a class="dropdown-item" (click)="setSchema(schema)"> {{ schema.displayName }} </a>
+                    <button class="dropdown-item" (click)="setSchema(schema)">{{ schema.displayName }}</button>
                 }
             </sqx-dropdown-menu>
         }

frontend/src/app/features/content/shared/forms/field-languages.component.html

@@ -1,7 +1,7 @@
 <div class="d-flex gap-1">
     @if (formModel.field.isLocalizable && languages.length > 1) {
         @if (!formModel.field.properties.isComplexUI) {
-            <button class="btn btn-sm btn-outline-secondary force no-focus-shadow" (click)="toggleShowAllControls()" type="button">
+            <button class="btn btn-sm btn-outline-secondary no-focus-shadow" (click)="toggleShowAllControls()" type="button">
                 @if (showAllControls) {
                     <span>{{ "contents.languageModeSingle" | sqxTranslate }}</span>
                 } @else {

frontend/src/app/features/content/shared/list/content.component.html

@@ -22,26 +22,26 @@
         <sqx-dropdown-menu position="bottom-start" scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
             <a class="dropdown-item" [routerLink]="link" sqxExternalLink target="_blank"> {{ "common.editInNewTab" | sqxTranslate }} </a>
             @for (info of content.statusUpdates; track info) {
-                <a class="dropdown-item" (click)="statusChange.emit(info.status)">
+                <button class="dropdown-item" (click)="statusChange.emit(info.status)">
                     {{ "common.statusChangeTo" | sqxTranslate }}
                     <sqx-content-status layout="text" small="true" [status]="info.status" [statusColor]="info.color" />
-                </a>
+                </button>
             }
 
             @if (cloneable) {
-                <a class="dropdown-item" (click)="clone.emit(); dropdown.hide()"> {{ "common.clone" | sqxTranslate }} </a>
+                <button class="dropdown-item" (click)="clone.emit(); dropdown.hide()">{{ "common.clone" | sqxTranslate }}</button>
             }
 
             <div class="dropdown-divider"></div>
-            <a
+            <button
                 class="dropdown-item dropdown-item-delete"
                 [class.disabled]="!content.canDelete"
                 confirmRememberKey="deleteContent"
                 confirmText="i18n:contents.deleteConfirmText"
                 confirmTitle="i18n:contents.deleteConfirmTitle"
-                (sqxConfirmClick)="delete.emit()"> 
+                (sqxConfirmClick)="delete.emit()">
                 {{ "common.delete" | sqxTranslate }}
-            </a>
+            </button>
         </sqx-dropdown-menu>
     </td>
 

frontend/src/app/features/content/shared/preview-button.component.html

@@ -9,7 +9,7 @@
                 <button class="btn btn-secondary dropdown-toggle" (click)="dropdown.toggle()" type="button"></button>
                 <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonGroup" *sqxModal="dropdown; closeAlways: true">
                     @for (name of snapshot.previewNamesMore; track name) {
-                        <a class="dropdown-item" (click)="follow(name)">{{ name }}</a>
+                        <button class="dropdown-item" (click)="follow(name)">{{ name }}</button>
                     }
                 </sqx-dropdown-menu>
             </div>

frontend/src/app/features/dashboard/pages/dashboard-config.component.html

@@ -24,10 +24,10 @@
         }
 
         <div class="dropdown-divider"></div>
-        <a class="dropdown-item" (click)="startExpertMode()"> {{ "common.expertMode" | sqxTranslate }} </a>
-        <a class="dropdown-item" (click)="saveConfig()"> {{ "common.save" | sqxTranslate }} </a>
+        <button class="dropdown-item" (click)="startExpertMode()"> {{ "common.expertMode" | sqxTranslate }} </button>
+        <button class="dropdown-item" (click)="saveConfig()"> {{ "common.save" | sqxTranslate }} </button>
         <div class="dropdown-divider"></div>
-        <a
+        <button
             class="dropdown-item dropdown-item-delete"
             (beforeClick)="dropdownModal.hide()"
             confirmRememberKey="resetConfig"
@@ -35,7 +35,7 @@
             confirmTitle="i18n:dashboard.resetConfigConfirmTitle"
             (sqxConfirmClick)="resetConfig()">
             {{ "common.reset" | sqxTranslate }}
-        </a>
+        </button>
     </sqx-dropdown-menu>
     <sqx-modal-dialog (dialogClose)="expertDialog.hide()" fullHeight="true" size="lg" *sqxModal="expertDialog">
         <ng-container title> {{ "dashboard.editConfig" | sqxTranslate }} </ng-container>

frontend/src/app/features/rules/pages/rule/rule-page.component.html

@@ -2,9 +2,9 @@
 <sqx-layout layout="main" overflow="true" padding="true" white="true">
     <ng-container title>
         <div class="d-flex align-items-center">
-            <a class="btn btn-text-secondary" attr.aria-label="{{ 'common.back' | sqxTranslate }}" (click)="back()">
+            <button class="btn btn-text-secondary" attr.aria-label="{{ 'common.back' | sqxTranslate }}" (click)="back()">
                 <i class="icon-angle-left"></i>
-            </a>
+            </button>
             <h3 class="title">{{ "common.rule" | sqxTranslate }}</h3>
         </div>
     </ng-container>

frontend/src/app/features/rules/pages/rules/rule.component.html

@@ -22,54 +22,54 @@
                 </button>
                 <sqx-dropdown-menu position="bottom-end" scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                     @if (rule.canUpdate) {
-                        <a class="dropdown-item" [routerLink]="rule.id"> {{ "common.edit" | sqxTranslate }} </a>
+                        <button class="dropdown-item" [routerLink]="rule.id">{{ "common.edit" | sqxTranslate }}</button>
                     }
 
                     @if (rule.canEnable) {
-                        <a class="dropdown-item" (click)="enable()"> {{ "common.enable" | sqxTranslate }} </a>
+                        <button class="dropdown-item" (click)="enable()">{{ "common.enable" | sqxTranslate }}</button>
                     }
 
                     @if (rule.canDisable) {
-                        <a class="dropdown-item" (click)="disable()"> {{ "common.disable" | sqxTranslate }} </a>
+                        <button class="dropdown-item" (click)="disable()">{{ "common.disable" | sqxTranslate }}</button>
                     }
 
                     <div class="dropdown-divider"></div>
 
                     @if (rule.canRun || rule.canRunFromSnapshots) {
                         @if (rule.canRun) {
-                            <a
+                            <button
                                 class="dropdown-item"
                                 confirmRememberKey="runRule"
                                 confirmText="i18n:rules.runRuleConfirmText"
                                 confirmTitle="i18n:rules.runRuleConfirmTitle"
                                 (sqxConfirmClick)="run()">
                                 {{ "rules.run" | sqxTranslate }}
-                            </a>
+                            </button>
                         }
 
                         @if (rule.canRunFromSnapshots) {
-                            <a
+                            <button
                                 class="dropdown-item"
                                 confirmRememberKey="runRuleFromSnapshots"
                                 confirmText="i18n:rules.runRuleConfirmText"
                                 confirmTitle="i18n:rules.runRuleConfirmTitle"
                                 (sqxConfirmClick)="runFromSnapshots()">
                                 {{ "rules.runFromSnapshots" | sqxTranslate }}
-                            </a>
+                            </button>
                         }
 
                         <div class="dropdown-divider"></div>
                     }
 
                     @if (rule.canDelete) {
-                        <a
+                        <button
                             class="dropdown-item dropdown-item-delete"
                             confirmRememberKey="deleteRule"
                             confirmText="i18n:rules.deleteConfirmText"
                             confirmTitle="i18n:rules.deleteConfirmTitle"
                             (sqxConfirmClick)="delete()">
                             {{ "common.delete" | sqxTranslate }}
-                        </a>
+                        </button>
                     }
                 </sqx-dropdown-menu>
             </div>

frontend/src/app/features/rules/pages/rules/rules-page.component.html

@@ -15,7 +15,7 @@
             @if (rulesState.runningRule | async; as runningRule) {
                 <div class="alert alert-danger d-flex justify-content-between align-items-center p-2 ps-4 mb-4">
                     {{ "rules.runningRule" | sqxTranslate: { name: runningRule.name || "Unnamed Rule" } }}
-                    <a class="btn" (click)="cancelRun()">{{ "common.cancel" | sqxTranslate }}</a>
+                    <button class="btn" (click)="cancelRun()">{{ "common.cancel" | sqxTranslate }}</button>
                 </div>
             }
 

frontend/src/app/features/rules/shared/rule-element.component.html

@@ -8,7 +8,7 @@
             [title]="label || elementInfo.title">
             <sqx-rule-icon [elementInfo]="elementInfo" [size]="size" />
             @if (showRemove) {
-                <a
+                <button
                     class="btn btn-sm rounded-full btn-outline-danger"
                     confirmText="i18n:rules.removeElementText"
                     confirmTitle="i18n:rules.removeElementTitle"
@@ -16,7 +16,7 @@
                     sqxStopClick=""
                     type="button">
                     <i class="icon-bin2"></i>
-                </a>
+                </button>
             }
         </div>
     </div>

frontend/src/app/features/rules/shared/state-step.component.html

@@ -21,20 +21,20 @@
         <ul class="nav nav-tabs2 mt-2">
             @if (stepInfo.properties.length > 0) {
                 <li class="nav-item">
-                    <a class="nav-link" [class.active]="attemptIndex === -1" (click)="selectAttempt(-1)">
+                    <button class="nav-link" [class.active]="attemptIndex === -1" (click)="selectAttempt(-1)">
                         {{ "common.properties" | sqxTranslate }}
-                    </a>
+                    </button>
                 </li>
             }
             @if (state) {
                 @for (attempt of state.attempts; let i = $index; track i) {
                     <li class="nav-item">
-                        <a class="nav-link" [class.active]="attemptIndex === i" (click)="selectAttempt(i)">
+                        <button class="nav-link" [class.active]="attemptIndex === i" (click)="selectAttempt(i)">
                             @if ($first) {
                                 {{ "rules.ruleEvents.attempt" | sqxTranslate }}&nbsp;
                             }
                             #{{ i + 1 }}
-                        </a>
+                        </button>
                     </li>
                 }
             }

frontend/src/app/features/schemas/pages/schema/fields/field-wizard.component.html

@@ -86,8 +86,8 @@
                         <i class="icon-angle-down"></i>
                     </button>
                     <sqx-dropdown-menu position="top-end" scrollY="true" [sqxAnchoredTo]="buttonSave" *sqxModal="addFieldModal; closeAlways: true">
-                        <a class="dropdown-item" (click)="addField('Add')"> {{ "schemas.addFieldAndCreate" | sqxTranslate }} </a>
-                        <a class="dropdown-item" (click)="addField('Edit')"> {{ "schemas.addFieldAndEdit" | sqxTranslate }} </a>
+                        <button class="dropdown-item" (click)="addField('Add')">{{ "schemas.addFieldAndCreate" | sqxTranslate }}</button>
+                        <button class="dropdown-item" (click)="addField('Edit')">{{ "schemas.addFieldAndEdit" | sqxTranslate }}</button>
                     </sqx-dropdown-menu>
                 </div>
             </div>
@@ -108,7 +108,7 @@
                         <i class="icon-angle-down"></i>
                     </button>
                     <sqx-dropdown-menu position="bottom-end" scrollY="true" [sqxAnchoredTo]="buttonSave" *sqxModal="addFieldModal; closeAlways: true">
-                        <a class="dropdown-item" (click)="save('Add')"> {{ "schemas.saveFieldAndNew" | sqxTranslate }} </a>
+                        <button class="dropdown-item" (click)="save('Add')">{{ "schemas.saveFieldAndNew" | sqxTranslate }}</button>
                     </sqx-dropdown-menu>
                 </div>
             </div>

frontend/src/app/features/schemas/pages/schema/fields/field.component.html

@@ -56,36 +56,36 @@
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                         @if (field.properties.isContentField) {
                             @if (field.canEnable) {
-                                <a class="dropdown-item" (click)="enableField()"> {{ "schemas.field.enable" | sqxTranslate }} </a>
+                                <button class="dropdown-item" (click)="enableField()">{{ "schemas.field.enable" | sqxTranslate }}</button>
                             }
 
                             @if (field.canDisable) {
-                                <a class="dropdown-item" (click)="disableField()"> {{ "schemas.field.disable" | sqxTranslate }} </a>
+                                <button class="dropdown-item" (click)="disableField()">{{ "schemas.field.disable" | sqxTranslate }}</button>
                             }
 
                             @if (field.canHide) {
-                                <a class="dropdown-item" (click)="hideField()"> {{ "schemas.field.hide" | sqxTranslate }} </a>
+                                <button class="dropdown-item" (click)="hideField()">{{ "schemas.field.hide" | sqxTranslate }}</button>
                             }
 
                             @if (field.canShow) {
-                                <a class="dropdown-item" (click)="showField()"> {{ "schemas.field.show" | sqxTranslate }} </a>
+                                <button class="dropdown-item" (click)="showField()">{{ "schemas.field.show" | sqxTranslate }}</button>
                             }
                         }
 
                         @if (field.canLock) {
                             <div class="dropdown-divider"></div>
-                            <a
+                            <button
                                 class="dropdown-item"
                                 confirmRememberKey="lockField"
                                 confirmText="i18n:schemas.field.lockConfirmText"
                                 confirmTitle="i18n:schemas.field.lockConfirmTitle"
                                 (sqxConfirmClick)="lockField()">
                                 {{ "schemas.field.lock" | sqxTranslate }}
-                            </a>
+                            </button>
                         }
                         <ng-container>
                             <div class="dropdown-divider"></div>
-                            <a
+                            <button
                                 class="dropdown-item dropdown-item-delete"
                                 [class.disabled]="!field.canDelete"
                                 confirmRememberKey="deleteField"
@@ -93,7 +93,7 @@
                                 confirmTitle="i18n:schemas.field.deleteConfirmTitle"
                                 (sqxConfirmClick)="deleteField()">
                                 {{ "common.delete" | sqxTranslate }}
-                            </a>
+                            </button>
                         </ng-container>
                     </sqx-dropdown-menu>
                 </div>

frontend/src/app/features/schemas/pages/schema/fields/forms/field-form.component.html

@@ -1,25 +1,25 @@
 <div class="table-items-row-details-tabs clearfix">
     <ul class="nav nav-tabs2">
         <li class="nav-item">
-            <a class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
                 {{ "schemas.field.tabCommon" | sqxTranslate }}
-            </a>
+            </button>
         </li>
 
         <li class="nav-item" [class.hidden]="!field.properties.isContentField">
-            <a class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+            <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
                 {{ "schemas.field.tabValidation" | sqxTranslate }}
-            </a>
+            </button>
         </li>
 
         <li class="nav-item" [class.hidden]="!field.properties.isContentField">
-            <a class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
+            <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
                 {{ "schemas.field.tabEditing" | sqxTranslate }}
-            </a>
+            </button>
         </li>
 
         <li class="nav-item" [class.hidden]="field.properties.fieldType !== 'Json'">
-            <a class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)"> {{ "schemas.field.tabMore" | sqxTranslate }} </a>
+            <button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)">{{ "schemas.field.tabMore" | sqxTranslate }}</button>
         </li>
     </ul>
 

frontend/src/app/features/schemas/pages/schema/schema-page.component.html

@@ -76,11 +76,11 @@
             <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="editOptionsDropdown; closeAlways: true">
                 @if (schemasState.canCreate) {
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" (click)="cloneSchema()"> {{ "common.clone" | sqxTranslate }} </a>
+                    <button class="dropdown-item" (click)="cloneSchema()">{{ "common.clone" | sqxTranslate }}</button>
                 }
                 <ng-container>
                     <div class="dropdown-divider"></div>
-                    <a
+                    <button
                         class="dropdown-item dropdown-item-delete"
                         [class.disabled]="!schema.canDelete"
                         confirmRememberKey="deleteSchema"
@@ -88,7 +88,7 @@
                         confirmTitle="i18n:schemas.deleteConfirmTitle"
                         (sqxConfirmClick)="deleteSchema()">
                         {{ "common.delete" | sqxTranslate }}
-                    </a>
+                    </button>
                 </ng-container>
             </sqx-dropdown-menu>
         </ng-container>

frontend/src/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html

@@ -3,9 +3,9 @@
         <ul class="nav nav-tabs2">
             @for (script of editForm.form.controls | sqxKeys; track script) {
                 <li class="nav-item">
-                    <a class="nav-link" [class.active]="schemaScript === script" (click)="selectField(script)">
+                    <button class="nav-link" [class.active]="schemaScript === script" (click)="selectField(script)">
                         {{ script | sqxScriptName }}
-                    </a>
+                    </button>
                 </li>
             }
         </ul>

frontend/src/app/features/schemas/pages/schema/ui/schema-ui-form.component.html

@@ -2,15 +2,15 @@
     <div class="inner-header">
         <ul class="nav nav-tabs2">
             <li class="nav-item">
-                <a class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
                     {{ "schemas.listFields" | sqxTranslate }} <small>({{ fieldsInLists.length }})</small>
-                </a>
+                </button>
             </li>
 
             <li class="nav-item">
-                <a class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
                     {{ "schemas.referenceFields" | sqxTranslate }} <small>({{ fieldsInReferences.length }})</small>
-                </a>
+                </button>
             </li>
         </ul>
         <button class="float-end btn btn-primary" [class.invisible]="!isEditable" type="submit">

frontend/src/app/features/schemas/pages/schemas/schema-form.component.html

@@ -12,23 +12,23 @@
                 <div class="col">
                     <ul class="nav nav-tabs2">
                         <li class="nav-item">
-                            <a class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
                                 {{ "schemas.createCustom" | sqxTranslate }}
-                            </a>
+                            </button>
                         </li>
 
                         <li class="nav-item">
-                            <a class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                            <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
                                 {{ "schemas.createFromJson" | sqxTranslate }}
-                            </a>
+                            </button>
                         </li>
 
                         @if (hasChatBot) {
                             <li class="nav-item">
-                                <a class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
+                                <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
                                     {{ "schemas.createAI" | sqxTranslate }}
                                     <span class="badge rounded-pill badge-primary">New</span>
-                                </a>
+                                </button>
                             </li>
                         }
                     </ul>

frontend/src/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html

@@ -11,9 +11,9 @@
                 <ul class="nav nav-tabs2">
                     @for (script of editForm.form.controls | sqxKeys; track script) {
                         <li class="nav-item">
-                            <a class="nav-link" [class.active]="assetScript === script" (click)="selectField(script)">
+                            <button class="nav-link" [class.active]="assetScript === script" (click)="selectField(script)">
                                 {{ script | sqxScriptName }}
-                            </a>
+                            </button>
                         </li>
                     }
                 </ul>

frontend/src/app/features/settings/pages/clients/client-connect-form.component.html

@@ -11,7 +11,9 @@
                     </li>
                 } @else {
                     <li class="breadcrumb-item done">
-                        <a class="force" (click)="go('Start')"> <i class="icon-checkmark"></i> {{ "clients.connectWizard.step1Title" | sqxTranslate }} </a>
+                        <button class="btn-inline-link" (click)="go('Start')">
+                            <i class="icon-checkmark"></i> {{ "clients.connectWizard.step1Title" | sqxTranslate }}
+                        </button>
                     </li>
                 }
 

frontend/src/app/features/settings/pages/contributors/contributor-add-form.component.html

@@ -38,7 +38,7 @@
     <div class="import-hint">
         <sqx-form-hint>
             {{ "contributors.importHint" | sqxTranslate }}
-            <a class="force" (click)="importDialog.show()">{{ "contributors.importButton" | sqxTranslate }}</a>
+            <a class="btn-inline-link" (click)="importDialog.show()">{{ "contributors.importButton" | sqxTranslate }}</a>
         </sqx-form-hint>
     </div>
 </div>

frontend/src/app/features/settings/pages/workflows/workflow.component.html

@@ -37,15 +37,15 @@
             <div class="table-items-row-details-tabs clearfix">
                 <ul class="nav nav-tabs2">
                     <li class="nav-item">
-                        <a class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                        <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
                             {{ "workflows.tabEdit" | sqxTranslate }}
-                        </a>
+                        </button>
                     </li>
 
                     <li class="nav-item">
-                        <a class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                        <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
                             {{ "workflows.tabVisualize" | sqxTranslate }}
-                        </a>
+                        </button>
                     </li>
                 </ul>
 

frontend/src/app/features/teams/pages/contributors/contributor-add-form.component.html

@@ -30,7 +30,7 @@
     <div class="import-hint">
         <sqx-form-hint>
             {{ "contributors.importHint" | sqxTranslate }}
-            <a class="force" (click)="importDialog.show()">{{ "contributors.importButton" | sqxTranslate }}</a>
+            <button class="btn-inline-link" (click)="importDialog.show()">{{ "contributors.importButton" | sqxTranslate }}</button>
         </sqx-form-hint>
     </div>
 </div>

frontend/src/app/framework/angular/dropdown-menu.component.ts

@@ -5,6 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+import { CdkTrapFocus  } from '@angular/cdk/a11y';
 import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input } from '@angular/core';
 
 @Component({
@@ -16,6 +17,9 @@ import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input } fr
         ['animate.enter']: 'fade-in',
         ['animate.leave']: 'fade-out',
     },
+    hostDirectives: [
+        CdkTrapFocus ,
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownMenuComponent {

frontend/src/app/framework/angular/layout.component.html

@@ -25,7 +25,7 @@
                             <i class="icon-close"></i>
                         </a>
                     } @else {
-                        <a class="btn panel2-collapse"> <i class="icon-close"></i> </a>
+                        <button class="btn panel2-collapse"><i class="icon-close"></i></button>
                     }
                 </div>
             }

frontend/src/app/framework/angular/menu-item.component.html

@@ -1,5 +1,5 @@
 <ng-template #dropdownTemplate>
-    <a
+    <button
         class="dropdown-item"
         [attr.disabled]="disabled"
         [class.disabled]="disabled"
@@ -9,7 +9,7 @@
         (sqxConfirmClick)="action.emit()"
         [title]="tooltip | sqxTranslate">
         {{ menuLabel || label | sqxTranslate }}
-    </a>
+    </button>
 </ng-template>
 
 <button

frontend/src/app/framework/angular/modals/modal-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal" animate.enter="fade-in" animate.leave="fade-out" data-testid="dialog">
+<div class="modal" animate.enter="fade-in" animate.leave="fade-out" data-testid="dialog" cdkTrapFocus>
     <div class="modal-dialog modal-{{ size }}" [class.modal-fh]="fullHeight">
         <div class="modal-content" [sqxTourStep]="tourId">
             @if (showHeader) {

frontend/src/app/framework/angular/modals/modal-dialog.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-
+import { CdkTrapFocus  } from '@angular/cdk/a11y';
 import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { TranslatePipe } from '../pipes/translate.pipe';
 import { ShortcutComponent } from '../shortcut.component';
@@ -17,6 +17,7 @@ import { TourStepDirective } from './tour-step.directive';
     templateUrl: './modal-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.Default,
     imports: [
+        CdkTrapFocus,
         ShortcutComponent,
         TranslatePipe,
         TourStepDirective,

frontend/src/app/shared/components/assets/asset-dialog.component.html

@@ -6,47 +6,47 @@
                 <div class="col">
                     <ul class="nav nav-tabs2">
                         <li class="nav-item">
-                            <a class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
                                 {{ "assets.tabMetadata" | sqxTranslate }}
-                            </a>
+                            </button>
                         </li>
 
                         <li class="nav-item">
                             @if (isImage) {
-                                <a class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                                <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
                                     {{ "assets.tabImage" | sqxTranslate }}
-                                </a>
+                                </button>
                             }
                         </li>
 
                         <li class="nav-item">
                             @if (isImage) {
-                                <a class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
+                                <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
                                     {{ "assets.tabFocusPoint" | sqxTranslate }}
-                                </a>
+                                </button>
                             }
                         </li>
 
                         <li class="nav-item">
                             @if (isDocumentLikely) {
-                                <a class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)">
+                                <button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)">
                                     {{ "assets.tabTextEditor" | sqxTranslate }}
-                                </a>
+                                </button>
                             }
                         </li>
 
                         <li class="nav-item">
                             @if (isVideo || (asset | sqxPreviewable)) {
-                                <a class="nav-link" [class.active]="selectedTab === 4" (click)="selectTab(4)">
+                                <button class="nav-link" [class.active]="selectedTab === 4" (click)="selectTab(4)">
                                     {{ "assets.tabPreview" | sqxTranslate }}
-                                </a>
+                                </button>
                             }
                         </li>
 
                         <li class="nav-item">
-                            <a class="nav-link" [class.active]="selectedTab === 5" (click)="selectTab(5)">
+                            <button class="nav-link" [class.active]="selectedTab === 5" (click)="selectTab(5)">
                                 {{ "assets.tabHistory" | sqxTranslate }}
-                            </a>
+                            </button>
                         </li>
                     </ul>
                 </div>

frontend/src/app/shared/components/assets/asset-folder.component.html

@@ -17,10 +17,10 @@
                     </button>
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="editDropdown; closeAlways: true">
                         @if (canUpdate) {
-                            <a class="dropdown-item" (click)="editDialog.show()"> {{ "common.rename" | sqxTranslate }} </a>
+                            <button class="dropdown-item" (click)="editDialog.show()">{{ "common.rename" | sqxTranslate }}</button>
                             <div class="dropdown-divider"></div>
                         }
-                        <a
+                        <button
                             class="dropdown-item dropdown-item-delete"
                             [class.disabled]="!canDelete"
                             confirmRememberKey="deleteAssetFolder"
@@ -28,7 +28,7 @@
                             confirmTitle="i18n:assets.deleteFolderConfirmTitle"
                             (sqxConfirmClick)="emitDelete()">
                             {{ "common.delete" | sqxTranslate }}
-                        </a>
+                        </button>
                     </sqx-dropdown-menu>
                 }
             </div>

frontend/src/app/shared/components/assets/asset-history.component.html

@@ -16,7 +16,7 @@
                 <div class="event-created">{{ assetEvent.event.created | sqxFromNow }}</div>
 
                 @if (assetEvent.canDownload) {
-                    <a class="event-load force" [href]="asset | sqxAssetUrl: assetEvent.version" sqxExternalLink="noicon">
+                    <a class="event-load btn-inline-link" [href]="asset | sqxAssetUrl: assetEvent.version" sqxExternalLink="noicon">
                         {{ "assets.downloadVersion" | sqxTranslate }}
                     </a>
                 }

frontend/src/app/shared/components/assets/asset-path.component.html

@@ -3,9 +3,9 @@
         @if (i > 0) {
             <i class="icon-angle-right"></i>
         }
-        <a class="btn" [class.first]="i === 0" [class.force]="i < path.length - 1 || all" (click)="navigate.emit(item)">
+        <button class="btn" [class.first]="i === 0" [class.force]="i < path.length - 1 || all" (click)="navigate.emit(item)">
             {{ item.folderName | sqxTranslate }}
-        </a>
+        </button>
     } @empty {
         <span class="btn">{{ "common.searchResults" | sqxTranslate }}</span>
     }

frontend/src/app/shared/components/assets/asset.component.html

@@ -25,9 +25,9 @@
 
                         <div class="overlay-menu">
                             @if (!isDisabled) {
-                                <a class="file-edit ms-2" attr.aria-label="{{ 'common.edit' | sqxTranslate }}" (click)="emitEdit()">
+                                <button class="file-edit ms-2" attr.aria-label="{{ 'common.edit' | sqxTranslate }}" (click)="emitEdit()">
                                     <i class="icon-pencil"></i>
-                                </a>
+                                </button>
                             }
                             <a
                                 class="file-download ms-2"
@@ -38,11 +38,11 @@
                                 <i class="icon-download"></i>
                             </a>
                             @if (folderIcon) {
-                                <a class="file-folder ms-2" (click)="selectFolder.emit(asset.parentId)"> <i class="icon-folder"></i> </a>
+                                <button class="file-folder ms-2" (click)="selectFolder.emit(asset.parentId)"><i class="icon-folder"></i></button>
                             }
 
                             @if (!isDisabled && !removeMode && asset.canDelete) {
-                                <a
+                                <button
                                     class="file-delete ms-2"
                                     attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                                     confirmRememberKey="deleteAsset"
@@ -50,11 +50,11 @@
                                     confirmTitle="i18n:assets.deleteConfirmTitle"
                                     (sqxConfirmClick)="delete.emit()">
                                     <i class="icon-delete"></i>
-                                </a>
+                                </button>
                             }
 
                             @if (!isDisabled && removeMode) {
-                                <a
+                                <button
                                     class="file-delete ms-2"
                                     attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                                     confirmRememberKey="removeAsset"
@@ -62,7 +62,7 @@
                                     confirmTitle="i18n:assets.removeConfirmTitle"
                                     (sqxConfirmClick)="remove.emit()">
                                     <i class="icon-close"></i>
-                                </a>
+                                </button>
                             }
                         </div>
 

frontend/src/app/shared/components/assets/asset.component.scss

@@ -154,7 +154,10 @@ $list-height: 2.25rem;
     &-menu {
         @include absolute(1rem, 1rem, auto, auto);
 
-        a {
+        button {
+            background: none;
+            border: 0;
+            border-radius: 0;
             color: color.adjust($color-white, $lightness: -10%);
             cursor: pointer;
             font-size: 1.1rem;

frontend/src/app/shared/components/cards/api-calls-card.component.html

@@ -3,9 +3,9 @@
         {{ "dashboard.apiCallsCard" | sqxTranslate }}
         @if (app) {
             <div class="float-end">
-                <a class="force" (click)="downloadLog(app)">
+                <button class="btn-inline-link" (click)="downloadLog(app)">
                     <small>{{ "dashboard.downloadLog" | sqxTranslate }}</small>
-                </a>
+                </button>
             </div>
         }
     </div>

frontend/src/app/shared/components/search/query-list.component.html

@@ -2,7 +2,7 @@
     <ul class="nav nav-light flex-column">
         @for (saved of queries; track saved.name) {
             <li class="nav-item">
-                <a class="nav-link" [class.active]="isSelectedQuery(saved)" (click)="search.emit(saved.query)">
+                <button class="nav-link" [class.active]="isSelectedQuery(saved)" (click)="search.emit(saved.query)">
                     <div class="row g-0">
                         <div class="col truncate">
                             <i class="icon-circle" [class.hidden]="!saved.color" [style.color]="saved.color"></i>
@@ -11,13 +11,13 @@
 
                         <div class="col-auto">
                             @if (canRemove) {
-                                <a class="btn-sm btn-text-danger btn-remove" (click)="remove.emit(saved)" sqxStopClick>
+                                <button class="btn-sm btn-text-danger btn-remove" (click)="remove.emit(saved)" sqxStopClick>
                                     <i class="icon-close"></i>
-                                </a>
+                                </button>
                             }
                         </div>
                     </div>
-                </a>
+                </button>
             </li>
         }
     </ul>

frontend/src/app/shared/components/table-header.component.html

@@ -1,5 +1,5 @@
 @if (sortable) {
-    <a class="pointer truncate" (click)="sort()">
+    <button class="btn-inline-link truncate" (click)="sort()">
         <span class="truncate">
             @if (order === "ascending") {
                 <i class="icon-caret-up"></i>
@@ -10,7 +10,7 @@
             }
             {{ text | sqxTranslate }}
         </span>
-    </a>
+    </button>
 } @else {
     <span class="truncate">{{ text | sqxTranslate }}</span>
 }

frontend/src/app/shared/components/table-header.component.scss

@@ -1,8 +1,13 @@
 @import 'mixins';
 @import 'vars';
 
-a {
+button {
+    color: $color-text;
     text-align: left;
     text-decoration: none;
-    color: $color-text;
+    text-transform: uppercase;
+
+    &:hover {
+        text-decoration: none;
+    }
 }

frontend/src/app/shell/pages/internal/profile-menu.component.html

@@ -13,20 +13,20 @@
     <div class="dropdown-divider"></div>
 
     @if (uiState.canUseAdminResource | async) {
-        <a class="dropdown-item" routerLink="/app/administration"> {{ "common.administration" | sqxTranslate }} </a>
+        <button class="dropdown-item" routerLink="/app/administration">{{ "common.administration" | sqxTranslate }}</button>
     }
     <a class="dropdown-item" href="{{ snapshot.profileUrl }}" sqxExternalLink="noicon"> {{ "profile.title" | sqxTranslate }} </a>
     <div class="dropdown-submenu">
-        <a class="dropdown-item dropdown-toggle" (click)="toggleSubmenu()" sqxStopClick> {{ "common.language" | sqxTranslate }} </a>
+        <button class="dropdown-item dropdown-toggle" (click)="toggleSubmenu()" sqxStopClick>{{ "common.language" | sqxTranslate }}</button>
         <div class="dropdown-menu" [class.open]="snapshot.showSubmenu">
             @for (availableLanguage of languages; track availableLanguage) {
-                <a class="dropdown-item" [class.active]="availableLanguage.iso2Code === language" (click)="changeLanguage(availableLanguage.iso2Code)">
+                <button class="dropdown-item" [class.active]="availableLanguage.iso2Code === language" (click)="changeLanguage(availableLanguage.iso2Code)">
                     {{ availableLanguage.localName }}
-                </a>
+                </button>
             }
         </div>
     </div>
 
     <div class="dropdown-divider"></div>
-    <a class="dropdown-item" (click)="logout()" sqxExternalLink> {{ "common.logout" | sqxTranslate }} </a>
+    <button class="dropdown-item" (click)="logout()" sqxExternalLink>{{ "common.logout" | sqxTranslate }}</button>
 </sqx-dropdown-menu>

frontend/src/app/theme/_bootstrap.scss

@@ -57,6 +57,13 @@
     }
 }
 
+a, button {
+    &:focus-visible:not(.btn) {
+        outline: none;
+        box-shadow: inset 0 0 0 2px $color-theme-brand !important;
+    }
+}
+
 .alert {
     word-break: break-word;
 
@@ -527,6 +534,20 @@ a {
     }
 }
 
+.btn-inline-link {
+    background: none;
+    border-radius: 0;
+    border: 0;
+    color: $color-theme-brand;
+    padding: 0;
+
+    &:hover {
+        color: inherit;
+        cursor: pointer;
+        text-decoration: underline;
+    }
+}
+
 .btn-circle {
     @include force-height(4rem);
     @include force-width(4rem);