From f560370b51d8c37552c3db27ce71fc3154ea29f6 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 16 Dec 2022 17:45:52 -0600
Subject: [PATCH] explorer: fix file tree label

---
 src/explorer/translations/en.json |  2 +-
 src/utils/tree-renderer.tsx       | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/explorer/translations/en.json b/src/explorer/translations/en.json
index 57f19bf9..694804d7 100644
--- a/src/explorer/translations/en.json
+++ b/src/explorer/translations/en.json
@@ -8,7 +8,7 @@
         }
     },
     "tree": {
-        "label": "File Explorer",
+        "label": "Files",
         "liveDescriptor": {
             "intro": {
                 "accessibilityGuide": "Accessibility guide for tree {treeLabel}.",
diff --git a/src/utils/tree-renderer.tsx b/src/utils/tree-renderer.tsx
index abc07483..f7fb2720 100644
--- a/src/utils/tree-renderer.tsx
+++ b/src/utils/tree-renderer.tsx
@@ -16,7 +16,7 @@ import {
     MaybeElement,
 } from '@blueprintjs/core';
 import React, { createContext } from 'react';
-import { TreeItem, TreeRenderProps } from 'react-complex-tree';
+import { TreeItem, TreeRenderProps, useTree } from 'react-complex-tree';
 import { useBoolean } from 'usehooks-ts';
 
 /** Combines class names into a string. */
@@ -42,14 +42,20 @@ export const renderers: Omit<
     Required<TreeRenderProps<TreeItemData>>,
     'renderDraggingItem' | 'renderDraggingItemTitle' | 'renderLiveDescriptorContainer'
 > = {
-    renderTreeContainer: (props) => (
-        <div
-            className={cx(Classes.TREE, Classes.FOCUS_STYLE_MANAGER_IGNORE)}
-            {...props.containerProps}
-        >
-            {props.children}
-        </div>
-    ),
+    renderTreeContainer: (props) => {
+        // work around https://github.com/lukasbach/react-complex-tree/issues/195
+        const { treeLabel } = useTree();
+
+        return (
+            <div
+                className={cx(Classes.TREE, Classes.FOCUS_STYLE_MANAGER_IGNORE)}
+                {...props.containerProps}
+                aria-label={treeLabel}
+            >
+                {props.children}
+            </div>
+        );
+    },
 
     renderItemsContainer: (props) => (
         <ul