diff --git a/packages/clay-panel/docs/markup-panel.md b/packages/clay-panel/docs/markup-panel.md
index 5206cc694c..cd7eee6b67 100644
--- a/packages/clay-panel/docs/markup-panel.md
+++ b/packages/clay-panel/docs/markup-panel.md
@@ -21,7 +21,7 @@ mainTabURL: 'docs/components/panel.html'
 ## Basic Usage(#css-basic-usage)
 
 <div class="sheet-example">
-	<div class="panel" role="tablist">
+	<div class="panel" >
 		<div class="panel-header">
 			<span class="panel-title">Title</span>
 		</div>
@@ -32,7 +32,7 @@ mainTabURL: 'docs/components/panel.html'
 </div>
 
 ```html
-<div class="panel" role="tablist">
+<div class="panel">
 	<div class="panel-header">
 		<span class="panel-title">Title</span>
 	</div>
@@ -45,7 +45,7 @@ mainTabURL: 'docs/components/panel.html'
 ### Secondary(#css-panel-secondary)
 
 <div class="sheet-example">
-	<div class="panel panel-secondary" role="tablist">
+	<div class="panel panel-secondary" >
 		<div class="panel-header">
 			<span class="panel-title">Title</span>
 		</div>
@@ -55,7 +55,7 @@ mainTabURL: 'docs/components/panel.html'
 </div>
 
 ```html
-<div class="panel panel-secondary" role="tablist">
+<div class="panel panel-secondary">
 	<div class="panel-header">
 		<span class="panel-title">Title</span>
 	</div>
@@ -67,7 +67,7 @@ mainTabURL: 'docs/components/panel.html'
 ### Unstyled(#css-panel-unstyled)
 
 <div class="sheet-example">
-	<div class="panel panel-unstyled" role="tablist">
+	<div class="panel panel-unstyled" >
 		<div class="panel-header">
 			<span class="panel-title">Title</span>
 		</div>
@@ -77,7 +77,7 @@ mainTabURL: 'docs/components/panel.html'
 </div>
 
 ```html
-<div class="panel panel-unstyled" role="tablist">
+<div class="panel panel-unstyled">
 	<div class="panel-header">
 		<span class="panel-title">Title</span>
 	</div>
@@ -95,14 +95,14 @@ Collapsable panels provide you with the ability to expand and collapse content a
 </div>
 
 <div class="sheet-example">
-	<div class="panel" role="tablist">
+	<div class="panel" >
 		<button
 			aria-controls="collapsePanel"
 			aria-expanded="false"
 			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 			data-target="#collapsablePanel" 
 			data-toggle="collapse"
-			role="tab"
+			
 		>
 			<span class="panel-title">Toggle me for expanding!</span>
 			<span class="collapse-icon-closed">
@@ -126,7 +126,7 @@ Collapsable panels provide you with the ability to expand and collapse content a
 				</svg>
 			</span>
 		</button>
-		<div class="panel-collapse collapse" id="collapsablePanel" role="tabpanel">
+		<div class="panel-collapse collapse" id="collapsablePanel" >
 			<div class="panel-header">Header!</div>
 			<div class="panel-body">Body!</div>
 			<div class="panel-footer">Footer!</div>
@@ -135,14 +135,13 @@ Collapsable panels provide you with the ability to expand and collapse content a
 </div>
 
 ```html
-<div class="panel" role="tablist">
+<div class="panel">
 	<button
 		aria-controls="collapsePanel"
 		aria-expanded="false"
 		class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 		data-target="#collapsablePanel"
 		data-toggle="collapse"
-		role="tab"
 	>
 		<span class="panel-title">Toggle me for expanding!</span>
 		<span class="collapse-icon-closed">
@@ -162,7 +161,7 @@ Collapsable panels provide you with the ability to expand and collapse content a
 			</svg>
 		</span>
 	</button>
