From e7b64fb88df6c17f8e7ce4aaf7e4472bdf7dfe0d Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Mon, 16 Mar 2026 10:40:08 +0100
Subject: [PATCH] Move to labels

---
 backend/i18n/frontend_en.json                 |  2 +-
 backend/i18n/source/frontend_en.json          |  2 +-
 frontend/refactor.js                          | 84 +++++++++----------
 .../event-consumer.component.html             | 24 ++++--
 .../pages/users/user.component.html           | 20 +++--
 .../pages/graphql/graphql-page.component.html |  4 +-
 .../assets/pages/asset-tags.component.html    |  8 +-
 .../assets/pages/assets-page.component.html   | 11 ++-
 .../calendar/calendar-page.component.html     | 19 +++--
 .../comments/comments-page.component.html     |  9 +-
 .../content-history-page.component.html       |  3 +-
 .../pages/content/content-page.component.html | 35 ++++++--
 .../contents/contents-page.component.html     |  9 +-
 .../shared/forms/array-editor.component.html  | 16 +++-
 .../shared/forms/array-item.component.html    | 50 ++++++++---
 .../shared/forms/assets-editor.component.html |  4 +-
 .../shared/forms/content-field.component.html |  3 +-
 .../forms/field-copy-button.component.html    |  2 +-
 .../forms/stock-photo-editor.component.html   | 11 ++-
 .../shared/list/content.component.html        | 11 ++-
 .../references/reference-item.component.html  | 17 ++--
 .../rules/pages/rule/rule-page.component.html |  2 +-
 .../rules/pages/rules/rule.component.html     |  2 +-
 .../rules/shared/rule-element.component.html  |  2 +-
 .../content-changed-schema.component.html     |  2 +-
 .../content-changed-trigger.component.html    | 10 ++-
 .../schema-preview-urls-form.component.html   |  9 +-
 .../schema-field-rules-form.component.html    |  5 +-
 .../pages/schema/schema-page.component.html   | 12 +--
 .../pages/clients/client.component.html       |  2 +-
 .../contributors/contributor.component.html   |  2 +-
 .../settings/pages/jobs/job.component.html    |  4 +-
 .../pages/languages/language.component.html   |  7 +-
 .../pages/more/more-page.component.html       |  2 +-
 .../settings/pages/roles/role.component.html  | 16 ++--
 .../workflows/workflow-step.component.html    | 15 +++-
 .../workflow-transition.component.html        |  3 +-
 .../pages/workflows/workflow.component.html   |  2 +-
 .../teams/pages/auth/auth-page.component.html |  7 +-
 .../contributors/contributor.component.html   |  2 +-
 .../app/framework/angular/code.component.html |  3 +-
 .../editors/date-time-editor.component.html   |  9 +-
 .../editors/localized-input.component.html    |  3 +-
 .../framework/angular/layout.component.html   | 17 ++--
 .../assets/asset-dialog.component.html        | 17 ++--
 .../assets/asset-selector.component.html      |  7 +-
 .../assets/asset-uploader.component.html      |  7 +-
 .../components/assets/asset.component.html    | 30 ++++---
 .../assets/image-cropper.component.html       | 35 +++++---
 .../comments/comment.component.html           | 17 ++--
 .../contents/content-value.component.html     |  3 +-
 .../forms/geolocation-editor.component.html   | 18 +++-
 .../content-selector.component.html           |  4 +-
 .../components/schema-category.component.html |  7 +-
 .../search/query-list.component.html          |  8 +-
 .../components/tour-guide.component.html      |  3 +-
 56 files changed, 416 insertions(+), 222 deletions(-)

diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json
index 3f3a0b3f5..3e6c63b31 100644
--- a/backend/i18n/frontend_en.json
+++ b/backend/i18n/frontend_en.json
@@ -201,7 +201,7 @@
   "comments.resolve": "Resolve comment",
   "comments.title": "Comments",
   "comments.unresolve": "Unresolve comment",
-  "comments.unresolved": "Comments",
+  "comments.unresolved": "Open Comments",
   "common.actions": "Actions",
   "common.add": "Add",
   "common.administration": "Administration",
diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json
index 3f3a0b3f5..3e6c63b31 100644
--- a/backend/i18n/source/frontend_en.json
+++ b/backend/i18n/source/frontend_en.json
@@ -201,7 +201,7 @@
   "comments.resolve": "Resolve comment",
   "comments.title": "Comments",
   "comments.unresolve": "Unresolve comment",
-  "comments.unresolved": "Comments",
+  "comments.unresolved": "Open Comments",
   "common.actions": "Actions",
   "common.add": "Add",
   "common.administration": "Administration",
diff --git a/frontend/refactor.js b/frontend/refactor.js
index ce5423700..0d69dfbab 100644
--- a/frontend/refactor.js
+++ b/frontend/refactor.js
@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 const fs = require("fs");
 const path = require("path");
 
@@ -18,20 +16,9 @@ class AddButtonTypesStrategy {
 
 class FixIconOnlyInteractivesStrategy {
     #interactiveTagPattern = /<(a|button)(\s[^>]*)?>/gi;
-    #iconPattern = /<i class="icon[^>]*>[\s\S]*?<\/i>/gi;
-    #titleAttributePattern = /\btitle\s*=\s*["']([^"']*)["']/i;
-    #screenReaderPattern = /visually-hidden|sr-only|cdk-visually-hidden|aria-label\s*=|aria-labelledby\s*=/i;
-
-    #resolveTitle(title) {
-        if (title.startsWith("i18n:")) {
-            return `{{ '${title.replace("i18n:", "i18n.")}' | sqxTranslate }}`;
-        }
-        return title;
-    }
-
-    #visuallyHiddenSpan(title) {
-        return `<span class="visually-hidden">${this.#resolveTitle(title)}</span>`;
-    }
+    #visuallyHiddenSpanPattern = /\s*<span\s+class="visually-hidden">([\s\S]*?)<\/span>/i;
+    #nestedInteractiveOpenPattern = /<(a|button)[\s>]/gi;
+    #nestedInteractiveClosePattern = /<\/(a|button)\s*>/gi;
 
     #findClosingTag(html, from, tag) {
         const openingTagPattern = new RegExp(`<${tag}[\\s>]`, "gi");
@@ -60,21 +47,34 @@ class FixIconOnlyInteractivesStrategy {
         return position;
     }
 
-    #lineAndColumn(html, index) {
-        const before = html.slice(0, index);
-        const line = (before.match(/\n/g) || []).length + 1;
-        const column = index - before.lastIndexOf("\n");
-        return { line, column };
-    }
+    #isDirectChild(inner, spanIndex) {
+        let depth = 0;
+        let position = 0;
+
+        while (position < spanIndex) {
+            this.#nestedInteractiveOpenPattern.lastIndex = position;
+            this.#nestedInteractiveClosePattern.lastIndex = position;
+            const nextOpening = this.#nestedInteractiveOpenPattern.exec(inner);
+            const nextClosing = this.#nestedInteractiveClosePattern.exec(inner);
+
+            const openingBeforeSpan = nextOpening && nextOpening.index < spanIndex;
+            const closingBeforeSpan = nextClosing && nextClosing.index < spanIndex;
+
+            if (openingBeforeSpan && (!closingBeforeSpan || nextOpening.index < nextClosing.index)) {
+                depth++;
+                position = nextOpening.index + 1;
+            } else if (closingBeforeSpan) {
+                depth--;
+                position = nextClosing.index + 1;
+            } else {
+                break;
+            }
+        }
 
-    #hasOnlyIcons(inner) {
-        this.#iconPattern.lastIndex = 0;
-        const withoutIcons = inner.replace(this.#iconPattern, "").replace(/<[^>]+>/g, "").trim();
-        this.#iconPattern.lastIndex = 0;
-        return withoutIcons.length === 0 && this.#iconPattern.test(inner);
+        return depth === 0;
     }
 
-    fix(html, filePath) {
+    fix(html) {
         const fixes = [];
         let match;
 
@@ -86,29 +86,27 @@ class FixIconOnlyInteractivesStrategy {
             const openEnd = match.index + match[0].length;
             const closeEnd = this.#findClosingTag(html, openEnd, tag);
             const inner = html.slice(openEnd, closeEnd - `</${tag}>`.length);
+            const spanMatch = this.#visuallyHiddenSpanPattern.exec(inner);
 
-            if (!this.#hasOnlyIcons(inner) || this.#screenReaderPattern.test(inner) || this.#screenReaderPattern.test(attributes)) {
+            if (!spanMatch || !this.#isDirectChild(inner, spanMatch.index)) {
                 continue;
             }
 
-            const titleMatch = this.#titleAttributePattern.exec(attributes);
-
-            const { line, column } = this.#lineAndColumn(html, match.index);
+            const ariaLabel = spanMatch[1].trim().replace(/"/g, "'");
+            const innerWithout = inner.slice(0, spanMatch.index) + inner.slice(spanMatch.index + spanMatch[0].length);
+            const newOpenTag = `<${tag}${attributes} attr.aria-label="${ariaLabel}">`;
 
-            if (titleMatch) {
-                fixes.push({ insertAt: openEnd + inner.length, title: titleMatch[1] });
-            } else {
-                fixes.push({ insertAt: openEnd + inner.length, title: null });
-                console.log(`${filePath}:${line}:${column}`);
-            }
+            fixes.push({
+                from: match.index,
+                to: openEnd + inner.length,
+                newOpenTag,
+                newInner: innerWithout,
+            });
         }
 
         let result = html;
-        for (const fix of fixes.sort((a, b) => b.insertAt - a.insertAt)) {
-            const span = fix.title !== null
-                ? this.#visuallyHiddenSpan(fix.title)
-                : this.#visuallyHiddenSpan("{{ 'i18n:TODO' | sqxTranslate }}</span>");
-            result = result.slice(0, fix.insertAt) + span + result.slice(fix.insertAt);
+        for (const fix of fixes.sort((a, b) => b.from - a.from)) {
+            result = result.slice(0, fix.from) + fix.newOpenTag + fix.newInner + result.slice(fix.to);
         }
 
         return result;
diff --git a/frontend/src/app/features/administration/pages/event-consumers/event-consumer.component.html b/frontend/src/app/features/administration/pages/event-consumers/event-consumer.component.html
index bacd398e4..cb334e2a8 100644
--- a/frontend/src/app/features/administration/pages/event-consumers/event-consumer.component.html
+++ b/frontend/src/app/features/administration/pages/event-consumers/event-consumer.component.html
@@ -16,23 +16,35 @@
 
     <td class="cell-actions-lg">
         @if (eventConsumer.canReset) {
-            <button class="btn btn-text-secondary" (click)="reset()" title="i18n:eventConsumers.resetTooltip" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'eventConsumers.resetTooltip' | sqxTranslate }}"
+                (click)="reset()"
+                title="i18n:eventConsumers.resetTooltip"
+                type="button">
                 <i class="icon icon-reset"></i>
-                <span class="visually-hidden">{{ "eventConsumers.resetTooltip" | sqxTranslate }}</span>
             </button>
         }
 
         @if (eventConsumer.canStart) {
-            <button class="btn btn-text-secondary" (click)="start()" title="i18n:eventConsumers.startTooltip" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'eventConsumers.startTooltip' | sqxTranslate }}"
+                (click)="start()"
+                title="i18n:eventConsumers.startTooltip"
+                type="button">
                 <i class="icon icon-play"></i>
-                <span class="visually-hidden">{{ "eventConsumers.startTooltip" | sqxTranslate }}</span>
             </button>
         }
 
         @if (eventConsumer.canStop) {
-            <button class="btn btn-text-secondary" (click)="stop()" title="i18n:eventConsumers.stopTooltip" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'eventConsumers.stopTooltip' | sqxTranslate }}"
+                (click)="stop()"
+                title="i18n:eventConsumers.stopTooltip"
+                type="button">
                 <i class="icon icon-pause"></i>
