LPS-201300 Fixing Accessibility conflict between ClayPanelGroup and C…

…layPanel

packages/clay-panel/package.json

@@ -18,7 +18,7 @@
 		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
 		"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
 		"prepublishOnly": "yarn build && yarn buildTypes",
-		"test": "jest --config ../../jest.config.js"
+		"test": "jest --config ../../jest.config.js --updateSnapshot"
 	},
 	"keywords": [
 		"clay",

packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap

@@ -143,7 +143,7 @@ exports[`ClayPanel renders with multiple panels 1`] = `
   >
     <div
       class="panel"
-      role="tablist"
+      role="none"
     >
       <div
         class="panel-header"
@@ -162,7 +162,7 @@ exports[`ClayPanel renders with multiple panels 1`] = `
     </div>
     <div
       class="panel"
-      role="tablist"
+      role="none"
     >
       <div
         class="panel-header"
@@ -181,7 +181,7 @@ exports[`ClayPanel renders with multiple panels 1`] = `
     </div>
     <div
       class="panel"
-      role="tablist"
+      role="none"
     >
       <button
         aria-expanded="false"

packages/clay-panel/src/index.tsx

@@ -21,6 +21,8 @@ import ClayPanelGroup from './Group';
 import ClayPanelHeader from './Header';
 import ClayPanelTitle from './Title';
 
+import {useRef, useEffect, useState} from 'react';
+
 export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag to indicate that Panel is collapsable.
@@ -107,13 +109,44 @@ function ClayPanel({
 
 	const {prefersReducedMotion} = useProvider();
 
+	//Setting reference to the clayComponent
+	const clayPanelReference = useRef<HTMLDivElement | null>(null);
+
+	//Setting an init role for the clayComponent
+	const [roleValue, setRoleValue] = useState('tablist');
+
+	//Function that checks for the parent Role if they have tablist this is made to check if the user used GroupComponent to render multiple panels.
+	const checkRoleParent = () => {
+		const clayPanelElement = clayPanelReference.current;
+
+		if (
+			clayPanelElement &&
+			clayPanelElement.parentNode &&
+			(clayPanelElement.parentNode as HTMLDivElement).getAttribute(
+				'role'
+			) === 'tablist'
+		) {
+			setRoleValue('none');
+		} else {
+			setRoleValue('tablist');
+		}
+
+		return roleValue;
+	};
+
+	useEffect(() => {
+		// Execute the check when the component is mounted
+		checkRoleParent();
+	}, []);
+
 	return (
 		<div
 			{...otherProps}
 			className={classNames('panel', className, {
 				[`panel-${displayType}`]: displayType,
 			})}
-			role="tablist"
+			ref={clayPanelReference}
+			role={roleValue}
 		>
 			{!collapsable && (
 				<>