-	<div class="panel-collapse collapse" id="collapsablePanel" role="tabpanel">
+	<div class="panel-collapse collapse" id="collapsablePanel">
 		<div class="panel-header">Header!</div>
 		<div class="panel-body">Body!</div>
 		<div class="panel-footer">Footer!</div>
@@ -175,9 +174,9 @@ Collapsable panels provide you with the ability to expand and collapse content a
 Grouped panels provide you with the ability of making accordion-like elements with multiple collapsable panels.
 
 <div class="sheet-example">
-	<div aria-orientation="vertical" class="panel-group" role="tablist">
-		<div class="panel panel-secondary" role="tablist">
-			<button aria-controls="collapsePanelOne" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelOne" data-toggle="collapse" role="tab">
+	<div  class="panel-group" >
+		<div class="panel panel-secondary" >
+			<button aria-controls="collapsePanelOne" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelOne" data-toggle="collapse" >
 				<span class="panel-title">One</span>
 				<span class="collapse-icon-closed">
 					<svg class="lexicon-icon lexicon-icon-angle-right" role="presentation">
@@ -190,12 +189,12 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 					</svg>
 				</span>
 			</button>
-			<div class="panel-collapse collapse" id="collapsePanelOne" role="tabpanel">
+			<div class="panel-collapse collapse" id="collapsePanelOne" >
 				<div class="panel-body">Here is some content inside for number One</div>
 			</div>
 		</div>
-		<div class="panel panel-secondary" role="tablist">
-			<button aria-controls="collapsePanelTwo" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelTwo" data-toggle="collapse" role="tab">
+		<div class="panel panel-secondary" >
+			<button aria-controls="collapsePanelTwo" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelTwo" data-toggle="collapse" >
 				<span class="panel-title">Two</span>
 				<span class="collapse-icon-closed">
 					<svg class="lexicon-icon lexicon-icon-angle-right" role="presentation">
@@ -208,12 +207,12 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 					</svg>
 				</span>
 			</button>
-			<div class="panel-collapse collapse" id="collapsePanelTwo" role="tabpanel">
+			<div class="panel-collapse collapse" id="collapsePanelTwo" >
 				<div class="panel-body">Here is some content inside for number Two</div>
 			</div>
 		</div>
-		<div class="panel panel-secondary" role="tablist">
-			<button aria-controls="collapsePanelThree" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelThree" data-toggle="collapse" role="tab">
+		<div class="panel panel-secondary" >
+			<button aria-controls="collapsePanelThree" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelThree" data-toggle="collapse" >
 				<span class="panel-title">Three</span>
 				<span class="collapse-icon-closed">
 					<svg class="lexicon-icon lexicon-icon-angle-right" role="presentation">
@@ -226,7 +225,7 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 					</svg>
 				</span>
 			</button>
-			<div class="panel-collapse collapse" id="collapsePanelThree" role="tabpanel">
+			<div class="panel-collapse collapse" id="collapsePanelThree" >
 				<div class="panel-body">Here is some content inside for number Three</div>
 			</div>
 		</div>