-                <span class="visually-hidden">{{ "eventConsumers.stopTooltip" | sqxTranslate }}</span>
             </button>
         }
     </td>
diff --git a/frontend/src/app/features/administration/pages/users/user.component.html b/frontend/src/app/features/administration/pages/users/user.component.html
index 52f3f18ab..e4d49c1da 100644
--- a/frontend/src/app/features/administration/pages/users/user.component.html
+++ b/frontend/src/app/features/administration/pages/users/user.component.html
@@ -11,20 +11,31 @@
 
     <td class="cell-actions-lg">
         @if (user.canLock) {
-            <button class="btn btn-text-secondary" (click)="lock()" sqxStopClick title="i18n:users.lockTooltip" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'users.lockTooltip' | sqxTranslate }}"
+                (click)="lock()"
+                sqxStopClick
+                title="i18n:users.lockTooltip"
+                type="button">
                 <i class="icon icon-unlocked"></i>
-                <span class="visually-hidden">{{ "users.lockTooltip" | sqxTranslate }}</span>
             </button>
         }
 
         @if (user.canUnlock) {
-            <button class="btn btn-text-secondary" (click)="unlock()" sqxStopClick title="i18n:users.unlockTooltip" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'users.unlockTooltip' | sqxTranslate }}"
+                (click)="unlock()"
+                sqxStopClick
+                title="i18n:users.unlockTooltip"
+                type="button">
                 <i class="icon icon-lock"></i>
-                <span class="visually-hidden">{{ "users.unlockTooltip" | sqxTranslate }}</span>
             </button>
         }
         <button
             class="btn btn-text-danger"
+            attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
             confirmRememberKey="deleteUser"
             confirmText="i18n:users.deleteConfirmText"
             confirmTitle="i18n:users.deleteConfirmTitle"
@@ -33,7 +44,6 @@
             sqxStopClick
             type="button">
             <i class="icon-bin2"></i>
-            <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
         </button>
     </td>
 </tr>
diff --git a/frontend/src/app/features/api/pages/graphql/graphql-page.component.html b/frontend/src/app/features/api/pages/graphql/graphql-page.component.html
index e70321d84..0e0f2b261 100644
--- a/frontend/src/app/features/api/pages/graphql/graphql-page.component.html
+++ b/frontend/src/app/features/api/pages/graphql/graphql-page.component.html
@@ -3,8 +3,8 @@
     <div #graphiQLContainer inner sqxTourStep="graphQLExplorer"></div>
 
     @if (clientsReadable) {
-        <button class="btn btn-simple btn-options" (click)="clientsDialog.show()" type="button">
-            <i class="icon-clients"></i> <span class="visually-hidden">{{ "api.graphqlShowClients" | sqxTranslate }}</span>
+        <button class="btn btn-simple btn-options" attr.aria-label="{{ 'api.graphqlShowClients' | sqxTranslate }}" (click)="clientsDialog.show()" type="button">
+            <i class="icon-clients"></i>
         </button>
     }
 </sqx-layout>
diff --git a/frontend/src/app/features/assets/pages/asset-tags.component.html b/frontend/src/app/features/assets/pages/asset-tags.component.html
index 84f34510e..2d082ce7a 100644
--- a/frontend/src/app/features/assets/pages/asset-tags.component.html
+++ b/frontend/src/app/features/assets/pages/asset-tags.component.html
@@ -15,9 +15,13 @@
                         <div class="badge badge-secondary rounded-pill">{{ tag.count }}</div>
 
                         @if (canRename) {
-                            <button class="btn-sm btn-text-secondary btn-rename" (click)="renameTag(tag)" sqxStopClick type="button">
+                            <button
+                                class="btn-sm btn-text-secondary btn-rename"
+                                attr.aria-label="{{ 'common.rename' | sqxTranslate }}"
+                                (click)="renameTag(tag)"
+                                sqxStopClick
+                                type="button">
                                 <i class="icon-pencil"></i>
-                                <span class="visually-hidden">{{ "common.rename" | sqxTranslate }}</span>
                             </button>
                         }
                     </div>
diff --git a/frontend/src/app/features/assets/pages/assets-page.component.html b/frontend/src/app/features/assets/pages/assets-page.component.html
index 839ff1ded..67b98b3e3 100644
--- a/frontend/src/app/features/assets/pages/assets-page.component.html
+++ b/frontend/src/app/features/assets/pages/assets-page.component.html
@@ -37,18 +37,23 @@
 
             <div class="col-auto">
                 <div class="btn-group">
-                    <button class="btn btn-secondary btn-toggle" [class.btn-primary]="listMode" (click)="changeView(true)" [disabled]="listMode" type="button">
+                    <button
+                        class="btn btn-secondary btn-toggle"
+                        attr.aria-label="{{ 'assets.listView' | sqxTranslate }}"
+                        [class.btn-primary]="listMode"
+                        (click)="changeView(true)"
+                        [disabled]="listMode"
+                        type="button">
                         <i class="icon-list"></i>
-                        <span class="visually-hidden">{{ "assets.listView" | sqxTranslate }}</span>
                     </button>
                     <button
                         class="btn btn-secondary btn-toggle"
+                        attr.aria-label="{{ 'assets.gridView' | sqxTranslate }}"
                         [class.btn-primary]="!listMode"
                         (click)="changeView(false)"
                         [disabled]="!listMode"
                         type="button">
                         <i class="icon-grid"></i>
-                        <span class="visually-hidden">{{ "assets.gridView" | sqxTranslate }}</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/src/app/features/content/pages/calendar/calendar-page.component.html b/frontend/src/app/features/content/pages/calendar/calendar-page.component.html
index 477b722ee..549017f39 100644
--- a/frontend/src/app/features/content/pages/calendar/calendar-page.component.html
+++ b/frontend/src/app/features/content/pages/calendar/calendar-page.component.html
@@ -9,13 +9,21 @@
 
             <option ngValue="month">{{ "common.monthly" | sqxTranslate }}</option>
         </select>
-        <button class="btn btn-text-secondary btn-navigate ms-2" (click)="goPrev()" [disabled]="isLoading" type="button">
+        <button
+            class="btn btn-text-secondary btn-navigate ms-2"
+            attr.aria-label="{{ 'common.prev' | sqxTranslate }}"
+            (click)="goPrev()"
+            [disabled]="isLoading"
+            type="button">
             <i class="icon-caret-left"></i>
-            <span class="visually-hidden">{{ "common.prev" | sqxTranslate }}</span>
         </button>
-        <button class="btn btn-text-secondary btn-navigate ms-2" (click)="goNext()" [disabled]="isLoading" type="button">
+        <button
+            class="btn btn-text-secondary btn-navigate ms-2"
+            attr.aria-label="{{ 'common.next' | sqxTranslate }}"
+            (click)="goNext()"
+            [disabled]="isLoading"
+            type="button">
             <i class="icon-caret-right"></i>
-            <span class="visually-hidden">{{ "common.next" | sqxTranslate }}</span>
         </button>
     </ng-container>
     <ng-container content>
@@ -30,9 +38,8 @@
                 <sqx-form-row for="id" hideError label="common.id" labelSize="lg">
                     <div class="input-group">
                         <input class="form-control" id="id" #inputId name="id" readonly value="{{ contentSelected.id }}" />
-                        <button class="btn btn-outline-secondary" [sqxCopy]="inputId" type="button">
+                        <button class="btn btn-outline-secondary" attr.aria-label="{{ 'common.copy' | sqxTranslate }}" [sqxCopy]="inputId" type="button">
                             <i class="icon-copy"></i>
-                            <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                         </button>
                     </div>
                 </sqx-form-row>
diff --git a/frontend/src/app/features/content/pages/comments/comments-page.component.html b/frontend/src/app/features/content/pages/comments/comments-page.component.html
index 432f0886b..5f9e9394f 100644
--- a/frontend/src/app/features/content/pages/comments/comments-page.component.html
+++ b/frontend/src/app/features/content/pages/comments/comments-page.component.html
@@ -3,12 +3,17 @@
         <ng-container menu>
             <ul class="nav nav-tabs2">
                 <li class="nav-item">
-                    <a class="nav-link" [class.active]="tab === 'unresolved'" [queryParams]="{ commentsTab: 'unresolved' }" [routerLink]="[]">
+                    <a
+                        class="nav-link"
+                        [class.active]="tab === 'unresolved'"
+                        [queryParams]="{ commentsTab: 'unresolved' }"
+                        queryParamsHandling="merge"
+                        [routerLink]="[]">
                         {{ "comments.unresolved" | sqxTranslate }}
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" [class.active]="tab === 'all'" [queryParams]="{ commentsTab: 'all' }" [routerLink]="[]">
+                    <a class="nav-link" [class.active]="tab === 'all'" [queryParams]="{ commentsTab: 'all' }" queryParamsHandling="merge" [routerLink]="[]">
                         {{ "comments.all" | sqxTranslate }}
                     </a>
                 </li>
diff --git a/frontend/src/app/features/content/pages/content/content-history-page.component.html b/frontend/src/app/features/content/pages/content/content-history-page.component.html
index 77044d646..144107fbd 100644
--- a/frontend/src/app/features/content/pages/content/content-history-page.component.html
+++ b/frontend/src/app/features/content/pages/content/content-history-page.component.html
@@ -4,9 +4,8 @@
             <label for="id">{{ "common.id" | sqxTranslate }}</label>
             <div class="input-group">
                 <input class="form-control" id="id" #inputId name="id" readonly value="{{ content.id }}" />
-                <button class="btn btn-outline-secondary" [sqxCopy]="inputId" type="button">
+                <button class="btn btn-outline-secondary" attr.aria-label="{{ 'common.copy' | sqxTranslate }}" [sqxCopy]="inputId" type="button">
                     <i class="icon-copy"></i>
