From fc3bd0d5cef80028ef2332dd5d4769fe48b09ea5 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 25 Feb 2026 12:55:41 +0200
Subject: [PATCH 1/3] Fix text overflow of settings buttons and shrinking of
 icons #2201

---
 www/settings/app-settings.less | 12 ++++++++++++
 www/settings/inner.js          |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 98fe4f2ef..2ed1e4aaf 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -65,6 +65,18 @@
     }
 
     #cp-sidebarlayout-container {
+        #cp-sidebarlayout-leftside {
+            .cp-sidebarlayout-category {
+                white-space: nowrap;
+                svg {
+                    flex: 0 0 auto;
+                }
+                .cp-sidebarlayout-category-name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
         #cp-sidebarlayout-rightside {
             input, button, span[tabindex="0"] {
                 &:focus-visible {
diff --git a/www/settings/inner.js b/www/settings/inner.js
index 4b412600d..6429fa382 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -2072,7 +2072,7 @@ define([
                 'data-category': key
             }, [
                 icon,
-                name,
+                h('span.cp-sidebarlayout-category-name', name),
             ])).appendTo($categories);
 
 

From 13475f705c4c7fdaf070d28040ded5c2f1a03be7 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Wed, 25 Feb 2026 13:42:37 +0200
Subject: [PATCH 2/3] Move fix to a higher scope - fixes also sidebar for
 notifications, support, teams

---
 customize.dist/src/less2/include/sidebar-layout.less |  8 ++++++++
 www/common/inner/sidebar-layout.js                   |  2 +-
 www/notifications/inner.js                           |  2 +-
 www/settings/app-settings.less                       | 12 ------------
 www/support/inner.js                                 |  2 +-
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index 86eab5a38..985d20afe 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/customize.dist/src/less2/include/sidebar-layout.less
@@ -46,6 +46,14 @@
                 .cp-sidebarlayout-category {
                     display: flex;
                     align-items: center;
+                    white-space: nowrap;
+                    svg {
+                        flex: 0 0 auto;
+                    }
+                    .cp-sidebarlayout-category-name {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                     .leftside-menu-category_main();
                     box-shadow: @cryptpad_ui_shadow;
                     &:focus-visible {
diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index 6422d945b..6fa277d1e 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -378,7 +378,7 @@ define([
                     'data-category': key
                 }, [
                     icon,
-                    category.name || Messages[`${app}_cat_${key}`] || key,
+                    h('span.cp-sidebarlayout-category-name', category.name || Messages[`${app}_cat_${key}`] || key),
                 ]);
                 var $item = $(item).appendTo(container);
                 Util.onClickEnter($item, function () {
diff --git a/www/notifications/inner.js b/www/notifications/inner.js
index 1c0700ba1..af5e91c53 100644
--- a/www/notifications/inner.js
+++ b/www/notifications/inner.js
@@ -245,7 +245,7 @@ define([
                 showCategories(categories[key]);
             });
 
-            $category.append(Messages['notifications_cat_'+key] || key);
+            $category.append(h('span.cp-sidebarlayout-category-name', Messages['notifications_cat_'+key] || key));
         });
         showCategories(categories[active]);
     };
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 2ed1e4aaf..98fe4f2ef 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -65,18 +65,6 @@
     }
 
     #cp-sidebarlayout-container {
-        #cp-sidebarlayout-leftside {
-            .cp-sidebarlayout-category {
-                white-space: nowrap;
-                svg {
-                    flex: 0 0 auto;
-                }
-                .cp-sidebarlayout-category-name {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-            }
-        }
         #cp-sidebarlayout-rightside {
             input, button, span[tabindex="0"] {
                 &:focus-visible {
diff --git a/www/support/inner.js b/www/support/inner.js
index e07c9c139..89ebef464 100644
--- a/www/support/inner.js
+++ b/www/support/inner.js
@@ -329,7 +329,7 @@ define([
                 showCategories(categories[key]);
             });
 
-            $category.append(Messages['support_cat_'+key] || key);
+            $category.append(h('span.cp-sidebarlayout-category-name', Messages['support_cat_'+key] || key));
         });
         showCategories(categories[active]);
     };

From 15a52d1c13623ce8cdab08df6b9b5d46b9b53fff Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Fri, 27 Feb 2026 14:56:15 +0200
Subject: [PATCH 3/3] Improve accessibility for sidebarlayout component in all
 occurrences

---
 www/common/inner/sidebar-layout.js | 6 ++++--
 www/notifications/inner.js         | 5 +++--
 www/settings/inner.js              | 6 ++++--
 www/support/inner.js               | 9 ++++++---
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index 6fa277d1e..b20ac9fcf 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -370,15 +370,17 @@ define([
             Object.keys(categories).forEach(function (key, i) {
                 if (!active && !i) { active = key; }
                 var category = categories[key];
+                var name = category.name || Messages[`${app}_cat_${key}`] || key;
                 var icon;
                 if (category.icon) { icon = Icons.get(category.icon); }
                 var item = h('li.cp-sidebarlayout-category', {
                     'role': 'menuitem',
                     'tabindex': 0,
-                    'data-category': key
+                    'data-category': key,
+                    'aria-label': name
                 }, [
                     icon,
-                    h('span.cp-sidebarlayout-category-name', category.name || Messages[`${app}_cat_${key}`] || key),
+                    h('span.cp-sidebarlayout-category-name', name),
                 ]);
                 var $item = $(item).appendTo(container);
                 Util.onClickEnter($item, function () {
diff --git a/www/notifications/inner.js b/www/notifications/inner.js
index af5e91c53..31f8fd384 100644
--- a/www/notifications/inner.js
+++ b/www/notifications/inner.js
@@ -218,7 +218,8 @@ define([
         var active = privateData.category || 'all';
         common.setHash(active);
         Object.keys(categories).forEach(function (key) {
-            var $category = $('<div>', {'class': 'cp-sidebarlayout-category', 'tabindex': 0, 'role': 'menuitem'}).appendTo($categories);
+            var name = Messages['notifications_cat_'+key] || key;
+            var $category = $('<div>', {'class': 'cp-sidebarlayout-category', 'tabindex': 0, 'role': 'menuitem', 'aria-label': name}).appendTo($categories);
             if (key === 'all') { $category.append($(Icons.get('all'))); }
             if (key === 'friends') { $category.append($(Icons.get('contacts-book'))); }
             if (key === 'pads') { $category.append($(Icons.get('file-pad'))); }
@@ -245,7 +246,7 @@ define([
                 showCategories(categories[key]);
             });
 
-            $category.append(h('span.cp-sidebarlayout-category-name', Messages['notifications_cat_'+key] || key));
+            $category.append(h('span.cp-sidebarlayout-category-name', name));
         });
         showCategories(categories[active]);
     };
diff --git a/www/settings/inner.js b/www/settings/inner.js
index 6429fa382..16057d131 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -2053,7 +2053,7 @@ define([
     Messages.settings_cat_notifications = Messages.notificationsPage;
     Messages.settings_cat_profile = Messages.profileButton;
     var createLeftside = function() {
-        var $categories = $('<div>', { 'class': 'cp-sidebarlayout-categories' })
+        var $categories = $('<div>', { 'class': 'cp-sidebarlayout-categories', 'role': 'menu'})
             .appendTo(APP.$leftside);
         APP.$usage = $('<div>', { 'class': 'usage' }).appendTo(APP.$leftside);
         var active = privateData.category || 'account';
@@ -2068,8 +2068,10 @@ define([
             let name = SIDEBAR_NAMES[key] ||
                        Messages['settings_cat_' + key] || key;
             var $category = $(h('div.cp-sidebarlayout-category', {
+                'role': 'menuitem',
                 'tabindex': 0,
-                'data-category': key
+                'data-category': key,
+                'aria-label': name
             }, [
                 icon,
                 h('span.cp-sidebarlayout-category-name', name),
diff --git a/www/support/inner.js b/www/support/inner.js
index 89ebef464..6439d91ef 100644
--- a/www/support/inner.js
+++ b/www/support/inner.js
@@ -296,7 +296,7 @@ define([
     };
 
     var createLeftside = function () {
-        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'})
+        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories', 'role': 'menu'})
                             .appendTo(APP.$leftside);
         var metadataMgr = common.getMetadataMgr();
         var privateData = metadataMgr.getPrivateData();
@@ -304,10 +304,13 @@ define([
         if (!categories[active]) { active = 'tickets'; }
         common.setHash(active);
         Object.keys(categories).forEach(function (key) {
+            var name = Messages['support_cat_'+key] || key;
             var $category = $('<div>', {
                 'class': 'cp-sidebarlayout-category',
                 'data-category': key,
-                'tabindex': 0
+                'tabindex': 0,
+                'role': 'menuitem',
+                'aria-label': name
             }).appendTo($categories);
             var iconClass = icons[key];
             if (iconClass) {
@@ -329,7 +332,7 @@ define([
                 showCategories(categories[key]);
             });
 
-            $category.append(h('span.cp-sidebarlayout-category-name', Messages['support_cat_'+key] || key));
+            $category.append(h('span.cp-sidebarlayout-category-name', name));
         });
         showCategories(categories[active]);
     };