From 7f88a0722e49799473c09b46ae2fca01c6001c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Tue, 28 Nov 2023 15:23:35 +0300
Subject: [PATCH] #5429 for Panel

---
 components/doc/panel/accessibilitydoc.js | 97 ++++++++++++------------
 components/lib/panel/Panel.js            |  5 +-
 2 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/components/doc/panel/accessibilitydoc.js b/components/doc/panel/accessibilitydoc.js
index b372044cdf..2744fb3552 100644
--- a/components/doc/panel/accessibilitydoc.js
+++ b/components/doc/panel/accessibilitydoc.js
@@ -1,57 +1,54 @@
-import { DevelopmentSection } from '@/components/doc/common/developmentsection';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 
 export function AccessibilityDoc() {
     return (
-        <DevelopmentSection>
-            <DocSectionText id="accessibility" label="Accessibility">
-                <h3>Screen Reader</h3>
-                <p>
-                    Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to
-                    the value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
-                </p>
-                <p>
-                    The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.
-                </p>
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the
+                value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
+            </p>
+            <p>
+                The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.
+            </p>
 
-                <h3>Content Toggle Button Keyboard Support</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <i>tab</i>
-                                </td>
-                                <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>shift</i> + <i>tab</i>
-                                </td>
-                                <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>enter</i>
-                                </td>
-                                <td>Toggles the visibility of the content.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>space</i>
-                                </td>
-                                <td>Toggles the visibility of the content.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DocSectionText>
-        </DevelopmentSection>
+            <h3>Content Toggle Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
     );
 }
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index 3d204e013d..8e70036ec1 100644
--- a/components/lib/panel/Panel.js
+++ b/components/lib/panel/Panel.js
@@ -90,7 +90,9 @@ export const Panel = React.forwardRef((inProps, ref) => {
                     id: buttonId,
                     'aria-controls': contentId,
                     'aria-expanded': !collapsed,
-                    role: 'tab'
+                    type: 'button',
+                    role: 'button',
+                    'aria-label': props.toggleButtonProps && props.toggleButtonProps['aria-label'] ? props.toggleButtonProps['aria-label'] : props.header
                 },
                 ptm('toggler')
             );
@@ -161,6 +163,7 @@ export const Panel = React.forwardRef((inProps, ref) => {
                 iconsElement,
                 togglerElement,
                 element: content,
+                id: idState + '_header',
                 props,
                 collapsed
             };