-                    <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
diff --git a/frontend/src/app/features/content/pages/content/content-page.component.html b/frontend/src/app/features/content/pages/content/content-page.component.html
index 17213ded1..fa659a7cc 100644
--- a/frontend/src/app/features/content/pages/content/content-page.component.html
+++ b/frontend/src/app/features/content/pages/content/content-page.component.html
@@ -19,32 +19,57 @@
                 @if (content && contentTab | async; as tab) {
                     <ul class="nav nav-tabs2">
                         <li class="nav-item">
-                            <a class="nav-link" [class.active]="tab === 'editor'" [queryParams]="{ tab: 'editor' }" [routerLink]="[]">
+                            <a
+                                class="nav-link"
+                                [class.active]="tab === 'editor'"
+                                [queryParams]="{ tab: 'editor' }"
+                                queryParamsHandling="merge"
+                                [routerLink]="[]">
                                 {{ "contents.contentTab.editor" | sqxTranslate }}
                             </a>
                         </li>
 
                         <li>
-                            <a class="nav-link" [class.active]="tab === 'references'" [queryParams]="{ tab: 'references' }" [routerLink]="[]">
+                            <a
+                                class="nav-link"
+                                [class.active]="tab === 'references'"
+                                [queryParams]="{ tab: 'references' }"
+                                queryParamsHandling="merge"
+                                [routerLink]="[]">
                                 {{ "contents.contentTab.references" | sqxTranslate }}
                             </a>
                         </li>
 
                         <li>
-                            <a class="nav-link" [class.active]="tab === 'referencing'" [queryParams]="{ tab: 'referencing' }" [routerLink]="[]">
+                            <a
+                                class="nav-link"
+                                [class.active]="tab === 'referencing'"
+                                [queryParams]="{ tab: 'referencing' }"
+                                queryParamsHandling="merge"
+                                [routerLink]="[]">
                                 {{ "contents.contentTab.referencing" | sqxTranslate }}
                             </a>
                         </li>
 
                         <li>
-                            <a class="nav-link" [class.active]="tab === 'inspect'" [queryParams]="{ tab: 'inspect' }" [routerLink]="[]">
+                            <a
+                                class="nav-link"
+                                [class.active]="tab === 'inspect'"
+                                [queryParams]="{ tab: 'inspect' }"
+                                queryParamsHandling="merge"
+                                [routerLink]="[]">
                                 {{ "contents.contentTab.inspect" | sqxTranslate }}
                             </a>
                         </li>
 
                         @if (schema.properties.contentEditorUrl) {
                             <li>
-                                <a class="nav-link" [class.active]="tab === 'extension'" [queryParams]="{ tab: 'extension' }" [routerLink]="[]">
+                                <a
+                                    class="nav-link"
+                                    [class.active]="tab === 'extension'"
+                                    [queryParams]="{ tab: 'extension' }"
+                                    queryParamsHandling="merge"
+                                    [routerLink]="[]">
                                     {{ "common.extension" | sqxTranslate }}
                                 </a>
                             </li>
diff --git a/frontend/src/app/features/content/pages/contents/contents-page.component.html b/frontend/src/app/features/content/pages/contents/contents-page.component.html
index 26d7267c5..9b351cbd3 100644
--- a/frontend/src/app/features/content/pages/contents/contents-page.component.html
+++ b/frontend/src/app/features/content/pages/contents/contents-page.component.html
@@ -4,9 +4,14 @@
         <div class="row flex-nowrap flex-grow-1 gx-2 overflow-hidden">
             <div class="col-auto ms-8">
                 <sqx-notifo position="bottom-left" topic="apps/{{ contentsState.appId }}/schemas/{{ schema.id }}/contents" />
-                <button class="btn btn-text-secondary" (click)="reload()" shortcut="CTRL + B" title="i18n:contents.refreshTooltip" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.refreshTooltip' | sqxTranslate }}"
+                    (click)="reload()"
+                    shortcut="CTRL + B"
+                    title="i18n:contents.refreshTooltip"
+                    type="button">
                     <i class="icon-reset"></i>
-                    <span class="visually-hidden">{{ "contents.refreshTooltip" | sqxTranslate }}</span>
                 </button>
             </div>
 
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.html b/frontend/src/app/features/content/shared/forms/array-editor.component.html
index 8754ee170..a027f5f14 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.html
@@ -124,13 +124,21 @@
 
         @if (items.length > 0) {
             <div class="col-auto d-flex gap1">
-                <button class="btn btn-text-secondary" (click)="expandAll()" title="i18n:contents.arrayExpandAll" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayExpandAll' | sqxTranslate }}"
+                    (click)="expandAll()"
+                    title="i18n:contents.arrayExpandAll"
+                    type="button">
                     <i class="icon-plus2"></i>
-                    <span class="visually-hidden">{{ "contents.arrayExpandAll" | sqxTranslate }}</span>
                 </button>
-                <button class="btn btn-text-secondary" (click)="collapseAll()" title="i18n:contents.arrayCollapseAll" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayCollapseAll' | sqxTranslate }}"
+                    (click)="collapseAll()"
+                    title="i18n:contents.arrayCollapseAll"
+                    type="button">
                     <i class="icon-minus2"></i>
-                    <span class="visually-hidden">{{ "contents.arrayCollapseAll" | sqxTranslate }}</span>
                 </button>
             </div>
         }
diff --git a/frontend/src/app/features/content/shared/forms/array-item.component.html b/frontend/src/app/features/content/shared/forms/array-item.component.html
index 7f10f7707..a707afbf2 100644
--- a/frontend/src/app/features/content/shared/forms/array-item.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-item.component.html
@@ -10,55 +10,79 @@
             </div>
 
             <div class="col-auto d-flex gap-1 pe-4">
-                <button class="btn btn-text-secondary" (click)="moveTop()" [disabled]="isDisabled || isFirst" title="i18n:contents.arrayMoveTop" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayMoveTop' | sqxTranslate }}"
+                    (click)="moveTop()"
+                    [disabled]="isDisabled || isFirst"
+                    title="i18n:contents.arrayMoveTop"
+                    type="button">
                     <i class="icon-caret-top"></i>
-                    <span class="visually-hidden">{{ "contents.arrayMoveTop" | sqxTranslate }}</span>
                 </button>
-                <button class="btn btn-text-secondary" (click)="moveUp()" [disabled]="isDisabled || isFirst" title="i18n:contents.arrayMoveUp" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayMoveUp' | sqxTranslate }}"
+                    (click)="moveUp()"
+                    [disabled]="isDisabled || isFirst"
+                    title="i18n:contents.arrayMoveUp"
+                    type="button">
                     <i class="icon-caret-up"></i>
-                    <span class="visually-hidden">{{ "contents.arrayMoveUp" | sqxTranslate }}</span>
                 </button>
-                <button class="btn btn-text-secondary" (click)="moveDown()" [disabled]="isDisabled || isLast" title="i18n:contents.arrayMoveDown" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayMoveDown' | sqxTranslate }}"
+                    (click)="moveDown()"
+                    [disabled]="isDisabled || isLast"
+                    title="i18n:contents.arrayMoveDown"
+                    type="button">
                     <i class="icon-caret-down"></i>
-                    <span class="visually-hidden">{{ "contents.arrayMoveDown" | sqxTranslate }}</span>
                 </button>
                 <button
                     class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayMoveBottom' | sqxTranslate }}"
                     (click)="moveBottom()"
                     [disabled]="isDisabled || isLast"
                     title="i18n:contents.arrayMoveBottom"
                     type="button">
                     <i class="icon-caret-bottom"></i>
-                    <span class="visually-hidden">{{ "contents.arrayMoveBottom" | sqxTranslate }}</span>
                 </button>
                 <button
                     class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayExpandItem' | sqxTranslate }}"
                     [class.hidden]="!(isCollapsed | async)"
                     (click)="expand()"
                     title="i18n:contents.arrayExpandItem"
                     type="button">
                     <i class="icon-plus2"></i>
-                    <span class="visually-hidden">{{ "contents.arrayExpandItem" | sqxTranslate }}</span>
                 </button>
                 <button
                     class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayCollapseItem' | sqxTranslate }}"
                     [class.hidden]="isCollapsed | async"
                     (click)="collapse()"
                     title="i18n:contents.arrayCollapseItem"
                     type="button">
                     <i class="icon-minus2"></i>
-                    <span class="visually-hidden">{{ "contents.arrayCollapseItem" | sqxTranslate }}</span>
                 </button>
             </div>
 
             <div class="col-auto">
-                <button class="btn btn-text-secondary" (click)="clone.emit()" [disabled]="isDisabled" title="i18n:contents.arrayCloneItem" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'contents.arrayCloneItem' | sqxTranslate }}"
+                    (click)="clone.emit()"
+                    [disabled]="isDisabled"
+                    title="i18n:contents.arrayCloneItem"
+                    type="button">
                     <i class="icon-clone"></i>
-                    <span class="visually-hidden">{{ "contents.arrayCloneItem" | sqxTranslate }}</span>
                 </button>
-                <button class="btn btn-text-danger" (click)="itemRemove.emit()" [disabled]="isDisabled" type="button">
+                <button
+                    class="btn btn-text-danger"
+                    attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
+                    (click)="itemRemove.emit()"
+                    [disabled]="isDisabled"
+                    type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
diff --git a/frontend/src/app/features/content/shared/forms/assets-editor.component.html b/frontend/src/app/features/content/shared/forms/assets-editor.component.html
index b43b049a5..4c8e8c093 100644
--- a/frontend/src/app/features/content/shared/forms/assets-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/assets-editor.component.html
@@ -26,21 +26,21 @@
         <div class="btn-group">
             <button
                 class="btn btn-secondary btn-toggle"
+                attr.aria-label="{{ 'contents.assetsListView' | sqxTranslate }}"
                 [class.btn-primary]="snapshot.isListView"
                 (click)="changeView(true)"
                 [disabled]="snapshot.isListView"
                 type="button">
                 <i class="icon-list"></i>
-                <span class="visually-hidden">{{ "contents.assetsListView" | sqxTranslate }}</span>
             </button>
             <button
                 class="btn btn-secondary btn-toggle"
+                attr.aria-label="{{ 'contents.assetsGridView' | sqxTranslate }}"
                 [class.btn-primary]="!snapshot.isListView"
                 (click)="changeView(false)"
                 [disabled]="!snapshot.isListView"
                 type="button">
                 <i class="icon-grid"></i>
-                <span class="visually-hidden">{{ "contents.assetsGridView" | sqxTranslate }}</span>
             </button>
         </div>
     </div>
