[Studio UI] Add WAI-ARIA tree roles to element tree

assets/js/src/core/components/element-tree/element-tree.tsx

@@ -59,6 +59,7 @@ export interface TreeProps {
   onRightClick?: (event: React.MouseEvent, node: TreeNode) => void
 
   showRoot: boolean
+  ariaLabel?: string
 }
 
 export interface INodeRef {
@@ -132,8 +133,10 @@ const ElementTree = (
   const treeTestId = createTreeTestId(treeId)
   const treeContent = (
     <div
+      aria-label={ props.ariaLabel }
       className={ ['tree', styles.tree].join(' ') }
       data-testid={ treeTestId }
+      role="tree"
     >
       <TreeContext.Provider value={ treeContextValue }>
 

assets/js/src/core/components/element-tree/list/tree-list.tsx

@@ -53,9 +53,10 @@ export const TreeList = ({ node }: TreeListProps): React.JSX.Element => {
         </div>
       )}
 
-      <div
+      <ul
         className='tree-list'
         data-testid={ `tree-list-${node.id}` }
+        style={ { listStyle: 'none', margin: 0, padding: 0 } }
       >
         {childrenIds.map((childId) => (
           <TreeListNode
@@ -64,7 +65,7 @@ export const TreeList = ({ node }: TreeListProps): React.JSX.Element => {
             nodeId={ childId }
           />
         ))}
-      </div>
+      </ul>
 
       {RenderPager !== undefined && (
         <div

assets/js/src/core/components/element-tree/node/tree-node.tsx

@@ -215,14 +215,17 @@ const TreeNode = forwardRef(function ForwardedTreeNode ({
   const nodeContent = (
     <Flex
       align="center"
+      aria-expanded={ props.hasChildren === true ? isExpanded : undefined }
+      aria-level={ Math.max(1, level + 1) }
+      aria-selected={ isSelected }
       className={ cn('tree-node__content-inner') }
       gap="small"
       justify="center"
       onClick={ onClick }
       onContextMenu={ onContextMenu }
       onKeyDown={ onKeyDown }
       ref={ setRef }
-      role='button'
+      role='treeitem'
       tabIndex={ -1 }
     >
       <Flex

assets/js/src/core/modules/asset/tree/tree-container.tsx

@@ -27,6 +27,7 @@ import { componentConfig } from '@Pimcore/modules/app/component-registry/compone
 import { useAppDispatch } from '@sdk/app'
 import { withDndUpload } from './node/with-dnd-upload'
 import { withContextMenu } from './node/with-context-menu'
+import { useTranslation } from 'react-i18next'
 
 export interface TreeContainerProps {
   id: number
@@ -36,6 +37,7 @@ export interface TreeContainerProps {
 export const AssetTreeNode = withDroppableStyling(withDroppable((withDndUpload(withActionStates(withDraggable(withContextMenu(TreeNodeComponent)))))))
 
 const TreeContainer = ({ id = 1, showRoot = true }: TreeContainerProps): React.JSX.Element => {
+  const { t } = useTranslation()
   const { rootNode, isLoading } = useElementTreeRootNode(id, showRoot)
   const componentRegistry = useComponentRegistry()
   const dispatch = useAppDispatch()
@@ -63,6 +65,7 @@ const TreeContainer = ({ id = 1, showRoot = true }: TreeContainerProps): React.J
 
   return (
     <ElementTree
+      ariaLabel={ t('asset.asset-tree.title') }
       contextMenu={ contextMenu as React.ElementType<TreeContextMenuProps> | undefined }
       nodeId={ id }
       onSelect={ onSelect }

assets/js/src/core/modules/data-object/tree/tree-container.tsx

@@ -25,6 +25,7 @@ import { componentConfig } from '@Pimcore/modules/app/component-registry/compone
 import { useComponentRegistry } from '@Pimcore/modules/app/component-registry/use-component-registry'
 import { useAppDispatch } from '@sdk/app'
 import { withContextMenu } from './node/with-context-menu'
+import { useTranslation } from 'react-i18next'
 
 export interface TreeContainerProps {
   id: number
@@ -34,6 +35,7 @@ export interface TreeContainerProps {
 export const DataObjectTreeNode = withDroppable(withActionStates(withDraggable(withContextMenu(TreeNodeComponent))))
 
 const TreeContainer = ({ id = 1, showRoot = true }: TreeContainerProps): React.JSX.Element => {
+  const { t } = useTranslation()
   const { openDataObject } = useDataObjectHelper()
   const { rootNode, isLoading } = useElementTreeRootNode(id, showRoot)
   const componentRegistry = useComponentRegistry()
@@ -64,6 +66,7 @@ const TreeContainer = ({ id = 1, showRoot = true }: TreeContainerProps): React.J
 
   return (
     <ElementTree
+      ariaLabel={ t('data-object.data-object-tree.title') }
       contextMenu={ contextMenu as React.ElementType<TreeContextMenuProps> | undefined }
       nodeId={ id }
       onSelect={ onSelect }

assets/js/src/core/modules/document/tree/tree-container.tsx

@@ -25,6 +25,7 @@ import { componentConfig } from '@Pimcore/modules/app/component-registry/compone
 import { useComponentRegistry } from '@Pimcore/modules/app/component-registry/use-component-registry'
 import { useAppDispatch } from '@sdk/app'
 import { withContextMenu } from './node/with-context-menu'
+import { useTranslation } from 'react-i18next'
 
 export interface TreeContainerProps {
   id: number
@@ -34,6 +35,7 @@ export interface TreeContainerProps {
 export const DocumentTreeNode = withDroppable(withActionStates(withDraggable(withContextMenu(TreeNodeComponent))))
 
 const TreeContainer = ({ id = 1, showRoot = true }: TreeContainerProps): React.JSX.Element => {
+  const { t } = useTranslation()
   const { openDocument } = useDocumentHelper()
   const { rootNode, isLoading } = useElementTreeRootNode(id, showRoot)
   const componentRegistry = useComponentRegistry()
@@ -64,6 +66,7 @@ const TreeContainer = ({ id = 1, showRoot = true }: TreeContainerProps): React.J
 
   return (
     <ElementTree
+      ariaLabel={ t('document.document-tree.title') }
       contextMenu={ contextMenu as React.ElementType<TreeContextMenuProps> | undefined }
       nodeId={ id }
       onSelect={ onSelect }