fix(@clayui/core): fix error when interacting with TreeView using SR …

…JAWS Using `role="application"` makes more complex TreeView interactions accessible to SRs or ATs that capture all keyboard input and only pass through to the browser those that are accessible according to the accessibility standard. The `role="application"` we add in the root of the TreeView only for non-Apple platforms since mac or IOS SR doesn't have this problem. This allows the keyboard navigation for drag and drop to work properly and also the interactions on actions to work accordingly.
liferay · Aug 17, 2023 · 7933620 · 7933620
1 parent a90115e
commit 7933620
Show file tree

Hide file tree

Showing 2 changed files with 562 additions and 523 deletions.
diff --git a/packages/clay-core/src/tree-view/TreeView.tsx b/packages/clay-core/src/tree-view/TreeView.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {useNavigation} from '@clayui/shared';
+import {isAppleDevice, useNavigation} from '@clayui/shared';
 import classNames from 'classnames';
 import React, {useRef} from 'react';
 import {DndProvider} from 'react-dnd';
@@ -120,6 +120,10 @@ interface ITreeViewProps<T extends Record<string, any>>
 
 const focusableElements = ['.treeview-link[tabindex]'];
 
+const Application = ({children}: {children: React.ReactNode}) => (
+	<div role="application">{children}</div>
+);
+
 export function TreeView<T extends Record<string, any>>(
 	props: ITreeViewProps<T>
 ): JSX.Element & {
@@ -212,44 +216,51 @@ export function TreeView<T extends Record<string, any>>({
 		visible: true,
 	});
 
+	const Container = isAppleDevice() ? React.Fragment : Application;
+
 	return (
-		<ul
-			{...otherProps}
-			{...navigationProps}
-			className={classNames(
-				'treeview show-quick-actions-on-hover',
-				className,
-				{
-					[`treeview-${displayType}`]: displayType,
-					'show-component-expander-on-hover': showExpanderOnHover,
-				}
-			)}
-			ref={rootRef}
-			role="tree"
-			tabIndex={-1}
-		>
-			<DndProvider backend={HTML5Backend} context={dragAndDropContext}>
-				<TreeViewContext.Provider value={context}>
-					<DragAndDropProvider<T>
-						messages={messages}
-						nestedKey={nestedKey}
-						onItemHover={onItemHover}
-						onItemMove={onItemMove}
-						rootRef={rootRef}
-					>
-						<FocusWithinProvider
-							containerRef={rootRef}
-							focusableElements={focusableElements}
+		<Container>
+			<ul
+				{...otherProps}
+				{...navigationProps}
+				className={classNames(
+					'treeview show-quick-actions-on-hover',
+					className,
+					{
+						[`treeview-${displayType}`]: displayType,
+						'show-component-expander-on-hover': showExpanderOnHover,
+					}
+				)}
+				ref={rootRef}
+				role="tree"
+				tabIndex={-1}
+			>
+				<DndProvider
+					backend={HTML5Backend}
+					context={dragAndDropContext}
+				>
+					<TreeViewContext.Provider value={context}>
+						<DragAndDropProvider<T>
+							messages={messages}
+							nestedKey={nestedKey}
+							onItemHover={onItemHover}
+							onItemMove={onItemMove}
+							rootRef={rootRef}
 						>
-							<Collection<T> items={state.items}>
-								{children}
-							</Collection>
-							<DragLayer itemNameKey={itemNameKey} />
-						</FocusWithinProvider>
-					</DragAndDropProvider>
-				</TreeViewContext.Provider>
-			</DndProvider>
-		</ul>
+							<FocusWithinProvider
+								containerRef={rootRef}
+								focusableElements={focusableElements}
+							>
+								<Collection<T> items={state.items}>
+									{children}
+								</Collection>
+								<DragLayer itemNameKey={itemNameKey} />
+							</FocusWithinProvider>
+						</DragAndDropProvider>
+					</TreeViewContext.Provider>
+				</DndProvider>
+			</ul>
+		</Container>
 	);
 }