diff --git a/frontend/src/app/features/content/shared/forms/content-field.component.html b/frontend/src/app/features/content/shared/forms/content-field.component.html
index f486643af..f4c72c15d 100644
--- a/frontend/src/app/features/content/shared/forms/content-field.component.html
+++ b/frontend/src/app/features/content/shared/forms/content-field.component.html
@@ -59,9 +59,8 @@
             @if (!(isDisabled | async)) {
                 <div class="copy-button-container">
                     @if (isDifferent | async) {
-                        <button class="btn btn-primary btn-sm field-copy" (click)="copy()" type="button">
+                        <button class="btn btn-primary btn-sm field-copy" attr.aria-label="{{ 'common.copy' | sqxTranslate }}" (click)="copy()" type="button">
                             <i class="icon-arrow_back"></i>
-                            <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                         </button>
                     }
                 </div>
diff --git a/frontend/src/app/features/content/shared/forms/field-copy-button.component.html b/frontend/src/app/features/content/shared/forms/field-copy-button.component.html
index 1ba947009..64192102c 100644
--- a/frontend/src/app/features/content/shared/forms/field-copy-button.component.html
+++ b/frontend/src/app/features/content/shared/forms/field-copy-button.component.html
@@ -2,12 +2,12 @@
     <button
         class="btn btn-outline-secondary btn-sm dropdown-toggle"
         #button
+        attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
         (click)="dropdown.toggle()"
         tabindex="-1"
         title="{{ 'common.copy' | sqxTranslate }}"
         type="button">
         <i class="icon-copy"></i>
-        <span class="visually-hidden">{{ </span>
     </button>
     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="button" *sqxModal="dropdown">
         <div class="section d-flex justify-content-end">
diff --git a/frontend/src/app/features/content/shared/forms/stock-photo-editor.component.html b/frontend/src/app/features/content/shared/forms/stock-photo-editor.component.html
index a543eaa45..5b17a4a67 100644
--- a/frontend/src/app/features/content/shared/forms/stock-photo-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/stock-photo-editor.component.html
@@ -1,11 +1,14 @@
 <div class="input-group">
-    <button class="btn btn-outline-secondary" (click)="reset()" [disabled]="!valueControl.value" type="button">
+    <button
+        class="btn btn-outline-secondary"
+        attr.aria-label="{{ 'common.clear' | sqxTranslate }}"
+        (click)="reset()"
+        [disabled]="!valueControl.value"
+        type="button">
         <i class="icon-close"></i>
-        <span class="visually-hidden">{{ "common.clear" | sqxTranslate }}</span>
     </button>
-    <button class="btn btn-outline-secondary" (click)="searchDialog.show()" type="button">
+    <button class="btn btn-outline-secondary" attr.aria-label="{{ 'common.search' | sqxTranslate }}" (click)="searchDialog.show()" type="button">
         <i class="icon-search"></i>
-        <span class="visually-hidden">{{ "common.search" | sqxTranslate }}</span>
     </button>
 
     <input class="form-control" [disabled]="true" [formControl]="valueControl" readonly />
diff --git a/frontend/src/app/features/content/shared/list/content.component.html b/frontend/src/app/features/content/shared/list/content.component.html
index 480d3db7f..b8af8a9cd 100644
--- a/frontend/src/app/features/content/shared/list/content.component.html
+++ b/frontend/src/app/features/content/shared/list/content.component.html
@@ -7,13 +7,16 @@
 
         @if (isDirty) {
             <div class="edit-menu">
-                <button class="btn btn-text-secondary btn-cancel me-2" (click)="cancel()" sqxStopClick type="button">
+                <button
+                    class="btn btn-text-secondary btn-cancel me-2"
+                    attr.aria-label="{{ 'common.cancel' | sqxTranslate }}"
+                    (click)="cancel()"
+                    sqxStopClick
+                    type="button">
                     <i class="icon-close"></i>
-                    <span class="visually-hidden">{{ "common.cancel" | sqxTranslate }}</span>
                 </button>
-                <button class="btn btn-success" (click)="save()" sqxStopClick type="button">
+                <button class="btn btn-success" attr.aria-label="{{ 'common.save' | sqxTranslate }}" (click)="save()" sqxStopClick type="button">
                     <i class="icon-checkmark"></i>
-                    <span class="visually-hidden">{{ "common.save" | sqxTranslate }}</span>
                 </button>
             </div>
         }
diff --git a/frontend/src/app/features/content/shared/references/reference-item.component.html b/frontend/src/app/features/content/shared/references/reference-item.component.html
index 41c6b1ee4..ebe6a56d5 100644
--- a/frontend/src/app/features/content/shared/references/reference-item.component.html
+++ b/frontend/src/app/features/content/shared/references/reference-item.component.html
@@ -44,25 +44,32 @@
                 <i class="icon-dots"></i>
             </button>
             <div class="reference-menu">
-                <button class="btn btn-text-secondary" (click)="clone.emit()" title="{{ 'common.clone' | sqxTranslate }}" type="button">
+                <button
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'common.clone' | sqxTranslate }}"
+                    (click)="clone.emit()"
+                    title="{{ 'common.clone' | sqxTranslate }}"
+                    type="button">
                     <i class="icon-copy"></i>
-                    <span class="visually-hidden">{{ "common.clone" | sqxTranslate }}</span>
                 </button>
                 @if (canRemove) {
                     <button
                         class="btn btn-text-secondary"
+                        attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                         confirmRememberKey="removeReference"
                         confirmText="i18n:contents.removeConfirmText"
                         confirmTitle="i18n:contents.removeConfirmTitle"
                         (sqxConfirmClick)="delete.emit()"
                         type="button">
                         <i class="icon-close"></i>
-                        <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                     </button>
                 }
-                <a class="btn btn-text-secondary" [routerLink]="['../..', content.schemaName, content.id]" target="_blank">
+                <a
+                    class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'common.edit' | sqxTranslate }}"
+                    [routerLink]="['../..', content.schemaName, content.id]"
+                    target="_blank">
                     <i class="icon-pencil"></i>
-                    <span class="visually-hidden">{{ "common.edit" | sqxTranslate }}</span>
                 </a>
             </div>
         </div>
diff --git a/frontend/src/app/features/rules/pages/rule/rule-page.component.html b/frontend/src/app/features/rules/pages/rule/rule-page.component.html
index 6fa1b1c82..6543e4c01 100644
--- a/frontend/src/app/features/rules/pages/rule/rule-page.component.html
+++ b/frontend/src/app/features/rules/pages/rule/rule-page.component.html
@@ -14,6 +14,7 @@
         @if (isManual) {
             <button
                 class="btn btn-outline-secondary btn-run ms-2"
+                attr.aria-label="{{ 'rules.trigger' | sqxTranslate }}"
                 confirmRememberKey="triggerRule"
                 confirmText="i18n:rules.triggerConfirmText"
                 confirmTitle="i18n:rules.triggerConfirmTitle"
@@ -21,7 +22,6 @@
                 (sqxConfirmClick)="trigger()"
                 type="button">
                 <i class="icon-play-line"></i>
-                <span class="visually-hidden">{{ "rules.trigger" | sqxTranslate }}</span>
             </button>
         }
         <button class="btn btn-primary ms-2" (click)="save()" type="button">{{ "common.save" | sqxTranslate }}</button>
