[6.x] Use he-tree i18n prop for tree aria instructions (#14499)

Author: jasonvarga

package-lock.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@davidenke/marked-text-renderer": "^3.0.0",
     "@floating-ui/dom": "^1.6.0",
-    "@he-tree/vue": "^2.10.0-beta.2",
+    "@he-tree/vue": "^2.10.5",
     "@hoppscotch/vue-toasted": "^0.1.0",
     "@inertiajs/vue3": "^2.1.11",
     "@internationalized/date": "^3.7.0",

package.json

@@ -93,7 +93,3 @@
         @apply pt-1 rounded-t-2xl;
     }
 }
-
-.he-tree-sr-only {
-    @apply sr-only;
-}

resources/css/components/page-tree.css

@@ -31,6 +31,7 @@
                     :each-droppable="eachDroppable"
                     :max-level="maxDepth"
                     :stat-handler="statHandler"
+                    :i18n="treeDraggableI18n"
                     :aria-label="__('Tree Structure')"
                     @after-drop="afterDrop"
                     @open:node="nodeOpened"
@@ -143,23 +144,19 @@ export default {
         direction() {
             return this.$config.get('direction', 'ltr');
         },
+
+        treeDraggableI18n() {
+            return {
+                instructions: __('messages.tree_aria_instructions'),
+            };
+        },
     },
 
     watch: {
         site(site) {
             this.getPages();
         },
 
-        loading(loading) {
-            if (!loading) {
-                this.$nextTick(() => {
-                    if (this.$refs.tree) {
-                        this.$refs.tree.ariaInstructions = __('messages.tree_aria_instructions');
-                    }
-                });
-            }
-        },
-
         collapsedState: {
             deep: true,
             handler(state) {

resources/js/components/structures/PageTree.vue

@@ -86,6 +86,7 @@
                     :indent="24"
                     :dir="direction"
                     :stat-handler="statHandler"
+                    :i18n="treeDraggableI18n"
                     :aria-label="__('Tree Structure')"
                     keep-placeholder
                     trigger-class="page-move"
@@ -290,15 +291,15 @@ export default {
     mounted() {
         this.setInitialNav(this.nav);
         this.addToCommandPalette();
-
-        this.$nextTick(() => {
-            if (this.$refs.tree) {
-                this.$refs.tree.ariaInstructions = __('messages.tree_aria_instructions');
-            }
-        });
     },
 
     computed: {
+        treeDraggableI18n() {
+            return {
+                instructions: __('messages.tree_aria_instructions'),
+            };
+        },
+
         isDirty() {
             return this.changed;
         },