From ae2735992ec2457681e1752b2e1215d9983eef24 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Wed, 18 Jan 2023 14:32:51 -0600
Subject: [PATCH 1/4] Added tabindex prop to EuiResizablePanel for keyboard
 accessibility.

---
 .../resizable_container/resizable_container_basic.tsx |  4 ++--
 .../resizable_container_callbacks.tsx                 |  2 ++
 .../resizable_container_example.js                    | 11 +++++++++++
 .../resizable_container_reset_values.tsx              |  2 ++
 .../resizable_container_vertical.tsx                  |  4 ++--
 .../resizable_panel_collapsible.tsx                   |  7 ++++++-
 .../resizable_panel_collapsible_options.tsx           |  7 ++++++-
 .../views/resizable_container/resizable_panels.tsx    |  1 +
 .../resizable_container/resizable_panel.tsx           |  4 ++++
 9 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.tsx b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
index 473cc533eca..5347c798f7e 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
@@ -14,7 +14,7 @@ export default () => (
   <EuiResizableContainer style={{ height: '200px' }}>
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
-        <EuiResizablePanel initialSize={50} minSize="30%">
+        <EuiResizablePanel initialSize={50} minSize="30%" tabindex="0">
           <EuiText>
             <div>{text}</div>
             <a href="">Hello world</a>
@@ -23,7 +23,7 @@ export default () => (
 
         <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={50} minSize="200px">
+        <EuiResizablePanel initialSize={50} minSize="200px" tabindex="0">
           <EuiText>{text}</EuiText>
         </EuiResizablePanel>
       </>
diff --git a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
index 24595a755b1..5f9534dcb57 100644
--- a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
@@ -78,6 +78,7 @@ export default () => {
                 id={firstPanelId}
                 size={sizes[firstPanelId]}
                 minSize="30%"
+                tabindex="0"
               >
                 <EuiText>
                   <div>{text}</div>
@@ -91,6 +92,7 @@ export default () => {
                 id={secondPanelId}
                 size={sizes[secondPanelId]}
                 minSize="200px"
+                tabindex="0"
               >
                 <EuiText>{text}</EuiText>
               </EuiResizablePanel>
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 53b1e247277..4c4e9f5c400 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -212,6 +212,17 @@ export const ResizableContainerExample = {
         <strong>EuiResizablePanel</strong> component and put the{' '}
         <strong>EuiResizableButton</strong> component between.
       </p>
+
+      <>
+        <EuiCallOut title="Consider adding a tabindex for keyboard accessibility">
+          <p>
+            Add a prop <EuiCode>tabindex=&ldquo;0&rdquo;</EuiCode> to the{' '}
+            <strong>EuiResizableContainer</strong> if it is a fixed height or
+            has a lot of content. This ensures keyboard users can set focus on
+            the container and scroll to the bottom using arrow keys.
+          </p>
+        </EuiCallOut>
+      </>
     </EuiText>
   ),
   sections: [
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
index 97783e35988..946ff0d94c0 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
@@ -93,6 +93,7 @@ export default () => {
               id={firstPanelId}
               size={sizes[firstPanelId]}
               minSize="30%"
+              tabindex="0"
             >
               <EuiText>
                 <div>{text}</div>
@@ -105,6 +106,7 @@ export default () => {
               id={secondPanelId}
               size={sizes[secondPanelId]}
               minSize="200px"
+              tabindex="0"
             >
               <EuiText>
                 <div>{text}</div>
diff --git a/src-docs/src/views/resizable_container/resizable_container_vertical.tsx b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
index 251889e04e2..2ca602525a2 100644
--- a/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
@@ -13,7 +13,7 @@ export default () => (
   <EuiResizableContainer style={{ height: '400px' }} direction="vertical">
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
-        <EuiResizablePanel initialSize={60} minSize="40%">
+        <EuiResizablePanel initialSize={60} minSize="40%" tabindex="0">
           <EuiText>
             <div>{text}</div>
           </EuiText>
@@ -21,7 +21,7 @@ export default () => (
 
         <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={40} minSize="10%">
+        <EuiResizablePanel initialSize={40} minSize="10%" tabindex="0">
           <EuiText>
             <div>{text}</div>
           </EuiText>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
index 7cd4f67c5eb..b9774ffb83c 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
@@ -100,7 +100,12 @@ export default () => {
 
               <EuiResizableButton />
 
-              <EuiResizablePanel mode="main" initialSize={60} minSize="50px">
+              <EuiResizablePanel
+                mode="main"
+                initialSize={60}
+                minSize="50px"
+                tabindex="0"
+              >
                 <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
                   <EuiTitle>
                     <p>{itemSelected.label}</p>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
index 2e681ec5237..f9dc8bb2dab 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
@@ -66,7 +66,12 @@ export default () => {
 
             <EuiResizableButton />
 
-            <EuiResizablePanel mode="main" initialSize={60} minSize="20%">
+            <EuiResizablePanel
+              mode="main"
+              initialSize={60}
+              minSize="20%"
+              tabindex="0"
+            >
               <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
                 <EuiTitle>
                   <p>{itemSelected.label}</p>
diff --git a/src-docs/src/views/resizable_container/resizable_panels.tsx b/src-docs/src/views/resizable_container/resizable_panels.tsx
index 0e678c45e08..3926f4990e4 100644
--- a/src-docs/src/views/resizable_container/resizable_panels.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panels.tsx
@@ -29,6 +29,7 @@ export default () => (
           borderRadius="m"
           wrapperPadding="m"
           minSize="20%"
+          tabindex="0"
         >
           <EuiText size="s">
             <p>
diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx
index e046ff933bb..81e8c10127e 100644
--- a/src/components/resizable_container/resizable_panel.tsx
+++ b/src/components/resizable_container/resizable_panel.tsx
@@ -128,6 +128,10 @@ export interface EuiResizablePanelProps
    * Custom CSS properties applied to the wrapping `.euiResizablePanel` div
    */
   style?: CSSProperties;
+  /**
+   * tabindex="0" provides full keyboard access when content overflows `<EuiResizablePanel />`
+   */
+  tabindex?: string;
   /**
    * Props to add to the wrapping `.euiResizablePanel` div
    */

From 22f97c555330e7a8e7a6e7ce74684472f8633398 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Wed, 18 Jan 2023 15:01:36 -0600
Subject: [PATCH 2/4] Added unit test and corrected tabIndex type.

---
 .../resizable_container_basic.tsx             |  4 ++--
 .../resizable_container_callbacks.tsx         |  4 ++--
 .../resizable_container_example.js            |  2 +-
 .../resizable_container_reset_values.tsx      |  4 ++--
 .../resizable_container_vertical.tsx          |  4 ++--
 .../resizable_panel_collapsible.tsx           |  2 +-
 .../resizable_panel_collapsible_options.tsx   |  2 +-
 .../resizable_container/resizable_panels.tsx  |  2 +-
 .../resizable_panel.test.tsx.snap             | 20 +++++++++++++++++++
 .../resizable_panel.test.tsx                  | 12 +++++++++++
 .../resizable_container/resizable_panel.tsx   |  4 ++--
 upcoming_changelogs/6534.md                   |  3 +++
 12 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 upcoming_changelogs/6534.md

diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.tsx b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
index 5347c798f7e..c70d8ba54d8 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
@@ -14,7 +14,7 @@ export default () => (
   <EuiResizableContainer style={{ height: '200px' }}>
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
-        <EuiResizablePanel initialSize={50} minSize="30%" tabindex="0">
+        <EuiResizablePanel initialSize={50} minSize="30%" tabIndex={0}>
           <EuiText>
             <div>{text}</div>
             <a href="">Hello world</a>
@@ -23,7 +23,7 @@ export default () => (
 
         <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={50} minSize="200px" tabindex="0">
+        <EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
           <EuiText>{text}</EuiText>
         </EuiResizablePanel>
       </>
diff --git a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
index 5f9534dcb57..aec980b2ad1 100644
--- a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
@@ -78,7 +78,7 @@ export default () => {
                 id={firstPanelId}
                 size={sizes[firstPanelId]}
                 minSize="30%"
-                tabindex="0"
+                tabIndex={0}
               >
                 <EuiText>
                   <div>{text}</div>
@@ -92,7 +92,7 @@ export default () => {
                 id={secondPanelId}
                 size={sizes[secondPanelId]}
                 minSize="200px"
-                tabindex="0"
+                tabIndex={0}
               >
                 <EuiText>{text}</EuiText>
               </EuiResizablePanel>
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 4c4e9f5c400..ef097f17f30 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -216,7 +216,7 @@ export const ResizableContainerExample = {
       <>
         <EuiCallOut title="Consider adding a tabindex for keyboard accessibility">
           <p>
-            Add a prop <EuiCode>tabindex=&ldquo;0&rdquo;</EuiCode> to the{' '}
+            Add a prop <EuiCode>tabIndex={0}</EuiCode> to the{' '}
             <strong>EuiResizableContainer</strong> if it is a fixed height or
             has a lot of content. This ensures keyboard users can set focus on
             the container and scroll to the bottom using arrow keys.
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
index 946ff0d94c0..7d5ce5ece77 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
@@ -93,7 +93,7 @@ export default () => {
               id={firstPanelId}
               size={sizes[firstPanelId]}
               minSize="30%"
-              tabindex="0"
+              tabIndex={0}
             >
               <EuiText>
                 <div>{text}</div>
@@ -106,7 +106,7 @@ export default () => {
               id={secondPanelId}
               size={sizes[secondPanelId]}
               minSize="200px"
-              tabindex="0"
+              tabIndex={0}
             >
               <EuiText>
                 <div>{text}</div>
diff --git a/src-docs/src/views/resizable_container/resizable_container_vertical.tsx b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
index 2ca602525a2..1efa8567291 100644
--- a/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
@@ -13,7 +13,7 @@ export default () => (
   <EuiResizableContainer style={{ height: '400px' }} direction="vertical">
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
-        <EuiResizablePanel initialSize={60} minSize="40%" tabindex="0">
+        <EuiResizablePanel initialSize={60} minSize="40%" tabIndex={0}>
           <EuiText>
             <div>{text}</div>
           </EuiText>
@@ -21,7 +21,7 @@ export default () => (
 
         <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={40} minSize="10%" tabindex="0">
+        <EuiResizablePanel initialSize={40} minSize="10%" tabIndex={0}>
           <EuiText>
             <div>{text}</div>
           </EuiText>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
index b9774ffb83c..8f56491f2ce 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
@@ -104,7 +104,7 @@ export default () => {
                 mode="main"
                 initialSize={60}
                 minSize="50px"
-                tabindex="0"
+                tabIndex={0}
               >
                 <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
                   <EuiTitle>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
index f9dc8bb2dab..9a764ff998e 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
@@ -70,7 +70,7 @@ export default () => {
               mode="main"
               initialSize={60}
               minSize="20%"
-              tabindex="0"
+              tabIndex={0}
             >
               <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
                 <EuiTitle>
diff --git a/src-docs/src/views/resizable_container/resizable_panels.tsx b/src-docs/src/views/resizable_container/resizable_panels.tsx
index 3926f4990e4..27a3fda5da5 100644
--- a/src-docs/src/views/resizable_container/resizable_panels.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panels.tsx
@@ -29,7 +29,7 @@ export default () => (
           borderRadius="m"
           wrapperPadding="m"
           minSize="20%"
-          tabindex="0"
+          tabIndex={0}
         >
           <EuiText size="s">
             <p>
diff --git a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
index f7c68c8c1ae..16a4d8cafd7 100644
--- a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiResizablePanel props tabindex 1`] = `
+<div>
+  <div
+    class="euiResizablePanel emotion-euiResizablePanel-l"
+    data-position="middle"
+    id="resizable-panel_generated-id"
+    style="inline-size: 100%; block-size: 0%;"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
+      data-test-subj="test subject string"
+      tabindex="0"
+    >
+      Content
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiResizablePanel props wrapperPadding 1`] = `
 <div>
   <div
diff --git a/src/components/resizable_container/resizable_panel.test.tsx b/src/components/resizable_container/resizable_panel.test.tsx
index f3c4fbde921..b270c1aa7cd 100644
--- a/src/components/resizable_container/resizable_panel.test.tsx
+++ b/src/components/resizable_container/resizable_panel.test.tsx
@@ -57,5 +57,17 @@ describe('EuiResizablePanel', () => {
 
       expect(container).toMatchSnapshot();
     });
+
+    test('tabindex', () => {
+      const { container } = render(
+        <EuiResizableContainerContextProvider registry={mockRegistry}>
+          <EuiResizablePanel {...requiredProps} wrapperPadding="l" tabIndex={0}>
+            Content
+          </EuiResizablePanel>
+        </EuiResizableContainerContextProvider>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx
index 81e8c10127e..c419477e35e 100644
--- a/src/components/resizable_container/resizable_panel.tsx
+++ b/src/components/resizable_container/resizable_panel.tsx
@@ -129,9 +129,9 @@ export interface EuiResizablePanelProps
    */
   style?: CSSProperties;
   /**
-   * tabindex="0" provides full keyboard access when content overflows `<EuiResizablePanel />`
+   * tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
    */
-  tabindex?: string;
+  tabIndex?: number;
   /**
    * Props to add to the wrapping `.euiResizablePanel` div
    */
diff --git a/upcoming_changelogs/6534.md b/upcoming_changelogs/6534.md
new file mode 100644
index 00000000000..609b53995fd
--- /dev/null
+++ b/upcoming_changelogs/6534.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiResizablePanel` to accept `tabindex` prop so keyboard users can navigate content that overflows its container

From 021850e2718f8d6937bc899efefa5edf30802463 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Wed, 18 Jan 2023 15:04:42 -0600
Subject: [PATCH 3/4] Renaming tabindex to tabIndex for consistency in docs.

---
 .../views/resizable_container/resizable_container_example.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index ef097f17f30..982ee91088f 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -214,7 +214,7 @@ export const ResizableContainerExample = {
       </p>
 
       <>
-        <EuiCallOut title="Consider adding a tabindex for keyboard accessibility">
+        <EuiCallOut title="Consider adding a tabIndex for keyboard accessibility">
           <p>
             Add a prop <EuiCode>tabIndex={0}</EuiCode> to the{' '}
             <strong>EuiResizableContainer</strong> if it is a fixed height or

From 545b6dad0185ee58e7934036413b0ab565f86369 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Mon, 23 Jan 2023 16:57:35 -0600
Subject: [PATCH 4/4] Renaming test description. Removing changelog.

---
 .../__snapshots__/resizable_panel.test.tsx.snap                | 2 +-
 src/components/resizable_container/resizable_panel.test.tsx    | 2 +-
 upcoming_changelogs/6534.md                                    | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)
 delete mode 100644 upcoming_changelogs/6534.md

diff --git a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
index 16a4d8cafd7..5aa9524398c 100644
--- a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiResizablePanel props tabindex 1`] = `
+exports[`EuiResizablePanel props tabIndex 1`] = `
 <div>
   <div
     class="euiResizablePanel emotion-euiResizablePanel-l"
diff --git a/src/components/resizable_container/resizable_panel.test.tsx b/src/components/resizable_container/resizable_panel.test.tsx
index b270c1aa7cd..8e1c1c5fa80 100644
--- a/src/components/resizable_container/resizable_panel.test.tsx
+++ b/src/components/resizable_container/resizable_panel.test.tsx
@@ -58,7 +58,7 @@ describe('EuiResizablePanel', () => {
       expect(container).toMatchSnapshot();
     });
 
-    test('tabindex', () => {
+    test('tabIndex', () => {
       const { container } = render(
         <EuiResizableContainerContextProvider registry={mockRegistry}>
           <EuiResizablePanel {...requiredProps} wrapperPadding="l" tabIndex={0}>
diff --git a/upcoming_changelogs/6534.md b/upcoming_changelogs/6534.md
deleted file mode 100644
index 609b53995fd..00000000000
--- a/upcoming_changelogs/6534.md
+++ /dev/null
@@ -1,3 +0,0 @@
-**Bug fixes**
-
-- Fixed `EuiResizablePanel` to accept `tabindex` prop so keyboard users can navigate content that overflows its container