[6.x] Fix visible he-tree accessibility text in tree view (#14465)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: 3 people

lang/en/messages.php

@@ -256,6 +256,7 @@
     'theme_share_instructions' => 'Publish this theme through your statamic.com account to make it available to others.',
     'try_again_in_seconds' => '{0,1}Try again now.|Try again in :count seconds.',
     'try_again_in_minutes' => 'Try again in a minute.|Try again in :count minutes.',
+    'tree_aria_instructions' => 'Use arrow keys to navigate. Alt plus arrow keys to reorder.',
     'two_factor_account_requirement' => 'Your account requires two-factor authentication. Please enable it before proceeding.',
     'two_factor_challenge_code_instructions' => 'Enter the 6-digit code from your authenticator app to confirm access to your account.',
     'two_factor_enable_introduction' => 'When enabled, you will be prompted for a secure, random token from your phone\'s authenticator app every time you log in.',

resources/css/components/page-tree.css

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

resources/js/components/structures/PageTree.vue

@@ -31,6 +31,7 @@
                     :each-droppable="eachDroppable"
                     :max-level="maxDepth"
                     :stat-handler="statHandler"
+                    :aria-label="__('Tree Structure')"
                     @after-drop="afterDrop"
                     @open:node="nodeOpened"
                     @close:node="nodeClosed"
@@ -149,6 +150,16 @@ export default {
             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/pages/preferences/nav/Edit.vue

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