diff --git a/frontend/src/app/features/rules/pages/rules/rule.component.html b/frontend/src/app/features/rules/pages/rules/rule.component.html
index 488f35682..9a7a2297a 100644
--- a/frontend/src/app/features/rules/pages/rules/rule.component.html
+++ b/frontend/src/app/features/rules/pages/rules/rule.component.html
@@ -117,6 +117,7 @@
                 @if (rule.canTrigger) {
                     <button
                         class="btn btn-outline-secondary btn-run"
+                        attr.aria-label="{{ 'rules.trigger' | sqxTranslate }}"
                         confirmRememberKey="triggerRule"
                         confirmText="i18n:rules.triggerConfirmText"
                         confirmTitle="i18n:rules.triggerConfirmTitle"
@@ -124,7 +125,6 @@
                         (sqxConfirmClick)="trigger()"
                         type="button">
                         <i class="icon-play-line"></i>
-                        <span class="visually-hidden">{{ "rules.trigger" | sqxTranslate }}</span>
                     </button>
                 } @else {
                     <sqx-toggle [disabled]="!rule.canDisable && !rule.canEnable" [ngModel]="rule.isEnabled" (ngModelChange)="toggle()" />
diff --git a/frontend/src/app/features/rules/shared/rule-element.component.html b/frontend/src/app/features/rules/shared/rule-element.component.html
index 7a1700909..9f853a201 100644
--- a/frontend/src/app/features/rules/shared/rule-element.component.html
+++ b/frontend/src/app/features/rules/shared/rule-element.component.html
@@ -10,13 +10,13 @@
             @if (showRemove) {
                 <button
                     class="btn btn-sm rounded-full btn-outline-danger"
+                    attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                     confirmText="i18n:rules.removeElementText"
                     confirmTitle="i18n:rules.removeElementTitle"
                     (sqxConfirmClick)="remove.emit()"
                     sqxStopClick=""
                     type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                 </button>
             }
         </div>
diff --git a/frontend/src/app/features/rules/shared/triggers/content-changed-schema.component.html b/frontend/src/app/features/rules/shared/triggers/content-changed-schema.component.html
index 52cbee05d..7e0dc361f 100644
--- a/frontend/src/app/features/rules/shared/triggers/content-changed-schema.component.html
+++ b/frontend/src/app/features/rules/shared/triggers/content-changed-schema.component.html
@@ -20,6 +20,7 @@
     <div class="col-auto">
         <button
             class="btn btn-text-danger"
+            attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
             confirmRememberKey="deleteContentChangedSchema"
             confirmText="i18n:rules.deleteContentChangedSchemaText"
             confirmTitle="i18n:rules.deleteContentChangedSchemaTitle"
@@ -27,7 +28,6 @@
             (sqxConfirmClick)="remove.emit()"
             type="button">
             <i class="icon-bin2"></i>
-            <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
         </button>
     </div>
 </div>
diff --git a/frontend/src/app/features/rules/shared/triggers/content-changed-trigger.component.html b/frontend/src/app/features/rules/shared/triggers/content-changed-trigger.component.html
index e14183ff4..516bcca36 100644
--- a/frontend/src/app/features/rules/shared/triggers/content-changed-trigger.component.html
+++ b/frontend/src/app/features/rules/shared/triggers/content-changed-trigger.component.html
@@ -22,9 +22,8 @@
                     </div>
 
                     <div class="col-auto">
-                        <button class="btn btn-success" (click)="addSchema()" type="button">
+                        <button class="btn btn-success" attr.aria-label="{{ 'rules.schemas.addSchema' | sqxTranslate }}" (click)="addSchema()" type="button">
                             <i class="icon-add"></i>
-                            <span class="visually-hidden">{{ "rules.schemas.addSchema" | sqxTranslate }}</span>
                         </button>
                     </div>
                 </div>
@@ -62,9 +61,12 @@
             </div>
 
             <div class="col-auto">
-                <button class="btn btn-success" (click)="addReferencedSchema()" type="button">
+                <button
+                    class="btn btn-success"
+                    attr.aria-label="{{ 'rules.addReferencedSchema' | sqxTranslate }}"
+                    (click)="addReferencedSchema()"
+                    type="button">
                     <i class="icon-add"></i>
-                    <span class="visually-hidden">{{ "rules.addReferencedSchema" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
diff --git a/frontend/src/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html b/frontend/src/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
index ea9312ef0..bb86cf4cb 100644
--- a/frontend/src/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
+++ b/frontend/src/app/features/schemas/pages/schema/preview/schema-preview-urls-form.component.html
@@ -28,6 +28,7 @@
                         <div class="col-auto">
                             <button
                                 class="btn btn-text-danger"
+                                attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                                 confirmRememberKey="removePreviewUrl"
                                 confirmText="i18n:schemas.deleteUrlConfirmText"
                                 confirmTitle="i18n:schemas.deleteUrlConfirmTitle"
@@ -35,7 +36,6 @@
                                 (sqxConfirmClick)="editForm.form.removeAt(i)"
                                 type="button">
                                 <i class="icon-bin2"></i>
-                                <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                             </button>
                         </div>
                     </div>
@@ -52,9 +52,12 @@
                         </div>
 
                         <div class="col-auto col-options">
-                            <button class="btn btn-success" (click)="editForm.form.add()" type="button">
+                            <button
+                                class="btn btn-success"
+                                attr.aria-label="{{ 'schemas.previewUrls.add' | sqxTranslate }}"
+                                (click)="editForm.form.add()"
+                                type="button">
                                 <i class="icon-add"></i>
-                                <span class="visually-hidden">{{ "schemas.previewUrls.add" | sqxTranslate }}</span>
                             </button>
                         </div>
                     </div>
diff --git a/frontend/src/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html b/frontend/src/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html
index 08863ba7a..70bee1023 100644
--- a/frontend/src/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html
+++ b/frontend/src/app/features/schemas/pages/schema/rules/schema-field-rules-form.component.html
@@ -40,6 +40,7 @@
                         <div class="col-auto">
                             <button
                                 class="btn btn-text-danger"
+                                attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                                 confirmRememberKey="deleteFieldRule"
                                 confirmText="i18n:schemas.deleteRuleConfirmText"
                                 confirmTitle="i18n:schemas.deleteRuleConfirmTitle"
@@ -47,7 +48,6 @@
                                 (sqxConfirmClick)="editForm.remove(i)"
                                 type="button">
                                 <i class="icon-bin2"></i>
-                                <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                             </button>
                         </div>
                     </div>
@@ -72,9 +72,8 @@
                         </div>
 
                         <div class="col-auto">
-                            <button class="btn btn-success" (click)="add()" type="button">
+                            <button class="btn btn-success" attr.aria-label="{{ 'schemas.rules.add' | sqxTranslate }}" (click)="add()" type="button">
                                 <i class="icon-add"></i>
-                                <span class="visually-hidden">{{ "schemas.rules.add" | sqxTranslate }}</span>
                             </button>
                         </div>
                     </div>
diff --git a/frontend/src/app/features/schemas/pages/schema/schema-page.component.html b/frontend/src/app/features/schemas/pages/schema/schema-page.component.html
index 9ad2c1121..a88d31877 100644
--- a/frontend/src/app/features/schemas/pages/schema/schema-page.component.html
+++ b/frontend/src/app/features/schemas/pages/schema/schema-page.component.html
@@ -4,14 +4,14 @@
         <ng-container title>
             <ul class="nav nav-tabs2">
                 <li class="nav-item">
-                    <a class="nav-link" [class.active]="tab === 'fields'" [queryParams]="{ tab: 'fields' }" [routerLink]="[]">
+                    <a class="nav-link" [class.active]="tab === 'fields'" [queryParams]="{ tab: 'fields' }" queryParamsHandling="merge" [routerLink]="[]">
                         {{ "schemas.tabFields" | sqxTranslate }}
                     </a>
                 </li>
 
                 @if (schema.type !== "Component") {
                     <li>
-                        <a class="nav-link" [class.active]="tab === 'ui'" [queryParams]="{ tab: 'ui' }" [routerLink]="[]">
+                        <a class="nav-link" [class.active]="tab === 'ui'" [queryParams]="{ tab: 'ui' }" queryParamsHandling="merge" [routerLink]="[]">
                             {{ "schemas.tabUI" | sqxTranslate }}
                         </a>
                     </li>
@@ -19,28 +19,28 @@
 
                 @if (schema.type !== "Component") {
                     <li>
-                        <a class="nav-link" [class.active]="tab === 'scripts'" [queryParams]="{ tab: 'scripts' }" [routerLink]="[]">
+                        <a class="nav-link" [class.active]="tab === 'scripts'" [queryParams]="{ tab: 'scripts' }" queryParamsHandling="merge" [routerLink]="[]">
                             {{ "schemas.tabScripts" | sqxTranslate }}
                         </a>
                     </li>
                 }
 
                 <li>
-                    <a class="nav-link" [class.active]="tab === 'json'" [queryParams]="{ tab: 'json' }" [routerLink]="[]">
+                    <a class="nav-link" [class.active]="tab === 'json'" [queryParams]="{ tab: 'json' }" queryParamsHandling="merge" [routerLink]="[]">
                         {{ "schemas.tabJson" | sqxTranslate }}
                     </a>
                 </li>
 
                 @if (!hideIndexes) {
                     <li>
-                        <a class="nav-link" [class.active]="tab === 'indexes'" [queryParams]="{ tab: 'indexes' }" [routerLink]="[]">
+                        <a class="nav-link" [class.active]="tab === 'indexes'" [queryParams]="{ tab: 'indexes' }" queryParamsHandling="merge" [routerLink]="[]">
                             {{ "schemas.tabIndexes" | sqxTranslate }}
                         </a>
                     </li>
                 }
 
                 <li>
-                    <a class="nav-link" [class.active]="tab === 'more'" [queryParams]="{ tab: 'more' }" [routerLink]="[]">
+                    <a class="nav-link" [class.active]="tab === 'more'" [queryParams]="{ tab: 'more' }" queryParamsHandling="merge" [routerLink]="[]">
                         {{ "schemas.tabMore" | sqxTranslate }}
                     </a>
                 </li>
diff --git a/frontend/src/app/features/settings/pages/clients/client.component.html b/frontend/src/app/features/settings/pages/clients/client.component.html
index 92283bce0..f9805c51d 100644
--- a/frontend/src/app/features/settings/pages/clients/client.component.html
+++ b/frontend/src/app/features/settings/pages/clients/client.component.html
@@ -14,6 +14,7 @@
             <div class="col-auto">
                 <button
                     class="btn btn-text-danger"
+                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                     confirmRememberKey="revokeClient"
                     confirmText="i18n:clients.deleteConfirmText"
                     confirmTitle="i18n:clients.deleteConfirmTitle"
@@ -21,7 +22,6 @@
                     (sqxConfirmClick)="revoke()"
                     type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
diff --git a/frontend/src/app/features/settings/pages/contributors/contributor.component.html b/frontend/src/app/features/settings/pages/contributors/contributor.component.html
index aa1e1c31c..5d0595e49 100644
--- a/frontend/src/app/features/settings/pages/contributors/contributor.component.html
+++ b/frontend/src/app/features/settings/pages/contributors/contributor.component.html
@@ -16,6 +16,7 @@
     <td class="cell-actions">
         <button
             class="btn btn-text-danger"
+            attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
             confirmRememberKey="removeContributor"
             confirmText="i18n:contributors.deleteConfirmText"
             confirmTitle="i18n:contributors.deleteConfirmTitle"
@@ -23,7 +24,6 @@
             (sqxConfirmClick)="remove()"
             type="button">
             <i class="icon-bin2"></i>
-            <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
         </button>
     </td>
 </tr>
diff --git a/frontend/src/app/features/settings/pages/jobs/job.component.html b/frontend/src/app/features/settings/pages/jobs/job.component.html
index d7b459224..f284586af 100644
--- a/frontend/src/app/features/settings/pages/jobs/job.component.html
+++ b/frontend/src/app/features/settings/pages/jobs/job.component.html
@@ -25,17 +25,18 @@
             <div class="col-options text-right">
                 <a
                     class="btn btn-text-secondary"
+                    attr.aria-label="{{ 'common.download' | sqxTranslate }}"
                     [class.invisible]="!job.downloadUrl"
                     href="{{ apiUrl.buildUrl(job.downloadUrl || '') }}"
                     sqxExternalLink="noicon">
                     <i class="icon-download"></i>
-                    <span class="visually-hidden">{{ "common.download" | sqxTranslate }}</span>
                 </a>
                 <button class="btn btn-outline-secondary btn-expand ms-1" [class.expanded]="isExpanded" (click)="toggleExpanded()" type="button">
                     <span class="hidden">{{ "common.settings" | sqxTranslate }}</span> <i class="icon-settings"></i>
                 </button>
                 <button
                     class="btn btn-text-danger ms-1"
+                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                     confirmRememberKey="deleteBackup"
                     confirmText="i18n:jobs.deleteConfirmText"
                     confirmTitle="i18n:jobs.deleteConfirmTitle"
@@ -43,7 +44,6 @@
                     (sqxConfirmClick)="delete()"
                     type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
diff --git a/frontend/src/app/features/settings/pages/languages/language.component.html b/frontend/src/app/features/settings/pages/languages/language.component.html
index 3093d4775..b0d44f6f8 100644
--- a/frontend/src/app/features/settings/pages/languages/language.component.html
+++ b/frontend/src/app/features/settings/pages/languages/language.component.html
@@ -72,9 +72,12 @@
 
                                                 @if (isEditable) {
                                                     <div class="col-auto">
-                                                        <button class="btn btn-text-secondary btn-sm" (click)="removeFallbackLanguage(language)" type="button">
+                                                        <button
+                                                            class="btn btn-text-secondary btn-sm"
+                                                            attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
+                                                            (click)="removeFallbackLanguage(language)"
+                                                            type="button">
                                                             <i class="icon-close"></i>
-                                                            <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                                                         </button>
                                                     </div>
                                                 }
diff --git a/frontend/src/app/features/settings/pages/more/more-page.component.html b/frontend/src/app/features/settings/pages/more/more-page.component.html
index ea7565628..4c518b1f4 100644
--- a/frontend/src/app/features/settings/pages/more/more-page.component.html
+++ b/frontend/src/app/features/settings/pages/more/more-page.component.html
@@ -50,11 +50,11 @@
                                             @if (isEditableImage && app.image) {
                                                 <button
                                                     class="btn btn-danger btn-sm app-image-remove"
+                                                    attr.aria-label="{{ 'apps.removeImage' | sqxTranslate }}"
                                                     (click)="removeImage()"
                                                     title="i18n:apps.removeImage"
                                                     type="button">
                                                     <i class="icon-bin2"></i>
-                                                    <span class="visually-hidden">{{ "apps.removeImage" | sqxTranslate }}</span>
                                                 </button>
                                             }
                                         </div>
diff --git a/frontend/src/app/features/settings/pages/roles/role.component.html b/frontend/src/app/features/settings/pages/roles/role.component.html
index 25f87cdad..03ccdd98f 100644
--- a/frontend/src/app/features/settings/pages/roles/role.component.html
+++ b/frontend/src/app/features/settings/pages/roles/role.component.html
@@ -23,6 +23,7 @@
                 </button>
                 <button
                     class="btn btn-text-danger"
+                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                     confirmRememberKey="deleteRole"
                     confirmText="i18n:roles.deleteConfirmText"
                     confirmTitle="i18n:roles.deleteConfirmTitle"
@@ -30,7 +31,6 @@
                     (sqxConfirmClick)="delete()"
                     type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
@@ -63,9 +63,12 @@
 
                                 @if (isEditable) {
                                     <div class="col-auto">
-                                        <button class="btn btn-text-danger" (click)="editForm.form.removeAt(i)" type="button">
+                                        <button
+                                            class="btn btn-text-danger"
+                                            attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
+                                            (click)="editForm.form.removeAt(i)"
+                                            type="button">
                                             <i class="icon-bin2"></i>
-                                            <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                                         </button>
                                     </div>
                                 }
@@ -91,9 +94,12 @@
                             </div>
 
                             <div class="col-auto">
-                                <button class="btn btn-success col-action" (click)="addPermission()" type="button">
+                                <button
+                                    class="btn btn-success col-action"
+                                    attr.aria-label="{{ 'roles.addPermission' | sqxTranslate }}"
+                                    (click)="addPermission()"
+                                    type="button">
                                     <i class="icon-plus"></i>
-                                    <span class="visually-hidden">{{ "roles.addPermission" | sqxTranslate }}</span>
                                 </button>
                             </div>
                         </div>
diff --git a/frontend/src/app/features/settings/pages/workflows/workflow-step.component.html b/frontend/src/app/features/settings/pages/workflows/workflow-step.component.html
index cb7a5e047..303096aca 100644
--- a/frontend/src/app/features/settings/pages/workflows/workflow-step.component.html
+++ b/frontend/src/app/features/settings/pages/workflows/workflow-step.component.html
@@ -41,9 +41,13 @@
 
         <div class="col-auto">
             @if (!step.isLocked && workflow.steps.length > 2) {
-                <button class="btn btn-text-danger" (click)="remove()" [disabled]="disabled" type="button">
+                <button
+                    class="btn btn-text-danger"
+                    attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
+                    (click)="remove()"
+                    [disabled]="disabled"
+                    type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                 </button>
             }
         </div>
@@ -71,9 +75,12 @@
                 </div>
 
                 <div class="col ps-2">
-                    <button class="btn btn-outline-secondary" (click)="addTransition(openStep.name)" type="button">
+                    <button
+                        class="btn btn-outline-secondary"
+                        attr.aria-label="{{ 'workflows.addTransition' | sqxTranslate }}"
+                        (click)="addTransition(openStep.name)"
+                        type="button">
                         <i class="icon-plus"></i>
-                        <span class="visually-hidden">{{ "workflows.addTransition" | sqxTranslate }}</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/src/app/features/settings/pages/workflows/workflow-transition.component.html b/frontend/src/app/features/settings/pages/workflows/workflow-transition.component.html
index 5ea012b90..1375abefb 100644
--- a/frontend/src/app/features/settings/pages/workflows/workflow-transition.component.html
+++ b/frontend/src/app/features/settings/pages/workflows/workflow-transition.component.html
@@ -39,9 +39,8 @@
     </div>
 
     <div class="col col-button ps-2">
-        <button class="btn btn-text-danger" (click)="remove()" [disabled]="disabled" type="button">
+        <button class="btn btn-text-danger" attr.aria-label="{{ 'common.remove' | sqxTranslate }}" (click)="remove()" [disabled]="disabled" type="button">
             <i class="icon-bin2"></i>
-            <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
         </button>
     </div>
 </div>
diff --git a/frontend/src/app/features/settings/pages/workflows/workflow.component.html b/frontend/src/app/features/settings/pages/workflows/workflow.component.html
index 629639a60..f16e5ca9a 100644
--- a/frontend/src/app/features/settings/pages/workflows/workflow.component.html
+++ b/frontend/src/app/features/settings/pages/workflows/workflow.component.html
@@ -20,6 +20,7 @@
                 </button>
                 <button
                     class="btn btn-text-danger"
+                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                     confirmRememberKey="deleteWorkflow"
                     confirmText="i18n:workflows.deleteConfirmText"
                     confirmTitle="i18n:workflows.deleteConfirmTitle"
@@ -27,7 +28,6 @@
                     (sqxConfirmClick)="remove()"
                     type="button">
                     <i class="icon-bin2"></i>
-                    <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                 </button>
             </div>
         </div>
diff --git a/frontend/src/app/features/teams/pages/auth/auth-page.component.html b/frontend/src/app/features/teams/pages/auth/auth-page.component.html
index 03fe9477f..1b29dd9f2 100644
--- a/frontend/src/app/features/teams/pages/auth/auth-page.component.html
+++ b/frontend/src/app/features/teams/pages/auth/auth-page.component.html
@@ -53,9 +53,12 @@
                                 <sqx-form-row for="redirectUrl" label="teams.auth.redirectUrl">
                                     <div class="input-group">
                                         <input class="form-control" #redirectUri readonly value="{{ urlToRedirect }}" />
-                                        <button class="btn btn-outline-secondary" [sqxCopy]="redirectUri" type="button">
+                                        <button
+                                            class="btn btn-outline-secondary"
+                                            attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
+                                            [sqxCopy]="redirectUri"
+                                            type="button">
                                             <i class="icon-copy"></i>
-                                            <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                                         </button>
                                     </div>
                                 </sqx-form-row>
diff --git a/frontend/src/app/features/teams/pages/contributors/contributor.component.html b/frontend/src/app/features/teams/pages/contributors/contributor.component.html
index d0fd275a6..519d815be 100644
--- a/frontend/src/app/features/teams/pages/contributors/contributor.component.html
+++ b/frontend/src/app/features/teams/pages/contributors/contributor.component.html
@@ -8,6 +8,7 @@
     <td class="cell-actions">
         <button
             class="btn btn-text-danger"
+            attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
             confirmRememberKey="removeContributor"
             confirmText="i18n:contributors.deleteConfirmText"
             confirmTitle="i18n:contributors.deleteConfirmTitle"
@@ -15,7 +16,6 @@
             (sqxConfirmClick)="remove()"
             type="button">
             <i class="icon-bin2"></i>
-            <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
         </button>
     </td>
 </tr>
diff --git a/frontend/src/app/framework/angular/code.component.html b/frontend/src/app/framework/angular/code.component.html
index d86cc2b1a..51cb670e1 100644
--- a/frontend/src/app/framework/angular/code.component.html
+++ b/frontend/src/app/framework/angular/code.component.html
@@ -1,7 +1,6 @@
 <div class="code-container">
-    <button class="code-copy" [attr.copy]="id" type="button">
+    <button class="code-copy" attr.aria-label="{{ 'common.copy' | sqxTranslate }}" [attr.copy]="id" type="button">
         <i class="icon-copy"></i>
-        <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
     </button>
     <pre class="code" [attr.id]="id"><ng-content></ng-content></pre>
 </div>
diff --git a/frontend/src/app/framework/angular/forms/editors/date-time-editor.component.html b/frontend/src/app/framework/angular/forms/editors/date-time-editor.component.html
index bcec6dcb1..63bfc5be1 100644
--- a/frontend/src/app/framework/angular/forms/editors/date-time-editor.component.html
+++ b/frontend/src/app/framework/angular/forms/editors/date-time-editor.component.html
@@ -55,9 +55,14 @@
     }
 
     @if (!hideClear) {
-        <button class="btn btn-text-secondary btn-clear" [class.invisible]="!hasValue" (click)="reset()" [disabled]="snapshot.isDisabled" type="button">
+        <button
+            class="btn btn-text-secondary btn-clear"
+            attr.aria-label="{{ 'common.clear' | sqxTranslate }}"
+            [class.invisible]="!hasValue"
+            (click)="reset()"
+            [disabled]="snapshot.isDisabled"
+            type="button">
             <i class="icon-close"></i>
-            <span class="visually-hidden">{{ "common.clear" | sqxTranslate }}</span>
         </button>
     }
 </div>
diff --git a/frontend/src/app/framework/angular/forms/editors/localized-input.component.html b/frontend/src/app/framework/angular/forms/editors/localized-input.component.html
index 36fad25a8..971e8685e 100644
--- a/frontend/src/app/framework/angular/forms/editors/localized-input.component.html
+++ b/frontend/src/app/framework/angular/forms/editors/localized-input.component.html
@@ -4,9 +4,8 @@
     </div>
 
     <div class="col-auto">
-        <button class="btn btn-sm btn-secondary" (click)="unset()" [disabled]="isEmpty" type="button">
+        <button class="btn btn-sm btn-secondary" attr.aria-label="{{ 'common.clear' | sqxTranslate }}" (click)="unset()" [disabled]="isEmpty" type="button">
             <i class="icon-close"></i>
-            <span class="visually-hidden">{{ "common.clear" | sqxTranslate }}</span>
         </button>
     </div>
 </div>
diff --git a/frontend/src/app/framework/angular/layout.component.html b/frontend/src/app/framework/angular/layout.component.html
index 72b60b474..97f76e4df 100644
--- a/frontend/src/app/framework/angular/layout.component.html
+++ b/frontend/src/app/framework/angular/layout.component.html
@@ -21,14 +21,17 @@
                     </div>
 
                     @if (route) {
-                        <a class="btn panel2-collapse" [queryParamsHandling]="closeQueryParamsHandling" [relativeTo]="route" [routerLink]="['./../']">
+                        <a
+                            class="btn panel2-collapse"
+                            attr.aria-label="{{ 'common.close' | sqxTranslate }}"
+                            [queryParamsHandling]="closeQueryParamsHandling"
+                            [relativeTo]="route"
+                            [routerLink]="['./../']">
                             <i class="icon-close"></i>
-                            <span class="visually-hidden">{{ "common.close" | sqxTranslate }}</span>
                         </a>
                     } @else {
-                        <button class="btn panel2-collapse" type="button">
+                        <button class="btn panel2-collapse" attr.aria-label="{{ 'common.close' | sqxTranslate }}" type="button">
                             <i class="icon-close"></i>
-                            <span class="visually-hidden">{{ "common.close" | sqxTranslate }}</span>
                         </button>
                     }
                 </div>
@@ -132,13 +135,13 @@
                     @if (firstChild | async) {
                         <a
                             class="btn panel2-collapse"
+                            attr.aria-label="{{ 'common.close' | sqxTranslate }}"
                             [queryParamsHandling]="closeQueryParamsHandling"
                             [relativeTo]="route"
                             replaceUrl="true"
                             [routerLink]="['./']">
-                            <i class="icon-angle-right"></i>
-                            <span class="visually-hidden">{{ "common.close" | sqxTranslate }}</span></a
-                        >
+                            <i class="icon-angle-right"></i
+                        ></a>
                     }
                 </div>
 
diff --git a/frontend/src/app/shared/components/assets/asset-dialog.component.html b/frontend/src/app/shared/components/assets/asset-dialog.component.html
index f987e775d..26a4fed6e 100644
--- a/frontend/src/app/shared/components/assets/asset-dialog.component.html
+++ b/frontend/src/app/shared/components/assets/asset-dialog.component.html
@@ -68,6 +68,7 @@
                                 type="button"
                                 type="button"
                                 type="button"
+                                type="button"
                                 type="button">
                                 {{ "common.upload" | sqxTranslate }}
                             </button>
@@ -127,9 +128,12 @@
                         <sqx-form-row for="id" hideError label="common.id" vertical>
                             <div class="input-group">
                                 <input class="form-control" id="id" #inputId name="id" readonly value="{{ asset.id }}" />
-                                <button class="btn btn-outline-secondary" [sqxCopy]="inputId" type="button">
+                                <button
+                                    class="btn btn-outline-secondary"
+                                    attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
+                                    [sqxCopy]="inputId"
+                                    type="button">
                                     <i class="icon-copy"></i>
-                                    <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                                 </button>
                             </div>
                         </sqx-form-row>
@@ -137,9 +141,12 @@
                         <sqx-form-row for="url" hideError label="common.url" vertical>
                             <div class="input-group">
                                 <input class="form-control" id="url" #inputUrl name="url" readonly value="{{ asset | sqxAssetUrl: asset.version : false }}" />
-                                <button class="btn btn-outline-secondary" [sqxCopy]="inputUrl" type="button">
+                                <button
+                                    class="btn btn-outline-secondary"
+                                    attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
+                                    [sqxCopy]="inputUrl"
+                                    type="button">
                                     <i class="icon-copy"></i>
-                                    <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                                 </button>
                             </div>
                         </sqx-form-row>
@@ -182,6 +189,7 @@
                                     <div class="col-auto col-options">
                                         <button
                                             class="btn btn-text-danger"
+                                            attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                                             confirmRememberKey="removeAssetMetadata"
                                             confirmText="i18n:assets.deleteMetadataConfirmText"
                                             confirmTitle="i18n:assets.deleteMetadataConfirmTitle"
@@ -189,7 +197,6 @@
                                             (sqxConfirmClick)="annotateForm.metadata.removeAt(i)"
                                             type="button">
                                             <i class="icon-bin2"></i>
-                                            <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                                         </button>
                                     </div>
                                 </div>
diff --git a/frontend/src/app/shared/components/assets/asset-selector.component.html b/frontend/src/app/shared/components/assets/asset-selector.component.html
index 268b4a1a9..abdec5eec 100644
--- a/frontend/src/app/shared/components/assets/asset-selector.component.html
+++ b/frontend/src/app/shared/components/assets/asset-selector.component.html
@@ -3,9 +3,8 @@
     <ng-container tabs>
         <div class="row gx-2 mt-3 mb-3">
             <div class="col-auto">
-                <button class="btn btn-text-secondary" (click)="reload()" type="button">
+                <button class="btn btn-text-secondary" attr.aria-label="{{ 'common.refresh' | sqxTranslate }}" (click)="reload()" type="button">
                     <i class="icon-reset"></i>
-                    <span class="visually-hidden">{{ "common.refresh" | sqxTranslate }}</span>
                 </button>
             </div>
 
@@ -38,21 +37,21 @@
                 <div class="btn-group" data-toggle="buttons">
                     <button
                         class="btn btn-secondary btn-toggle"
+                        attr.aria-label="{{ 'assets.listView' | sqxTranslate }}"
                         [class.btn-primary]="snapshot.isListView"
                         (click)="changeView(true)"
                         [disabled]="snapshot.isListView"
                         type="button">
                         <i class="icon-list"></i>
-                        <span class="visually-hidden">{{ "assets.listView" | sqxTranslate }}</span>
                     </button>
                     <button
                         class="btn btn-secondary btn-toggle"
+                        attr.aria-label="{{ 'assets.gridView' | sqxTranslate }}"
                         [class.btn-primary]="!snapshot.isListView"
                         (click)="changeView(false)"
                         [disabled]="!snapshot.isListView"
                         type="button">
                         <i class="icon-grid"></i>
-                        <span class="visually-hidden">{{ "assets.gridView" | sqxTranslate }}</span>
                     </button>
                 </div>
             </div>
diff --git a/frontend/src/app/shared/components/assets/asset-uploader.component.html b/frontend/src/app/shared/components/assets/asset-uploader.component.html
index 0d956bb8b..7f46fc031 100644
--- a/frontend/src/app/shared/components/assets/asset-uploader.component.html
+++ b/frontend/src/app/shared/components/assets/asset-uploader.component.html
@@ -45,9 +45,12 @@
                                     </div>
 
                                     <div class="col-auto">
-                                        <button class="btn btn-text-secondary" (click)="stopUpload(upload)" type="button">
+                                        <button
+                                            class="btn btn-text-secondary"
+                                            attr.aria-label="{{ 'common.copy' | sqxTranslate }}"
+                                            (click)="stopUpload(upload)"
+                                            type="button">
                                             <i class="icon-close"></i>
-                                            <span class="visually-hidden">{{ "common.copy" | sqxTranslate }}</span>
                                         </button>
                                     </div>
                                 </div>
diff --git a/frontend/src/app/shared/components/assets/asset.component.html b/frontend/src/app/shared/components/assets/asset.component.html
index 50be2f4f4..6faff8f31 100644
--- a/frontend/src/app/shared/components/assets/asset.component.html
+++ b/frontend/src/app/shared/components/assets/asset.component.html
@@ -38,9 +38,12 @@
                                 <i class="icon-download"></i>
                             </a>
                             @if (folderIcon) {
-                                <button class="file-folder ms-2" (click)="selectFolder.emit(asset.parentId)" type="button">
+                                <button
+                                    class="file-folder ms-2"
+                                    attr.aria-label="{{ 'assets.openFolder' | sqxTranslate }}"
+                                    (click)="selectFolder.emit(asset.parentId)"
+                                    type="button">
                                     <i class="icon-folder"></i>
-                                    <span class="visually-hidden">{{ "assets.openFolder" | sqxTranslate }}</span>
                                 </button>
                             }
 
@@ -154,14 +157,21 @@
                         </td>
 
                         <td class="col-actions text-end">
-                            <a class="btn btn-text-secondary" [href]="asset | sqxAssetUrl: asset.version : false" sqxExternalLink="noicon" sqxStopClick>
-                                <i class="icon-download"></i>
-                                <span class="visually-hidden">{{ "common.download" | sqxTranslate }}</span></a
-                            >
+                            <a
+                                class="btn btn-text-secondary"
+                                attr.aria-label="{{ 'common.download' | sqxTranslate }}"
+                                [href]="asset | sqxAssetUrl: asset.version : false"
+                                sqxExternalLink="noicon"
+                                sqxStopClick>
+                                <i class="icon-download"></i
+                            ></a>
                             @if (folderIcon) {
-                                <button class="btn btn-text-secondary" (click)="selectFolder.emit(asset.parentId)" type="button">
+                                <button
+                                    class="btn btn-text-secondary"
+                                    attr.aria-label="{{ 'assets.openFolder' | sqxTranslate }}"
+                                    (click)="selectFolder.emit(asset.parentId)"
+                                    type="button">
                                     <i class="icon-folder"></i>
-                                    <span class="visually-hidden">{{ "assets.openFolder" | sqxTranslate }}</span>
                                 </button>
                             }
                         </td>
@@ -171,6 +181,7 @@
                         @if (!isDisabled && !removeMode && asset.canDelete) {
                             <button
                                 class="btn btn-text-danger"
+                                attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                                 confirmRememberKey="deleteAsset"
                                 confirmText="i18n:assets.deleteConfirmText"
                                 confirmTitle="i18n:assets.deleteConfirmTitle"
@@ -178,13 +189,13 @@
                                 (sqxConfirmClick)="delete.emit()"
                                 type="button">
                                 <i class="icon-bin2"></i>
-                                <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                             </button>
                         }
 
                         @if (!isDisabled && removeMode) {
                             <button
                                 class="btn btn-text-secondary"
+                                attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                                 confirmRememberKey="removeAsset"
                                 confirmText="i18n:assets.removeConfirmText"
                                 confirmTitle="i18n:assets.removeConfirmTitle"
@@ -192,7 +203,6 @@
                                 (sqxConfirmClick)="remove.emit()"
                                 type="button">
                                 <i class="icon-close"></i>
-                                <span class="visually-hidden">{{ "common.remove" | sqxTranslate }}</span>
                             </button>
                         }
                     </td>
diff --git a/frontend/src/app/shared/components/assets/image-cropper.component.html b/frontend/src/app/shared/components/assets/image-cropper.component.html
index d3ae3c458..868e618f1 100644
--- a/frontend/src/app/shared/components/assets/image-cropper.component.html
+++ b/frontend/src/app/shared/components/assets/image-cropper.component.html
@@ -1,25 +1,40 @@
 <div class="menu">
-    <button class="btn" (click)="rotate(-90)" title="i18n:assets.editor.rotateLeft" type="button">
+    <button
+        class="btn"
+        attr.aria-label="{{ 'assets.editor.rotateLeft' | sqxTranslate }}"
+        (click)="rotate(-90)"
+        title="i18n:assets.editor.rotateLeft"
+        type="button">
         <i class="icon-rotate_left"></i>
-        <span class="visually-hidden">{{ "assets.editor.rotateLeft" | sqxTranslate }}</span>
     </button>
-    <button class="btn" (click)="rotate(90)" title="i18n:assets.editor.rotateRight" type="button">
+    <button
+        class="btn"
+        attr.aria-label="{{ 'assets.editor.rotateRight' | sqxTranslate }}"
+        (click)="rotate(90)"
+        title="i18n:assets.editor.rotateRight"
+        type="button">
         <i class="icon-rotate_right"></i>
-        <span class="visually-hidden">{{ "assets.editor.rotateRight" | sqxTranslate }}</span>
     </button>
     <span class="separator"></span>
-    <button class="btn" (click)="flip(false)" title="i18n:assets.editor.flipVertically" type="button">
+    <button
+        class="btn"
+        attr.aria-label="{{ 'assets.editor.flipVertically' | sqxTranslate }}"
+        (click)="flip(false)"
+        title="i18n:assets.editor.flipVertically"
+        type="button">
         <i class="icon-flip"></i>
-        <span class="visually-hidden">{{ "assets.editor.flipVertically" | sqxTranslate }}</span>
     </button>
-    <button class="btn rotate 90" (click)="flip(true)" title="i18n:assets.editor.flipHorizontally" type="button">
+    <button
+        class="btn rotate 90"
+        attr.aria-label="{{ 'assets.editor.flipHorizontally' | sqxTranslate }}"
+        (click)="flip(true)"
+        title="i18n:assets.editor.flipHorizontally"
+        type="button">
         <i class="icon-flip"></i>
-        <span class="visually-hidden">{{ "assets.editor.flipHorizontally" | sqxTranslate }}</span>
     </button>
     <span class="separator"></span>
-    <button class="btn" (click)="reset()" title="i18n:common.reset" type="button">
+    <button class="btn" attr.aria-label="{{ 'common.reset' | sqxTranslate }}" (click)="reset()" title="i18n:common.reset" type="button">
         <i class="icon-close"></i>
-        <span class="visually-hidden">{{ "common.reset" | sqxTranslate }}</span>
     </button>
 </div>
 
diff --git a/frontend/src/app/shared/components/comments/comment.component.html b/frontend/src/app/shared/components/comments/comment.component.html
index 971f1d5b6..a51672a95 100644
--- a/frontend/src/app/shared/components/comments/comment.component.html
+++ b/frontend/src/app/shared/components/comments/comment.component.html
@@ -32,16 +32,19 @@
 
                 <div class="d-flex">
                     @if (canAnswer) {
-                        <button class="btn btn-sm btn-text-secondary" (click)="startReply()" title="{{ 'comments.reply' | sqxTranslate }}" type="button">
+                        <button
+                            class="btn btn-sm btn-text-secondary"
+                            attr.aria-label="{{ 'comments.reply' | sqxTranslate }}"
+                            (click)="startReply()"
+                            title="{{ 'comments.reply' | sqxTranslate }}"
+                            type="button">
                             <i class="icon-enter bold"></i>
-                            <span class="visually-hidden">{{ "comments.reply" | sqxTranslate }}</span>
                         </button>
                     }
 
                     @if (isEditable && canEdit) {
-                        <button class="btn btn-sm btn-text-secondary" (click)="startEdit()" type="button">
+                        <button class="btn btn-sm btn-text-secondary" attr.aria-label="{{ 'common.edit' | sqxTranslate }}" (click)="startEdit()" type="button">
                             <i class="icon-pencil bold"></i>
-                            <span class="visually-hidden">{{ "common.edit" | sqxTranslate }}</span>
                         </button>
                     }
 
@@ -49,20 +52,20 @@
                         @if (!commentItem.comment.isResolved) {
                             <button
                                 class="btn btn-sm btn-text-secondary"
+                                attr.aria-label="{{ 'comments.resolve' | sqxTranslate }}"
                                 (click)="resolve(true)"
                                 title="{{ 'comments.resolve' | sqxTranslate }}"
                                 type="button">
                                 <i class="icon-check-circle text-bold"></i>
-                                <span class="visually-hidden">{{ "comments.resolve" | sqxTranslate }}</span>
                             </button>
                         } @else {
                             <button
                                 class="btn btn-sm btn-text-secondary"
+                                attr.aria-label="{{ 'comments.unresolve' | sqxTranslate }}"
                                 (click)="resolve(false)"
                                 title="{{ 'comments.unresolve' | sqxTranslate }}"
                                 type="button">
                                 <i class="icon-check-circle-filled text-success"></i>
-                                <span class="visually-hidden">{{ "comments.unresolve" | sqxTranslate }}</span>
                             </button>
                         }
                     }
@@ -70,6 +73,7 @@
                     @if (isDeletable || canDelete) {
                         <button
                             class="btn btn-sm btn-text-danger"
+                            attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                             confirmRememberKey="deleteComment"
                             [confirmRequired]="confirmDelete"
                             confirmText="i18n:comments.deleteConfirmText"
@@ -77,7 +81,6 @@
                             (sqxConfirmClick)="delete()"
                             type="button">
                             <i class="icon-bin2"></i>
-                            <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                         </button>
                     }
                 </div>
diff --git a/frontend/src/app/shared/components/contents/content-value.component.html b/frontend/src/app/shared/components/contents/content-value.component.html
index 466b1012b..8da483dc0 100644
--- a/frontend/src/app/shared/components/contents/content-value.component.html
+++ b/frontend/src/app/shared/components/contents/content-value.component.html
@@ -4,9 +4,8 @@
     </div>
 
     @if (isString && fields) {
-        <button class="btn btn-icon" (click)="toggle()" sqxStopClick type="button">
+        <button class="btn btn-icon" attr.aria-label="{{ 'contents.wrapText' | sqxTranslate }}" (click)="toggle()" sqxStopClick type="button">
             <i class="icon-wrap_text"></i>
-            <span class="visually-hidden">{{ "contents.wrapText" | sqxTranslate }}</span>
         </button>
     }
 } @else {
diff --git a/frontend/src/app/shared/components/forms/geolocation-editor.component.html b/frontend/src/app/shared/components/forms/geolocation-editor.component.html
index f28c1cde4..e2ead7e6c 100644
--- a/frontend/src/app/shared/components/forms/geolocation-editor.component.html
+++ b/frontend/src/app/shared/components/forms/geolocation-editor.component.html
@@ -41,13 +41,23 @@
         </form>
 
         <div class="col-auto d-flex gap-1">
-            <button class="btn btn-text-secondary" [class.hidden]="!snapshot.isMapHidden" (click)="hideMap(false)" title="i18n:common.mapShow" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'common.mapShow' | sqxTranslate }}"
+                [class.hidden]="!snapshot.isMapHidden"
+                (click)="hideMap(false)"
+                title="i18n:common.mapShow"
+                type="button">
                 <i class="icon-plus2"></i>
