Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions src/button/__tests__/button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import React from 'react';
import { act, fireEvent, render } from '@testing-library/react';

import { clearMessageCache } from '@cloudscape-design/component-toolkit/internal';
import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';

import Button, { ButtonProps } from '../../../lib/components/button';
import InternalButton from '../../../lib/components/button/internal';
Expand Down Expand Up @@ -811,30 +814,34 @@ describe('table grid navigation support', () => {
}

test('does not override tab index when keyboard navigation is not active', () => {
renderWithSingleTabStopNavigation(<Button id="button" />, { navigationActive: false });
render(
<TestSingleTabStopNavigationProvider navigationActive={false}>
<Button id="button" />
</TestSingleTabStopNavigationProvider>
);
expect(getButton('#button')).not.toHaveAttribute('tabIndex');
});

test('overrides tab index when keyboard navigation is active', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<Button id="button1" />
<Button id="button2" />
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getButton('#button1'));
setTestSingleTabStopNavigationTarget(getButton('#button1'));
expect(getButton('#button1')).toHaveAttribute('tabIndex', '0');
expect(getButton('#button2')).toHaveAttribute('tabIndex', '-1');
});

test('does not override explicit tab index with 0', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<InternalButton id="button1" nativeButtonAttributes={{ tabIndex: -2 }} />
<InternalButton id="button2" nativeButtonAttributes={{ tabIndex: -2 }} />
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getButton('#button1'));
setTestSingleTabStopNavigationTarget(getButton('#button1'));
expect(getButton('#button1')).toHaveAttribute('tabIndex', '-2');
expect(getButton('#button2')).toHaveAttribute('tabIndex', '-2');
});
Expand Down
27 changes: 17 additions & 10 deletions src/checkbox/__tests__/checkbox.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
import React, { useState } from 'react';
import { render } from '@testing-library/react';

import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';

import Checkbox, { CheckboxProps } from '../../../lib/components/checkbox';
import InternalCheckbox from '../../../lib/components/checkbox/internal';
Expand Down Expand Up @@ -243,30 +246,34 @@ describe('table grid navigation support', () => {
}

test('does not override tab index when keyboard navigation is not active', () => {
renderWithSingleTabStopNavigation(<Checkbox id="checkbox" checked={false} />, { navigationActive: false });
render(
<TestSingleTabStopNavigationProvider navigationActive={false}>
<Checkbox id="checkbox" checked={false} />
</TestSingleTabStopNavigationProvider>
);
expect(getCheckboxInput('#checkbox')).not.toHaveAttribute('tabIndex');
});

test('overrides tab index when keyboard navigation is active', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<Checkbox id="checkbox1" checked={false} />
<Checkbox id="checkbox2" checked={false} />
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getCheckboxInput('#checkbox1'));
setTestSingleTabStopNavigationTarget(getCheckboxInput('#checkbox1'));
expect(getCheckboxInput('#checkbox1')).toHaveAttribute('tabIndex', '0');
expect(getCheckboxInput('#checkbox2')).toHaveAttribute('tabIndex', '-1');
});

test('does not override explicit tab index with 0', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<InternalCheckbox id="checkbox1" checked={false} tabIndex={-1} />
<InternalCheckbox id="checkbox2" checked={false} tabIndex={-1} />
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getCheckboxInput('#checkbox1'));
setTestSingleTabStopNavigationTarget(getCheckboxInput('#checkbox1'));
expect(getCheckboxInput('#checkbox1')).toHaveAttribute('tabIndex', '-1');
expect(getCheckboxInput('#checkbox2')).toHaveAttribute('tabIndex', '-1');
});
Expand Down
25 changes: 18 additions & 7 deletions src/link/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
import React from 'react';
import { act, render } from '@testing-library/react';

import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';
import { KeyCode } from '@cloudscape-design/test-utils-core/utils';

import FormField from '../../../lib/components/form-field';
Expand Down Expand Up @@ -285,23 +288,31 @@ describe('table grid navigation support', () => {
}

test('does not override tab index for button link when keyboard navigation is not active', () => {
renderWithSingleTabStopNavigation(<Link id="link" />, { navigationActive: false });
render(
<TestSingleTabStopNavigationProvider navigationActive={false}>
<Link id="link" />
</TestSingleTabStopNavigationProvider>
);
expect(getLink('#link')).toHaveAttribute('tabIndex', '0');
});

test('does not override tab index for anchor link when keyboard navigation is not active', () => {
renderWithSingleTabStopNavigation(<Link id="link" href="#" />, { navigationActive: false });
render(
<TestSingleTabStopNavigationProvider navigationActive={false}>
<Link id="link" href="#" />
</TestSingleTabStopNavigationProvider>
);
expect(getLink('#link')).not.toHaveAttribute('tabIndex');
});

test.each([undefined, '#'])('overrides tab index when keyboard navigation is active href=%s', href => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<Link id="link1" href={href} />
<Link id="link2" href={href} />
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getLink('#link1'));
setTestSingleTabStopNavigationTarget(getLink('#link1'));
expect(getLink('#link1')).toHaveAttribute('tabIndex', '0');
expect(getLink('#link2')).toHaveAttribute('tabIndex', '-1');
});
Expand Down
27 changes: 17 additions & 10 deletions src/popover/__tests__/popover.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
import React from 'react';
import { act, render } from '@testing-library/react';

