diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap index 0e090bebf0..14872fd654 100644 --- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap +++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap @@ -2282,10 +2282,6 @@ p.c4p--about-modal__copyright-text:first-child { border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0); } -.c4p--create-full-page__header button:first-of-type { - background: none; -} - /* One or two values * - width (first value) * - min-width (optional second value) diff --git a/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss b/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss index 3ad632d0b5..fca2991111 100644 --- a/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss +++ b/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss @@ -176,10 +176,3 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step; .#{$block-class} .#{$block-class}__buttons { border-top: 1px solid $layer-accent-01; } - -.#{$block-class}__header { - /* stylelint-disable-next-line max-nesting-depth */ - button:first-of-type { - background: none; - } -} diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js index 7393dcaca9..1a1c9de579 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js @@ -19,7 +19,7 @@ import userEvent from '@testing-library/user-event'; import { inputData, inputDataDynamicOptions } from './assets/sampleInput'; import { sampleDataStructure_sentence, - sampleDataStructure_tree, + // sampleDataStructure_tree, } from './assets/SampleData'; const blockClass = `${pkg.prefix}--condition-builder`; @@ -1249,386 +1249,4 @@ describe(componentName, () => { expect(selectedItem); }); - - // keyboard navigation tests - //for sentence variant - it('add and remove conditions using keyboard', async () => { - render( - - ); - - expect(screen.getByText('Add condition')); - await act(() => userEvent.keyboard('{Tab}')); - expect(screen.getByText('Add condition')).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - //adding first condition - - expect(screen.getByRole('searchbox')).toHaveFocus(); - await act(() => userEvent.keyboard('{Tab}')); - expect( - screen.getByRole('option', { - name: 'Continent', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{Enter}')); - expect( - screen.getByRole('option', { - name: 'is', - }) - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByRole('searchbox')).toHaveFocus(); - - await act(() => userEvent.keyboard('{Tab}')); - expect( - screen.getByRole('option', { - name: 'Africa', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByText('Continent')); - expect(screen.getByText('is')); - expect(screen.getByRole('button', { name: 'Africa' })).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - - expect( - document.querySelector(`.${blockClass}__close-condition`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - - expect(document.querySelector(`.${blockClass}__add-button`)).toHaveFocus(); - - //adding second condition - - await act(() => userEvent.keyboard('{Enter}')); - expect(screen.getByRole('searchbox')).toHaveFocus(); - await act(() => userEvent.keyboard('{Tab}')); - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - screen.getByRole('option', { - name: 'Region', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{Enter}')); - await act(() => userEvent.keyboard('{ArrowDown}')); - - expect( - screen.getByRole('option', { - name: 'is one of', - }) - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByRole('searchbox')).toHaveFocus(); - - await act(() => userEvent.keyboard('{Tab}')); - await act(() => userEvent.keyboard('{Tab}')); - expect( - screen.getByRole('option', { - name: 'Afghanistan', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard(' ')); - await act(() => userEvent.keyboard('{Escape}')); - - expect(screen.getByText('Region')); - expect(screen.getByText('is one of')); - expect(screen.getByRole('button', { name: 'Afghanistan' })).toHaveFocus(); - - //checking arrow up/down will select next row same cell - await act(() => userEvent.keyboard('{ArrowUp}')); - expect(screen.getByRole('button', { name: 'Africa' })).toHaveFocus(); - await act(() => userEvent.keyboard('{ArrowDown}')); - expect(screen.getByRole('button', { name: 'Afghanistan' })).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - - expect( - document.querySelectorAll(`.${blockClass}__close-condition`)[1] - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - expect( - document.querySelectorAll(`.${blockClass}__close-condition`)[0] - ).toHaveFocus(); - await act(() => userEvent.keyboard('{ArrowLeft}')); - await act(() => userEvent.keyboard('{ArrowLeft}')); - - await act(() => userEvent.keyboard('{ArrowLeft}')); - expect(screen.getByRole('button', { name: 'Continent' })).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - await act(() => userEvent.keyboard('{ArrowRight}')); - await act(() => userEvent.keyboard('{ArrowRight}')); - expect( - document.querySelectorAll(`.${blockClass}__close-condition`)[0] - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - await act(() => userEvent.keyboard('{Tab}')); - expect(screen.getByText('Add condition')).toHaveFocus(); - }); - - //for tree variant - it('add and remove conditions using keyboard', async () => { - render( - - ); - - //adding first condition - expect(screen.getByText('Add condition')); - await act(() => userEvent.keyboard('{Tab}')); - expect(screen.getByText('Add condition')).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByRole('searchbox')).toHaveFocus(); - await act(() => userEvent.keyboard('{Tab}')); - expect( - screen.getByRole('option', { - name: 'Continent', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{Enter}')); - expect( - screen.getByRole('option', { - name: 'is', - }) - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByRole('searchbox')).toHaveFocus(); - - await act(() => userEvent.keyboard('{Tab}')); - expect( - screen.getByRole('option', { - name: 'Africa', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - screen.getByRole('option', { - name: 'Asia', - }) - ).toHaveFocus(); - await act(() => userEvent.keyboard('{ArrowUp}')); - await act(() => userEvent.keyboard('{ArrowUp}')); - - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByText('Continent')); - expect(screen.getByText('is')); - expect(screen.getByRole('button', { name: 'Africa' })).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - - expect( - document.querySelector(`.${blockClass}__close-condition`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - - expect(document.querySelector(`.${blockClass}__add-button`)).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - expect( - document.querySelector(`.${blockClass}__add-condition-sub-group`) - ).toHaveFocus(); - - //adding second condition - - await act(() => userEvent.keyboard('{Enter}')); - expect(screen.getByRole('searchbox')).toHaveFocus(); - await act(() => userEvent.keyboard('{Tab}')); - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - screen.getByRole('option', { - name: 'Region', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{Enter}')); - await act(() => userEvent.keyboard('{ArrowDown}')); - - expect( - screen.getByRole('option', { - name: 'is one of', - }) - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - expect(screen.getByRole('searchbox')).toHaveFocus(); - - await act(() => userEvent.keyboard('{Tab}')); - await act(() => userEvent.keyboard('{Tab}')); - expect( - screen.getByRole('option', { - name: 'Afghanistan', - }) - ).toHaveFocus(); - - await act(() => userEvent.keyboard(' ')); - await act(() => userEvent.keyboard('{Escape}')); - - expect(screen.getByText('Region')); - expect(screen.getByText('is one of')); - expect(screen.getByRole('button', { name: 'Afghanistan' })).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - - expect( - document.querySelectorAll(`.${blockClass}__close-condition`)[1] - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - expect(screen.getByRole('button', { name: 'Continent' })).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - await act(() => userEvent.keyboard('{ArrowRight}')); - await act(() => userEvent.keyboard('{ArrowRight}')); - expect( - document.querySelectorAll(`.${blockClass}__close-condition`)[0] - ).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - await act(() => userEvent.keyboard('{Tab}')); - expect(screen.getByText('Add condition')).toHaveFocus(); - }); - - it('row navigation using keyboard', async () => { - render( - - ); - - expect(screen.getByText('Add condition')); - await act(() => userEvent.keyboard('{Tab}')); - expect(screen.getByText('Add condition')).toHaveFocus(); - await act(() => userEvent.keyboard('{Enter}')); - await act(() => userEvent.keyboard('{Tab}')); - - expect( - document.querySelector(`[role="row"][aria-level="1"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="2"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="3"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="5"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowDown}')); - expect( - document.querySelector(`[role="row"][aria-level="3"][aria-posinset="3"]`) - ).toHaveFocus(); - - //reverse row navigation - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="5"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="3"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="2"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowUp}')); - expect( - document.querySelector(`[role="row"][aria-level="1"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) - ).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowRight}')); - expect(screen.getAllByRole('button', { name: 'Region' })[0]).toHaveFocus(); - - await act(() => userEvent.keyboard('{ArrowLeft}')); - expect( - document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) - ).toHaveFocus(); - }); });