-                <span class="visually-hidden">{{ "common.mapShow" | sqxTranslate }}</span>
             </button>
-            <button class="btn btn-text-secondary" [class.hidden]="snapshot.isMapHidden" (click)="hideMap(true)" title="i18n:common.mapHide" type="button">
+            <button
+                class="btn btn-text-secondary"
+                attr.aria-label="{{ 'common.mapHide' | sqxTranslate }}"
+                [class.hidden]="snapshot.isMapHidden"
+                (click)="hideMap(true)"
+                title="i18n:common.mapHide"
+                type="button">
                 <i class="icon-minus2"></i>
-                <span class="visually-hidden">{{ "common.mapHide" | sqxTranslate }}</span>
             </button>
         </div>
     </div>
diff --git a/frontend/src/app/shared/components/references/content-selector.component.html b/frontend/src/app/shared/components/references/content-selector.component.html
index 8c8fc7cdc..8a3f18046 100644
--- a/frontend/src/app/shared/components/references/content-selector.component.html
+++ b/frontend/src/app/shared/components/references/content-selector.component.html
@@ -26,9 +26,8 @@
         <div class="row gx-2 mt-3 mb-3">
             @if (schema) {
                 <div class="col-auto">
-                    <button class="btn btn-text-secondary" (click)="reload()" type="button">
+                    <button class="btn btn-text-secondary" attr.aria-label="{{ 'common.refresh' | sqxTranslate }}" (click)="reload()" type="button">
                         <i class="icon-reset"></i>
-                        <span class="visually-hidden">{{ "common.refresh" | sqxTranslate }}</span>
                     </button>
                 </div>
 
@@ -124,6 +123,7 @@
                 type="button"
                 type="button"
                 type="button"
+                type="button"
                 type="submit">
                 {{ "contents.referencesLink" | sqxTranslate: { count: selectionCount } }}
             </button>
diff --git a/frontend/src/app/shared/components/schema-category.component.html b/frontend/src/app/shared/components/schema-category.component.html
index 44657fe2e..f893a16b0 100644
--- a/frontend/src/app/shared/components/schema-category.component.html
+++ b/frontend/src/app/shared/components/schema-category.component.html
@@ -28,9 +28,12 @@
                         <span class="badge rounded-pill badge-secondary">{{ schemaCategory.countSchemasInSubtreeFiltered }}</span>
                     } @else {
                         @if (schemaCategory.name) {
-                            <button class="btn btn-sm btn-text-secondary btn-remove" (click)="remove.emit(schemaCategory.name)" type="button">
+                            <button
+                                class="btn btn-sm btn-text-secondary btn-remove"
+                                attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
+                                (click)="remove.emit(schemaCategory.name)"
+                                type="button">
                                 <i class="icon-bin2"></i>
-                                <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                             </button>
                         }
                     }
