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; }