@@ -234,15 +233,14 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 </div>
 
 ```html
-<div aria-orientation="vertical" class="panel-group" role="tablist">
-	<div class="panel panel-secondary" role="tablist">
+<div class="panel-group">
+	<div class="panel panel-secondary">
 		<button
 			aria-controls="collapsePanelOne"
 			aria-expanded="false"
 			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 			data-target="#collapsePanelOne"
 			data-toggle="collapse"
-			role="tab"
 		>
 			<span class="panel-title">One</span>
 			<span class="collapse-icon-closed">
@@ -262,24 +260,19 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 				</svg>
 			</span>
 		</button>
-		<div
-			class="panel-collapse collapse"
-			id="collapsePanelOne"
-			role="tabpanel"
-		>
+		<div class="panel-collapse collapse" id="collapsePanelOne">
 			<div class="panel-body">
 				Here is some content inside for number One
 			</div>
 		</div>
 	</div>
-	<div class="panel panel-secondary" role="tablist">
+	<div class="panel panel-secondary">
 		<button
 			aria-controls="collapsePanelTwo"
 			aria-expanded="false"
 			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 			data-target="#collapsePanelTwo"
 			data-toggle="collapse"
-			role="tab"
 		>
 			<span class="panel-title">Two</span>
 			<span class="collapse-icon-closed">
@@ -299,24 +292,19 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 				</svg>
 			</span>
 		</button>
-		<div
-			class="panel-collapse collapse"
-			id="collapsePanelTwo"
-			role="tabpanel"
-		>
+		<div class="panel-collapse collapse" id="collapsePanelTwo">
 			<div class="panel-body">
 				Here is some content inside for number Two
 			</div>
 		</div>
 	</div>
-	<div class="panel panel-secondary" role="tablist">
+	<div class="panel panel-secondary">
 		<button
 			aria-controls="collapsePanelThree"
 			aria-expanded="false"
 			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 			data-target="#collapsePanelThree"
 			data-toggle="collapse"
-			role="tab"
 		>
 			<span class="panel-title">Three</span>
 			<span class="collapse-icon-closed">
@@ -336,11 +324,7 @@ Grouped panels provide you with the ability of making accordion-like elements wi
 				</svg>
 			</span>
 		</button>
-		<div
-			class="panel-collapse collapse"
-			id="collapsePanelThree"
-			role="tabpanel"
-		>
+		<div class="panel-collapse collapse" id="collapsePanelThree">
 			<div class="panel-body">
 				Here is some content inside for number Three
 			</div>
@@ -358,9 +342,9 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 		<div class="sheet-header">
 			<h4 class="sheet-title">Sheet Title</h4>
 		</div>
-		<div aria-orientation="vertical" class="panel-group panel-group-flush" role="tablist">
-			<div class="panel panel-unstyled" role="tablist">
-				<button aria-controls="collapseSheetPanelOne" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapseSheetPanelOne" data-toggle="collapse" role="tab">
+		<div  class="panel-group panel-group-flush" >
+			<div class="panel panel-unstyled" >
+				<button aria-controls="collapseSheetPanelOne" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapseSheetPanelOne" data-toggle="collapse" >
 					<span class="panel-title">One</span>
 					<span class="collapse-icon-closed">
 						<svg class="lexicon-icon lexicon-icon-angle-right" role="presentation">
@@ -373,12 +357,12 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 						</svg>
 					</span>
 				</button>
-				<div class="panel-collapse collapse" id="collapseSheetPanelOne" role="tabpanel">
+				<div class="panel-collapse collapse" id="collapseSheetPanelOne" >
 					<div class="panel-body">Here is some content inside for number One</div>
 				</div>
 			</div>
-			<div class="panel panel-unstyled" role="tablist">
-				<button aria-controls="collapseSheetPanelTwo" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapseSheetPanelTwo" data-toggle="collapse" role="tab">
+			<div class="panel panel-unstyled" >
+				<button aria-controls="collapseSheetPanelTwo" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapseSheetPanelTwo" data-toggle="collapse" >
 					<span class="panel-title">Two</span>
 					<span class="collapse-icon-closed">
 						<svg class="lexicon-icon lexicon-icon-angle-right" role="presentation">
@@ -391,12 +375,12 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 						</svg>
 					</span>
 				</button>
-				<div class="panel-collapse collapse" id="collapseSheetPanelTwo" role="tabpanel">
+				<div class="panel-collapse collapse" id="collapseSheetPanelTwo" >
 					<div class="panel-body">Here is some content inside for number Two</div>
 				</div>
 			</div>
-			<div class="panel panel-unstyled" role="tablist">
-				<button aria-controls="collapseSheetPanelThree" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapseSheetPanelThree" data-toggle="collapse" role="tab">
+			<div class="panel panel-unstyled" >
+				<button aria-controls="collapseSheetPanelThree" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapseSheetPanelThree" data-toggle="collapse" >
 					<span class="panel-title">Three</span>
 					<span class="collapse-icon-closed">
 						<svg class="lexicon-icon lexicon-icon-angle-right" role="presentation">
@@ -409,7 +393,7 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 						</svg>
 					</span>
 				</button>
-				<div class="panel-collapse collapse" id="collapseSheetPanelThree" role="tabpanel">
+				<div class="panel-collapse collapse" id="collapseSheetPanelThree" >
 					<div class="panel-body">Here is some content inside for number Three</div>
 				</div>
 			</div>
@@ -422,19 +406,14 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 	<div class="sheet-header">
 		<h4 class="sheet-title">Sheet Title</h4>
 	</div>
-	<div
-		aria-orientation="vertical"
-		class="panel-group panel-group-flush"
-		role="tablist"
-	>
-		<div class="panel panel-unstyled" role="tablist">
+	<div class="panel-group panel-group-flush">
+		<div class="panel panel-unstyled">
 			<button
 				aria-controls="collapseSheetPanelOne"
 				aria-expanded="false"
 				class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 				data-target="#collapseSheetPanelOne"
 				data-toggle="collapse"
-				role="tab"
 			>
 				<span class="panel-title">One</span>
 				<span class="collapse-icon-closed">
@@ -458,24 +437,19 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 					</svg>
 				</span>
 			</button>
-			<div
-				class="panel-collapse collapse"
-				id="collapseSheetPanelOne"
-				role="tabpanel"
-			>
+			<div class="panel-collapse collapse" id="collapseSheetPanelOne">
 				<div class="panel-body">
 					Here is some content inside for number One
 				</div>
 			</div>
 		</div>
-		<div class="panel panel-unstyled" role="tablist">
+		<div class="panel panel-unstyled">
 			<button
 				aria-controls="collapseSheetPanelTwo"
 				aria-expanded="false"
 				class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 				data-target="#collapseSheetPanelTwo"
 				data-toggle="collapse"
-				role="tab"
 			>
 				<span class="panel-title">Two</span>
 				<span class="collapse-icon-closed">
@@ -499,24 +473,19 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 					</svg>
 				</span>
 			</button>
-			<div
-				class="panel-collapse collapse"
-				id="collapseSheetPanelTwo"
-				role="tabpanel"
-			>
+			<div class="panel-collapse collapse" id="collapseSheetPanelTwo">
 				<div class="panel-body">
 					Here is some content inside for number Two
 				</div>
 			</div>
 		</div>
-		<div class="panel panel-unstyled" role="tablist">
+		<div class="panel panel-unstyled">
 			<button
 				aria-controls="collapseSheetPanelThree"
 				aria-expanded="false"
 				class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 				data-target="#collapseSheetPanelThree"
 				data-toggle="collapse"
-				role="tab"
 			>
 				<span class="panel-title">Three</span>
 				<span class="collapse-icon-closed">
@@ -540,11 +509,7 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 					</svg>
 				</span>
 			</button>
-			<div
-				class="panel-collapse collapse"
-				id="collapseSheetPanelThree"
-				role="tabpanel"
-			>
+			<div class="panel-collapse collapse" id="collapseSheetPanelThree">
 				<div class="panel-body">
 					Here is some content inside for number Three
 				</div>
@@ -559,8 +524,8 @@ Sometimes you might want to place a panel inside of a card or a sheet, in that c
 Sometimes you want to have some custom content that's not a string or a number in your title, that's where `ClayPanel.Title` comes in handy. It allows you to add custom content to the title of the panel as seen in this example using `ClayLabels`.
 
 <div class="sheet-example">
-	<div class="panel panel-secondary" role="tablist">
-		<button aria-controls="panelWithCustomTitle" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelWithCustomTitle" data-toggle="collapse" role="tab">
+	<div class="panel panel-secondary" >
+		<button aria-controls="panelWithCustomTitle" aria-expanded="false" class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" data-target="#collapsePanelWithCustomTitle" data-toggle="collapse" >
 			<div>
 				<h3>Title</h3>
 				<span>If field </span>
@@ -590,21 +555,20 @@ Sometimes you want to have some custom content that's not a string or a number i
 				</svg>
 			</span>
 		</button>
-		<div class="panel-collapse collapse" id="collapsePanelWithCustomTitle" role="tabpanel">
+		<div class="panel-collapse collapse" id="collapsePanelWithCustomTitle" >
 			<div class="panel-body">Body!</div>
 		</div>
 	</div>
 </div>
 
 ```html