diff --git a/frontend/src/app/shared/components/search/query-list.component.html b/frontend/src/app/shared/components/search/query-list.component.html
index b56a072f3..84abb889a 100644
--- a/frontend/src/app/shared/components/search/query-list.component.html
+++ b/frontend/src/app/shared/components/search/query-list.component.html
@@ -11,9 +11,13 @@
 
                         <div class="col-auto">
                             @if (canRemove) {
-                                <button class="btn-sm btn-text-danger btn-remove" (click)="remove.emit(saved)" sqxStopClick type="button">
+                                <button
+                                    class="btn-sm btn-text-danger btn-remove"
+                                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
+                                    (click)="remove.emit(saved)"
+                                    sqxStopClick
+                                    type="button">
                                     <i class="icon-close"></i>
-                                    <span class="visually-hidden">{{ "common.delete" | sqxTranslate }}</span>
                                 </button>
                             }
                         </div>
diff --git a/frontend/src/app/shared/components/tour-guide.component.html b/frontend/src/app/shared/components/tour-guide.component.html
index d5c8fd7de..ef869d952 100644
--- a/frontend/src/app/shared/components/tour-guide.component.html
+++ b/frontend/src/app/shared/components/tour-guide.component.html
@@ -7,9 +7,8 @@
                         <div class="col">{{ "tour.guide-title" | sqxTranslate }}</div>
 
                         <div class="col-auto">
-                            <button class="btn btn-simple btn-sm" (click)="toggle()" type="button">
+                            <button class="btn btn-simple btn-sm" attr.aria-label="{{ 'common.collapse' | sqxTranslate }}" (click)="toggle()" type="button">
                                 <i class="icon-angle-down"></i>
-                                <span class="visually-hidden">{{ "common.collapse" | sqxTranslate }}</span>
                             </button>
                         </div>
                     </div>