import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';
import { KeyCode } from '@cloudscape-design/test-utils-core/utils';

import '../../__a11y__/to-validate-a11y';
Expand Down Expand Up @@ -366,29 +369,33 @@ describe('table grid navigation support', () => {
}

test('does not override tab index when keyboard navigation is not active', () => {
renderWithSingleTabStopNavigation(<Popover>Trigger</Popover>, { navigationActive: false });
render(
<TestSingleTabStopNavigationProvider navigationActive={false}>
<Popover>Trigger</Popover>
</TestSingleTabStopNavigationProvider>
);
expect(getTrigger()).not.toHaveAttribute('tabIndex');
});

test('overrides tab index when keyboard navigation is active', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<Popover id="popover1">Trigger</Popover>
<Popover id="popover2">Trigger</Popover>
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getTrigger('#popover1'));
setTestSingleTabStopNavigationTarget(getTrigger('#popover1'));
expect(getTrigger('#popover1')).toHaveAttribute('tabIndex', '0');
expect(getTrigger('#popover2')).toHaveAttribute('tabIndex', '-1');
});

test('does not override tab index for custom trigger', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<Popover triggerType="custom">Trigger</Popover>
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getTrigger());
setTestSingleTabStopNavigationTarget(getTrigger());
expect(getTrigger()).not.toHaveAttribute('tabIndex');
});
});
Expand Down
21 changes: 13 additions & 8 deletions src/radio-group/__tests__/radio-group.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
import React, { useState } from 'react';
import { act, render } from '@testing-library/react';

import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';

import '../../__a11y__/to-validate-a11y';
import RadioGroup, { RadioGroupProps } from '../../../lib/components/radio-group';
Expand Down Expand Up @@ -369,20 +372,22 @@ describe('table grid navigation support', () => {
}

test('does not override tab index when keyboard navigation is not active', () => {
renderWithSingleTabStopNavigation(<RadioGroup id="radio" value={null} items={[{ value: '1', label: 'One' }]} />, {
navigationActive: false,
});
render(
<TestSingleTabStopNavigationProvider navigationActive={false}>
<RadioGroup id="radio" value={null} items={[{ value: '1', label: 'One' }]} />
</TestSingleTabStopNavigationProvider>
);
expect(getRadioInput('#radio')).not.toHaveAttribute('tabIndex');
});

test('overrides tab index when keyboard navigation is active', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(
<div>
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<RadioGroup id="radio1" value={null} items={[{ value: '1', label: 'One' }]} />
<RadioGroup id="radio2" value={null} items={[{ value: '2', label: 'Two' }]} />
</div>
</TestSingleTabStopNavigationProvider>
);
setCurrentTarget(getRadioInput('#radio1'));
setTestSingleTabStopNavigationTarget(getRadioInput('#radio1'));
expect(getRadioInput('#radio1')).toHaveAttribute('tabIndex', '0');
expect(getRadioInput('#radio2')).toHaveAttribute('tabIndex', '-1');
});
Expand Down
15 changes: 11 additions & 4 deletions src/table/__tests__/body-cell.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
import * as React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';

import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';

import { LiveRegionController } from '../../../lib/components/live-region/controller.js';
import { TableBodyCell, TableBodyCellProps } from '../../../lib/components/table/body-cell';
Expand Down Expand Up @@ -336,13 +339,17 @@ describe('TableBodyCell', () => {
});

test('does not set tab index when negative', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(<TestComponent />, { navigationActive: true });
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<TestComponent />
</TestSingleTabStopNavigationProvider>
);
const tableCell = wrapper().find('td')!.getElement();

expect(tableCell).not.toHaveAttribute('tabIndex');
setCurrentTarget(tableCell);
setTestSingleTabStopNavigationTarget(tableCell);
expect(tableCell).toHaveAttribute('tabIndex', '0');
setCurrentTarget(null);
setTestSingleTabStopNavigationTarget(null);
expect(tableCell).not.toHaveAttribute('tabIndex');
});

Expand Down
17 changes: 11 additions & 6 deletions src/table/__tests__/header-cell.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';

import { ContainerQueryEntry } from '@cloudscape-design/component-toolkit';
import { renderWithSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal/testing';
import {
setTestSingleTabStopNavigationTarget,
TestSingleTabStopNavigationProvider,
} from '@cloudscape-design/component-toolkit/internal/testing';

import TestI18nProvider from '../../../lib/components/i18n/testing';
import { TableHeaderCell, TableHeaderCellProps } from '../../../lib/components/table/header-cell';
Expand Down Expand Up @@ -124,15 +127,17 @@ describe('i18n', () => {
});

test('does not set tab index when negative', () => {
const { setCurrentTarget } = renderWithSingleTabStopNavigation(<TestComponent />, {
navigationActive: true,
});
render(
<TestSingleTabStopNavigationProvider navigationActive={true}>
<TestComponent />
</TestSingleTabStopNavigationProvider>
);
const headerCell = document.querySelector('th')!;

expect(headerCell).not.toHaveAttribute('tabIndex');
setCurrentTarget(headerCell);
setTestSingleTabStopNavigationTarget(headerCell);
expect(headerCell).toHaveAttribute('tabIndex', '0');
setCurrentTarget(null);
setTestSingleTabStopNavigationTarget(null);
expect(headerCell).not.toHaveAttribute('tabIndex');
});
});
Loading