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