diff --git a/e2e/components/TreeView/TreeView-test.avt.e2e.js b/e2e/components/TreeView/TreeView-test.avt.e2e.js
new file mode 100644
index 000000000000..bebac61a8ea7
--- /dev/null
+++ b/e2e/components/TreeView/TreeView-test.avt.e2e.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('TreeView @avt', () => {
+ test.skip('accessibility-checker default', async ({ page }) => {
+ await visitStory(page, {
+ component: 'TreeView',
+ id: 'components-treeview--default',
+ globals: {
+ theme: 'white',
+ },
+ });
+ await expect(page).toHaveNoACViolations('components-treeview--default');
+ });
+
+ test.skip('accessibility-checker with-icons', async ({ page }) => {
+ await visitStory(page, {
+ component: 'TreeView',
+ id: 'components-treeview--with-icons',
+ globals: {
+ theme: 'white',
+ },
+ });
+ await expect(page).toHaveNoACViolations('components-treeview--with-icons');
+ });
+
+ test('treeview - keyboard nav', async ({ page }) => {
+ await visitStory(page, {
+ component: 'TreeView',
+ id: 'components-treeview--with-icons',
+ globals: {
+ theme: 'white',
+ },
+ });
+ const tree = page.getByRole('tree');
+ const treeLeaf = page.getByRole('treeitem', {
+ name: 'Artificial intelligence',
+ });
+ const treeBranchOne = page.getByRole('treeitem', {
+ name: 'Cloud computing',
+ });
+ const treeBranchTwo = page.getByRole('treeitem', {
+ name: 'Data & Analytics',
+ });
+ const deepNode = page.getByRole('treeitem', {
+ name: 'Resources',
+ });
+
+ await expect(tree).toBeVisible();
+ await expect(treeLeaf).toBeVisible();
+ await expect(treeBranchOne).toBeVisible();
+ await expect(treeBranchTwo).toBeVisible();
+ await expect(deepNode).toBeVisible();
+
+ // Tab to the first item
+ await page.keyboard.press('Tab');
+ await expect(treeLeaf).toBeFocused();
+ // Second tab should tab off of the tree entirely
+ await page.keyboard.press('Tab');
+ await expect(treeLeaf).not.toBeFocused();
+ await expect(tree).not.toBeFocused();
+ // Tab back into tree, navigate with arrow keys
+ await page.keyboard.press('Shift+Tab');
+ await expect(treeLeaf).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await expect(treeBranchOne).toBeFocused();
+ // Close menu with ArrowLeft
+ await expect(treeBranchOne).toHaveAttribute('aria-expanded', 'true');
+ await page.keyboard.press('ArrowLeft');
+ await expect(treeBranchOne).toHaveAttribute('aria-expanded', 'false');
+ // Down arrow should go to next branch when closed, and should not go to disabled item
+ await page.keyboard.press('ArrowDown');
+ await expect(treeBranchTwo).toBeFocused();
+ await page.keyboard.press('ArrowDown');
+ await expect(treeBranchTwo).toBeFocused();
+ // Go back up to collapsed section, expand it, and traverse to bottom of branch
+ await page.keyboard.press('ArrowUp');
+ await expect(treeBranchOne).toBeFocused();
+ await page.keyboard.press('ArrowRight');
+ await expect(treeBranchOne).toHaveAttribute('aria-expanded', 'true');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await expect(deepNode).toBeFocused();
+ });
+});
diff --git a/e2e/components/TreeView/TreeView-test.e2e.js b/e2e/components/TreeView/TreeView-test.e2e.js
index 672df4896537..92ebfe724f74 100644
--- a/e2e/components/TreeView/TreeView-test.e2e.js
+++ b/e2e/components/TreeView/TreeView-test.e2e.js
@@ -7,9 +7,9 @@
'use strict';
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
test.describe('TreeView', () => {
themes.forEach((theme) => {
@@ -23,15 +23,4 @@ test.describe('TreeView', () => {
});
});
});
-
- test('accessibility-checker @avt', async ({ page }) => {
- await visitStory(page, {
- component: 'TreeView',
- id: 'components-treeview--default',
- globals: {
- theme: 'white',
- },
- });
- await expect(page).toHaveNoACViolations('TreeView');
- });
});
diff --git a/packages/react/src/components/TreeView/Treeview.stories.js b/packages/react/src/components/TreeView/Treeview.stories.js
index a088fbede18f..27a4f532da1d 100644
--- a/packages/react/src/components/TreeView/Treeview.stories.js
+++ b/packages/react/src/components/TreeView/Treeview.stories.js
@@ -13,85 +13,85 @@ import './story.scss';
const nodes = [
{
id: '1',
- value: 'Level 1 (leaf)',
- label: Level 1 (leaf),
+ value: 'Artificial intelligence',
+ label: Artificial intelligence,
renderIcon: Document,
},
{
id: '2',
- value: 'Level 1 (leaf)',
- label: 'Level 1 (leaf)',
+ value: 'Blockchain',
+ label: 'Blockchain',
renderIcon: Document,
},
{
id: '3',
- value: 'Level 1 (branch)',
- label: 'Level 1 (branch)',
+ value: 'Business automation',
+ label: 'Business automation',
renderIcon: Folder,
children: [
{
id: '3-1',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Business process automation',
+ label: 'Business process automation',
renderIcon: Document,
},
{
id: '3-2',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Business process mapping',
+ label: 'Business process mapping',
renderIcon: Document,
},
],
},
{
id: '4',
- value: 'Level 1 (leaf)',
- label: 'Level 1 (leaf)',
+ value: 'Business operations',
+ label: 'Business operations',
renderIcon: Document,
},
{
id: '5',
- value: 'Level 1 (branch)',
- label: 'Level 1 (branch)',
+ value: 'Cloud computing',
+ label: 'Cloud computing',
isExpanded: true,
renderIcon: Folder,
children: [
{
id: '5-1',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Containers',
+ label: 'Containers',
renderIcon: Document,
},
{
id: '5-2',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Databases',
+ label: 'Databases',
renderIcon: Document,
},
{
id: '5-3',
- value: 'Level 2 (branch)',
- label: 'Level 2 (branch)',
+ value: 'DevOps',
+ label: 'DevOps',
isExpanded: true,
renderIcon: Folder,
children: [
{
id: '5-4',
- value: 'Level 3 (leaf)',
- label: 'Level 3 (leaf)',
+ value: 'Solutions',
+ label: 'Solutions',
renderIcon: Document,
},
{
id: '5-5',
- value: 'Level 3 (branch)',
- label: 'Level 3 (branch)',
+ value: 'Case studies',
+ label: 'Case studies',
isExpanded: true,
renderIcon: Folder,
children: [
{
id: '5-6',
- value: 'Level 4 (leaf)',
- label: 'Level 4 (leaf)',
+ value: 'Resources',
+ label: 'Resources',
renderIcon: Document,
},
],
@@ -102,61 +102,61 @@ const nodes = [
},
{
id: '6',
- value: 'Level 1 (branch)',
- label: 'Level 1 (branch)',
+ value: 'Data & Analytics',
+ label: 'Data & Analytics',
renderIcon: Folder,
children: [
{
id: '6-1',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Big data',
+ label: 'Big data',
renderIcon: Document,
},
{
id: '6-2',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Business intelligence',
+ label: 'Business intelligence',
renderIcon: Document,
},
],
},
{
id: '7',
- value: 'Level 1 (branch)',
- label: 'Level 1 (branch)',
+ value: 'Models',
+ label: 'Models',
isExpanded: true,
disabled: true,
renderIcon: Folder,
children: [
{
id: '7-1',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Audit',
+ label: 'Audit',
renderIcon: Document,
},
{
id: '7-2',
- value: 'Level 2 (leaf)',
- label: 'Level 2 (leaf)',
+ value: 'Monthly data',
+ label: 'Monthly data',
renderIcon: Document,
},
{
id: '8',
- value: 'Level 2 (branch)',
- label: 'Level 2 (branch)',
+ value: 'Data warehouse',
+ label: 'Data warehouse',
isExpanded: true,
renderIcon: Folder,
children: [
{
id: '8-1',
- value: 'Level 3 (leaf)',
- label: 'Level 3 (leaf)',
+ value: 'Report samples',
+ label: 'Report samples',
renderIcon: Document,
},
{
id: '8-2',
- value: 'Level 3 (leaf)',
- label: 'Level 3 (leaf)',
+ value: 'Sales performance',
+ label: 'Sales performance',
renderIcon: Document,
},
],
diff --git a/packages/react/src/components/TreeView/story.scss b/packages/react/src/components/TreeView/story.scss
index 3c3ab54f54dc..549da04599a3 100644
--- a/packages/react/src/components/TreeView/story.scss
+++ b/packages/react/src/components/TreeView/story.scss
@@ -6,5 +6,5 @@
//
.cds--tree {
- width: 16rem;
+ width: 20rem;
}