Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(cauldron): Release 6.10.0 #1728

Merged
merged 4 commits into from
Oct 16, 2024
Merged

chore(cauldron): Release 6.10.0 #1728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
adf5af8
Merge pull request #1726 from dequelabs/master
scurker Oct 16, 2024
1dd3478
chore: Generate a VPAT (#1727)
github-actions[bot] Oct 16, 2024
453f7da
feat(react): support react 17 (#1680)
anastasialanz Oct 16, 2024
4e59eea
chore(cauldron): Release 6.10.0
Oct 16, 2024
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
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [6.10.0](https://github.com/dequelabs/cauldron/compare/v6.9.0...v6.10.0) (2024-10-16)


### Features

* **react:** support react 17 ([#1680](https://github.com/dequelabs/cauldron/issues/1680)) ([453f7da](https://github.com/dequelabs/cauldron/commit/453f7da615342c04c437f68dc8ab4396dee775cc))

## [6.9.0](https://github.com/dequelabs/cauldron/compare/v6.8.0...v6.9.0) (2024-10-16)


Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "cauldron",
"private": true,
"version": "6.9.0",
"version": "6.10.0",
"license": "MPL-2.0",
"scripts": {
"clean": "rimraf dist docs/dist",
Expand Down Expand Up @@ -102,7 +102,7 @@
"prettier": "^2",
"puppeteer": "^22.12.1",
"react": "^17",
"react-dom": "^16.13.1",
"react-dom": "^17",
"react-helmet": "^5.2.1",
"react-router-dom": "^5.3.0",
"remark-frontmatter": "^5.0.0",
Expand Down
9 changes: 5 additions & 4 deletions packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@deque/cauldron-react",
"version": "6.9.0",
"version": "6.10.0",
"license": "MPL-2.0",
"description": "Fully accessible react components library for Deque Cauldron",
"homepage": "https://cauldron.dequelabs.com/",
Expand All @@ -25,7 +25,7 @@
"dependencies": {
"@popperjs/core": "^2.5.4",
"classnames": "^2.2.6",
"focus-trap-react": "8",
"focus-trap-react": "^10.2.3",
"focusable": "^2.3.0",
"keyname": "^0.1.0",
"react-id-generator": "^3.0.1",
Expand Down Expand Up @@ -65,8 +65,9 @@
"postcss-cli": "^7.1.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"prop-types": "^15.8.1",
"react": "^17",
"react-dom": "^17",
"rollup": "^2.23.0",
"sinon": "^10.0.0",
"ts-node": "^10.9.2",
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/components/ClickOutsideListener/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@ function ClickOutsideListener(

useEffect(() => {
typeof mouseEvent === 'string' &&
document.addEventListener(mouseEvent, handleEvent);
document.addEventListener(mouseEvent, handleEvent, true);
typeof touchEvent === 'string' &&
document.addEventListener(touchEvent, handleEvent);
document.addEventListener(touchEvent, handleEvent, true);

return () => {
typeof mouseEvent === 'string' &&
document.removeEventListener(mouseEvent, handleEvent);
document.removeEventListener(mouseEvent, handleEvent, true);
typeof touchEvent === 'string' &&
document.removeEventListener(touchEvent, handleEvent);
document.removeEventListener(touchEvent, handleEvent, true);
};
}, [mouseEvent, touchEvent]);

Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/components/Combobox/Combobox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,9 @@ test('should prevent default with enter keypress and open listbox', () => {
// rtl doesn't let us mock preventDefault
// see: https://github.com/testing-library/react-testing-library/issues/572
event.preventDefault = preventDefault;
if (type === 'focus') {
fireEvent.focusIn(combobox);
}
fireEvent(combobox, event);
};

Expand Down Expand Up @@ -545,6 +548,9 @@ test('should not prevent default with enter keypress and closed listbox', () =>
// rtl doesn't let us mock preventDefault
// see: https://github.com/testing-library/react-testing-library/issues/572
event.preventDefault = preventDefault;
if (type === 'focus') {
fireEvent.focusIn(combobox);
}
fireEvent(combobox, event);
};

Expand Down
92 changes: 63 additions & 29 deletions packages/react/src/components/OptionsMenu/OptionsMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import OptionsMenu from './';
import axe from '../../axe';

Expand All @@ -10,8 +11,10 @@ const trigger = (props: React.HTMLAttributes<HTMLButtonElement>) => (
);

test('should render menu', () => {
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li>option 1</li>
<li>option 2</li>
</OptionsMenu>
Expand All @@ -22,8 +25,10 @@ test('should render menu', () => {
});

test('should render children', () => {
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li>option 1</li>
<li>option 2</li>
</OptionsMenu>
Expand All @@ -33,8 +38,10 @@ test('should render children', () => {
});

test('should render trigger prop', () => {
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li className="foo">option 1</li>
</OptionsMenu>
);
Expand All @@ -43,8 +50,10 @@ test('should render trigger prop', () => {
});

test('should support className prop', () => {
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger} className="bananas">
<OptionsMenu onSelect={onSelect} trigger={trigger} className="bananas">
<li>option 1</li>
<li>option 2</li>
</OptionsMenu>
Expand All @@ -56,13 +65,15 @@ test('should support className prop', () => {
});

test('should support align prop', () => {
const onSelect = jest.fn();

render(
<>
<OptionsMenu trigger={trigger} align="left">
<OptionsMenu onSelect={onSelect} trigger={trigger} align="left">
<li>option 1</li>
<li>option 2</li>
</OptionsMenu>
<OptionsMenu trigger={trigger} align="right">
<OptionsMenu onSelect={onSelect} trigger={trigger} align="right">
<li>option 1</li>
<li>option 2</li>
</OptionsMenu>
Expand All @@ -79,8 +90,10 @@ test('should support align prop', () => {

test('should support menuRef prop', () => {
const menuRef = React.createRef<HTMLUListElement>();
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger} menuRef={menuRef}>
<OptionsMenu onSelect={onSelect} trigger={trigger} menuRef={menuRef}>
<li>option 1</li>
<li>option 2</li>
</OptionsMenu>
Expand All @@ -90,81 +103,101 @@ test('should support menuRef prop', () => {
expect(menuRef.current).toEqual(screen.getByRole('menu'));
});

test('should toggle menu on trigger clicks', () => {
test('should toggle menu on trigger clicks', async () => {
const user = userEvent.setup();
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li className="foo">option 1</li>
</OptionsMenu>
);

fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
const button = screen.getByRole('button', { name: 'trigger' });

await user.click(button);
expect(button).toHaveAttribute('aria-expanded', 'true');
expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'true');

fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
await user.click(button);

expect(button).toHaveAttribute('aria-expanded', 'false');
expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'false');
});

test('should click trigger with down key on trigger', () => {
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li className="foo">option 1</li>
</OptionsMenu>
);

fireEvent.keyDown(screen.getByRole('button'), { keyCode: 40 });
expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
const button = screen.getByRole('button');

fireEvent.keyDown(button, { keyCode: 40 });
expect(button).toHaveAttribute('aria-expanded', 'true');
});

test('should focus trigger on close', () => {
test('should focus trigger on close', async () => {
const user = userEvent.setup();
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li className="foo">option 1</li>
</OptionsMenu>
);

const button = screen.getByRole('button');

fireEvent.click(button);
fireEvent.click(button); // to close
await user.click(button); // opens menu
await user.click(button); // closes menu
expect(button).toHaveFocus();
});

test('should call onClose when closed', () => {
test('should call onClose when closed', async () => {
const user = userEvent.setup();
const onClose = jest.fn();
const onSelect = jest.fn();

render(
<OptionsMenu trigger={trigger} onClose={onClose}>
<OptionsMenu onSelect={onSelect} trigger={trigger} onClose={onClose}>
<li className="foo">option 1</li>
</OptionsMenu>
);

const option = screen.getByRole('menuitem');

fireEvent.click(option);
await user.click(option);

expect(onClose).toBeCalled();
});

test('should close menu when click outside event occurs', () => {
test('should close menu when click outside event occurs', async () => {
const user = userEvent.setup();
const onSelect = jest.fn();

render(
<>
<button>Click me!</button>
<OptionsMenu trigger={trigger}>
<OptionsMenu onSelect={onSelect} trigger={trigger}>
<li className="foo">option 1</li>
</OptionsMenu>
</>
);
fireEvent.click(screen.getByRole('button', { name: 'trigger' }));

await user.click(screen.getByRole('button', { name: 'trigger' }));
expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'true');
fireEvent.click(screen.getByRole('button', { name: 'Click me!' }));
await user.click(screen.getByRole('button', { name: 'Click me!' }));
expect(screen.getByRole('menu')).toHaveAttribute('aria-expanded', 'false');
});

test('should return no axe violations when hidden', async () => {
const onSelect = jest.fn();
const { container } = render(
<OptionsMenu trigger={trigger} show={false}>
<OptionsMenu onSelect={onSelect} trigger={trigger} show={false}>
<li className="foo">option 1</li>
</OptionsMenu>
);
Expand All @@ -173,8 +206,9 @@ test('should return no axe violations when hidden', async () => {
});

test('should return no axe violations when shown', async () => {
const onSelect = jest.fn();
const { container } = render(
<OptionsMenu trigger={trigger} show={true}>
<OptionsMenu onSelect={onSelect} trigger={trigger} show={true}>
<li className="foo">option 1</li>
</OptionsMenu>
);
Expand Down
Loading
Loading