chore(splitview): working on adding focus story

adobe · Aug 28, 2023 · ae07ee9 · ae07ee9
1 parent 7776d96
commit ae07ee9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/components/splitview/index.css b/components/splitview/index.css
@@ -159,7 +159,6 @@ governing permissions and limitations under the License.
       border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
       box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
     }
-
     .spectrum-SplitView-gripper::before {
       background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
     }

diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js
@@ -1,3 +1,6 @@
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
 // Import the component markup template
 import { Template } from "./template";
 
@@ -99,6 +102,23 @@ HorizontallyResizable.args = {
 	panelStyles: ["width: 304px;", "flex: 1;"],
 };
 
+export const HorizontallyFocused = Template.bind({});
+HorizontallyFocused.play = async ({ canvasElement }) => {
+	const canvas = within(canvasElement);
+
+	const splitter = canvas.getByTestId('splitter');
+
+	splitter.focus();
+
+};
+HorizontallyFocused.args = {
+	orientation: "horizontal",
+	isResizable: true,
+	isCollapsible: false,
+	panelLabels: ["Left", "Right"],
+	panelStyles: ["width: 304px;", "flex: 1;"],
+};
+
 export const HorizontalCollapsedLeft = Template.bind({});
 HorizontalCollapsedLeft.args = {
 	orientation: "horizontal",

diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js
@@ -50,6 +50,8 @@ export const Template = ({
 					["is-draggable"]: isResizable,
 					[`is-collapsed-${collapsibleClassName}`]: isCollapsible,
 				})}
+				tabindex="0"
+				data-testid="splitter"
 			>
 				${when(
 					isResizable,