From 774c314e7bc2f3d77251c62d10f75aa985e1541f Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 14 Feb 2024 11:16:25 +0100
Subject: [PATCH 1/4] add missing label on the 'save' button in personal
 settings (fix #318)

---
 templates/settings/personal-form.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/settings/personal-form.php b/templates/settings/personal-form.php
index ed489bf..793feec 100644
--- a/templates/settings/personal-form.php
+++ b/templates/settings/personal-form.php
@@ -241,6 +241,7 @@ $labelReset = 'Reset to default';
     <div class="section">
         <?php if (!$_['force']): ?>
             <button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
+                <?php p($l->t('Save')); ?>
                 <progress max="100" value="0" id="side-menu-save-progress"></progress>
             </button>
 

From b8aa312a14f9feb7231ea9132b058a04159cc845 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 14 Feb 2024 11:26:54 +0100
Subject: [PATCH 2/4] fully apply Nextcloud AppMenu.vue updated (#326)

---
 src/AppMenu.vue | 52 ++++++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f90ebad..4e31f12 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -168,6 +168,7 @@ $header-icon-size: 20px;
   flex-shrink: 1;
   flex-wrap: wrap;
 }
+
 .app-menu-main {
   display: flex;
   flex-wrap: nowrap;
@@ -177,7 +178,6 @@ $header-icon-size: 20px;
     height: 50px;
     position: relative;
     display: flex;
-    opacity: .7;
 
     &.app-menu-entry__active {
       opacity: 1;
@@ -217,6 +217,7 @@ $header-icon-size: 20px;
       width: $header-icon-size;
       height: $header-icon-size;
       padding: calc((100% - $header-icon-size) / 2);
+      box-sizing: content-box;
       filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
     }
 
@@ -226,8 +227,8 @@ $header-icon-size: 20px;
       font-size: 12px;
       color: var(--color-primary-text);
       text-align: center;
-      bottom: -5px;
       left: 50%;
+      top: 45%;
       display: block;
       min-width: 100%;
       transform: translateX(-50%);
@@ -235,6 +236,7 @@ $header-icon-size: 20px;
       width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
+      letter-spacing: -0.5px;
     }
 
     &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
@@ -242,11 +244,11 @@ $header-icon-size: 20px;
       opacity: 1;
       .app-menu-entry--label {
         opacity: 1;
-        font-weight: bold;
-        font-size: 14px;
+        font-weight: bolder;
         bottom: 0;
-        width: auto;
-        overflow: visible;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
     }
   }