-<div class="panel panel-secondary" role="tablist">
+<div class="panel panel-secondary">
 	<button
 		aria-controls="panelWithCustomTitle"
 		aria-expanded="false"
 		class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
 		data-target="#collapsePanelWithCustomTitle"
 		data-toggle="collapse"
-		role="tab"
 	>
 		<div>
 			<h3>Title</h3>
@@ -641,11 +605,7 @@ Sometimes you want to have some custom content that's not a string or a number i
 			</svg>
 		</span>
 	</button>
-	<div
-		class="panel-collapse collapse"
-		id="collapsePanelWithCustomTitle"
-		role="tabpanel"
-	>
+	<div class="panel-collapse collapse" id="collapsePanelWithCustomTitle">
 		<div class="panel-body">Body!</div>
 	</div>
 </div>
diff --git a/packages/clay-panel/src/Group.tsx b/packages/clay-panel/src/Group.tsx
index 3e9e78751c..ef81ffaebf 100644
--- a/packages/clay-panel/src/Group.tsx
+++ b/packages/clay-panel/src/Group.tsx
@@ -50,7 +50,6 @@ const ClayPanelGroup = ({
 	return (
 		<div
 			{...otherProps}
-			aria-orientation="vertical"
 			className={classNames('panel-group', className, {
 				'panel-group-fluid': fluid,
 				'panel-group-fluid-first': fluidFirst,
@@ -58,7 +57,6 @@ const ClayPanelGroup = ({
 				'panel-group-flush': flush,
 				'panel-group-sm': small,
 			})}
-			role="tablist"
 		>
 			{children}
 		</div>
diff --git a/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap
index a13e01bfbd..d0de32532c 100644
--- a/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap
@@ -4,7 +4,6 @@ exports[`ClayPanel renders 1`] = `
 <div>
   <div
     class="panel"
-    role="tablist"
   >
     <div
       class="panel-header"
@@ -38,12 +37,11 @@ exports[`ClayPanel renders with custom displayTitle 1`] = `
 <div>
   <div
     class="panel panel-secondary"
-    role="tablist"
   >
     <button
+      aria-controls="clay-id-9"
       aria-expanded="false"
       class="panel-header panel-header-link collapse-icon collapse-icon-middle collapsed btn btn-unstyled"
-      role="tab"
       type="button"
     >
       <div>
@@ -77,8 +75,10 @@ exports[`ClayPanel renders with custom displayTitle 1`] = `
       </span>
     </button>
     <div
+      aria-labelledby="clay-id-9"
       class="panel-collapse collapse"
-      role="tabpanel"
+      id="clay-id-9"
+      role="region"
     >
       <div
         class="panel-header"
@@ -104,7 +104,6 @@ exports[`ClayPanel renders with different displayType 1`] = `
 <div>
   <div
     class="panel panel-secondary"
-    role="tablist"
   >
     <div
       class="panel-header"
@@ -137,13 +136,10 @@ exports[`ClayPanel renders with different displayType 1`] = `
 exports[`ClayPanel renders with multiple panels 1`] = `
 <div>
   <div
-    aria-orientation="vertical"
     class="panel-group"
-    role="tablist"
   >
     <div
       class="panel"
-      role="tablist"
     >
       <div
         class="panel-header"
@@ -162,7 +158,6 @@ exports[`ClayPanel renders with multiple panels 1`] = `
     </div>
     <div
       class="panel"
-      role="tablist"
     >
       <div
         class="panel-header"
@@ -181,12 +176,11 @@ exports[`ClayPanel renders with multiple panels 1`] = `
     </div>
     <div
       class="panel"
-      role="tablist"
     >
       <button
+        aria-controls="clay-id-5"
         aria-expanded="false"
         class="panel-header panel-header-link collapse-icon collapse-icon-middle collapsed btn btn-unstyled"
-        role="tab"
         type="button"
       >
         <span
@@ -220,8 +214,10 @@ exports[`ClayPanel renders with multiple panels 1`] = `
         </span>
       </button>
       <div
+        aria-labelledby="clay-id-5"
         class="panel-collapse collapse"
-        role="tabpanel"
+        id="clay-id-5"
+        role="region"
       >
         <div
           class="panel-body"
@@ -238,12 +234,11 @@ exports[`ClayPanel renders without displayTitle 1`] = `
 <div>
   <div
     class="panel panel-secondary"
-    role="tablist"
   >
     <button
+      aria-controls="clay-id-10"
       aria-expanded="false"
       class="panel-header panel-header-link collapse-icon collapse-icon-middle collapsed btn btn-unstyled"
-      role="tab"
       type="button"
     >
       <span
@@ -272,8 +267,10 @@ exports[`ClayPanel renders without displayTitle 1`] = `
       </span>
     </button>
     <div
+      aria-labelledby="clay-id-10"
       class="panel-collapse collapse"
-      role="tabpanel"
+      id="clay-id-10"
+      role="region"
     >
       <div
         class="panel-header"
diff --git a/packages/clay-panel/src/index.tsx b/packages/clay-panel/src/index.tsx
index 34d6c15722..1b3940262a 100644
--- a/packages/clay-panel/src/index.tsx
+++ b/packages/clay-panel/src/index.tsx
@@ -10,6 +10,7 @@ import {
 	InternalDispatch,
 	setElementFullHeight,
 	useControlledState,
+	useId,
 } from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
@@ -107,13 +108,14 @@ function ClayPanel({
 
 	const {prefersReducedMotion} = useProvider();
 
+	const ariaControlsId = useId();
+
 	return (
 		<div
 			{...otherProps}
 			className={classNames('panel', className, {
 				[`panel-${displayType}`]: displayType,
 			})}
-			role="tablist"
 		>
 			{!collapsable && (
 				<>
@@ -135,6 +137,7 @@ function ClayPanel({
 			{collapsable && (
 				<>
 					<ClayButton
+						aria-controls={ariaControlsId}
 						aria-expanded={internalExpanded}
 						className={classNames(
 							'panel-header panel-header-link',
@@ -148,7 +151,6 @@ function ClayPanel({
 						)}
 						displayType="unstyled"
 						onClick={() => setInternalExpanded(!internalExpanded)}
-						role="tab"
 					>
 						{displayTitle &&
 							(React.isValidElement(displayTitle) ? (
@@ -178,6 +180,7 @@ function ClayPanel({
 					</ClayButton>
 
 					<CSSTransition
+						aria-labelledby={ariaControlsId}
 						className={classNames(
 							'panel-collapse',
 							collapseClassNames,
@@ -190,6 +193,7 @@ function ClayPanel({
 							exit: `show`,
 							exitActive: 'collapsing',
 						}}
+						id={ariaControlsId}
 						in={internalExpanded}
 						onEnter={(element: HTMLElement) =>
 							setElementFullHeight(element)
@@ -201,7 +205,7 @@ function ClayPanel({
 						onExiting={(element) => {
 							element.style.height = '';
 						}}
-						role="tabpanel"
+						role="region"
 						timeout={!prefersReducedMotion ? 250 : 0}
 					>
 						<div>{children}</div>