@@ -263,8 +265,10 @@ $header-icon-size: 20px;
   &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
   .app-menu-entry:not(.app-menu-entry__hidden-label):hover,
   .app-menu-entry:not(.app-menu-entry__hidden-label):focus {
+    opacity: 1;
+
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -280,7 +284,7 @@ $header-icon-size: 20px;
   &.app-menu-main__show-hovered .app-menu-entry:hover,
   &.app-menu-main__show-hovered .app-menu-entry:focus {
     img {
-      margin-top: -6px;
+      margin-top: -8px;
     }
 
     .app-menu-entry--label {
@@ -295,38 +299,42 @@ $header-icon-size: 20px;
 }
 
 ::v-deep .app-menu-more .button-vue--vue-tertiary {
-  color: var(--color-primary-text);
   opacity: .7;
   margin: 3px;
+  filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-  &:hover {
-    opacity: 1;
-    background-color: transparent !important;
+  &:not([aria-expanded="true"]) {
+    color: var(--color-primary-element-text);
+
+    &:hover {
+      opacity: 1;
+      background-color: transparent !important;
+    }
   }
 
-  &:focus-visible {
-    opacity: 1;
-    background-color: transparent !important;
-    border-radius: var(--border-radius);
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary-text);
-  }
+    &:focus-visible {
+      opacity: 1;
+      outline: none !important;
+    }
 }
 
 .app-menu-popover-entry {
   .app-icon {
     position: relative;
     height: 44px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
 
     &.has-unread::after {
       background-color: var(--color-main-text);
     }
 
     img {
-      filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
       width: $header-icon-size;
       height: $header-icon-size;
-      padding: calc((50px - $header-icon-size) / 2);
     }
   }
 }
@@ -335,7 +343,7 @@ $header-icon-size: 20px;
   content: "";
   width: 8px;
   height: 8px;
-  background-color: var(--color-primary-text);
+  background-color: var(--color-primary-element-text);
   border-radius: 50%;
   position: absolute;
   display: block;

From 951dd742d85e3dbee2763d977c2d7b17bfa81234 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 14 Feb 2024 12:12:08 +0100
Subject: [PATCH 3/4] add accessibility to open and close buttons (#311)

refactor the way to focus apps when the menu is opened (#301)
---
 css/sideMenu.css                |  6 ++++++
 src/CloserButton.vue            |  9 ++++++++-
 src/OpenerButton.vue            |  6 ++++--
 src/l10n/fixtures/tpl/base.yaml |  2 +-
 src/lib/createElement.js        |  8 +++++++-
 templates/js/script.php         | 36 +++++++++++----------------------
 6 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/css/sideMenu.css b/css/sideMenu.css
index b66e53a..8a63202 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -83,6 +83,12 @@
   padding-left: 12px !important;
   margin-left: 5px !important;
   margin-left: 3px !important;
+  overflow: hidden;
+}
+
+.side-menu-opener span {
+  position: relative;
+  left: 50px;
 }
 
 .side-menu-opener:active, .side-menu-opener:focus {
diff --git a/src/CloserButton.vue b/src/CloserButton.vue
index 99779f8..80ed747 100644
--- a/src/CloserButton.vue
+++ b/src/CloserButton.vue
@@ -15,11 +15,18 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <button class="side-menu-opener side-menu-closer"></button>
+  <button class="side-menu-opener side-menu-closer" :arial-label="label">
+    <span v-text="label"></span>
+  </button>
 </template>
 
 <script>
 export default {
   name: 'CloserButton',
+  data() {
+    return {
+      label: t('side_menu', 'Close the menu'),
+    }
+  }
 }
 </script>
diff --git a/src/OpenerButton.vue b/src/OpenerButton.vue
index 58298ae..538291c 100644
--- a/src/OpenerButton.vue
+++ b/src/OpenerButton.vue
@@ -15,7 +15,9 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <button class="side-menu-opener" :arial-label="label"></button>
+  <button class="side-menu-opener" :arial-label="label">
+    <span v-text="label"></span>
+  </button>
 </template>
 
 <script>
@@ -23,7 +25,7 @@ export default {
   name: 'OpenerButton',
   data() {
     return {
-      label: t('side_menu', 'Toggle menu'),
+      label: t('side_menu', 'Toggle the menu'),
     }
   }
 }
diff --git a/src/l10n/fixtures/tpl/base.yaml b/src/l10n/fixtures/tpl/base.yaml
index f957f2c..3456785 100644
--- a/src/l10n/fixtures/tpl/base.yaml
+++ b/src/l10n/fixtures/tpl/base.yaml
@@ -95,4 +95,4 @@
 "Hide labels on mouse over": ""
 "Except the hovered app": ""
 "Search": ""
-"Toggle menu": ""
+"Toggle the menu": ""
diff --git a/src/lib/createElement.js b/src/lib/createElement.js
index 19c8207..9be7ff4 100644
--- a/src/lib/createElement.js
+++ b/src/lib/createElement.js
@@ -3,7 +3,13 @@ module.exports = (tagName, attributes) => {
 
   if (typeof attributes === 'object') {
     for (let i in attributes) {
-      element.setAttribute(i, attributes[i])
+      if (i === 'text') {
+        element.textContent = attributes[i]
+      } else if (i === 'html') {
+        element.innerHTML = attributes[i]
+      } else {
+        element.setAttribute(i, attributes[i])
+      }
     }
   }
 
diff --git a/templates/js/script.php b/templates/js/script.php
index 7607a49..b67c9b2 100644
--- a/templates/js/script.php
+++ b/templates/js/script.php
@@ -16,7 +16,8 @@ if ($_['always-displayed']) {
   const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
   const sideMenuOpener = SMcreateElement('button', {
     'class': 'side-menu-opener',
-    'arial-label': t('side_menu', 'Toggle menu')
+    'arial-label': t('side_menu', 'Toggle the menu'),
+    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
   })
   const sideMenu = SMcreateElement('div', {id: 'side-menu'})
 
@@ -38,6 +39,15 @@ if ($_['always-displayed']) {
     sideMenu.setAttribute('data-sidewithcategories', '1')
   <?php endif; ?>
 
+  const sideMenuFocus = () => {
+    let a = document.querySelector('#side-menu .side-menu-app.active a')
+      || document.querySelector('#side-menu .side-menu-app a')
+
+    if (a) {
+      a.focus()
+    }
+  }
+
   document.querySelector('body').addEventListener('side-menu.apps', (e) => {
     const apps = e.detail.apps;
 
@@ -80,22 +90,6 @@ if ($_['always-displayed']) {
       return
     }
 
-    sideMenuFocus = () => {
-      let a = document.querySelector('.side-menu-app.active a', sideMenu)
-
-      if (!a) {
-        return
-      }
-
-      if (a.length === 0) {
-        a = sideMenu.querySelector('.side-menu-app:first-child a')
-      }
-
-      if (a.length > 0) {
-        a.focus()
-      }
-    }
-
     <?php if ($_['opener-hover']): ?>
       const sideMenuMouseLeave = () => {
         sideMenu.classList.remove('open')
@@ -127,14 +121,8 @@ if ($_['always-displayed']) {
 
     headerMenuOpener.addEventListener('click', () => {
       sideMenu.classList.add('open')
-
-      const a = sideMenu.querySelector('.side-menu-app.active a')
-
-      if (a !== null) {
-        a.focus()
-      }
-
       headerMenuOpener.blur()
+      sideMenuFocus()
     })
 
     for (let opener of sideMenuOpener) {

From 1271571427589be7400aeb6720f066dee7918769 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 14 Feb 2024 12:22:13 +0100
Subject: [PATCH 4/4] upgrade axios

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 05e2ef7..8609660 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
 		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
-		"axios": "^0.24.0",
+		"axios": "^1.6.7",
 		"trim": "^1.0.1",
 		"vue": "^2.6.11"
 	},