@atlaskit/button 17.17.2 → 17.18.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @atlaskit/button
 
+## 17.18.0
+
+### Minor Changes
+
+- [#111486](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111486)
+  [`f848f651ef678`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f848f651ef678) - ###
+  Accessibility improvement
+
+  New buttons now adds ", Loading" to the accessible name of loading buttons regardless of how they
+  are labelled. This supports labelling by text content (`children`), `aria-label`, and
+  `aria-labelledby`.
+
+  The ", Loading" label was previously part of the loading spinner `<svg>`, which has been relocated
+  because this does not support `aria-label` or `aria-labelledby`. Any test locators for loading
+  buttons may need to be updated.
+
+  The most robust way to find loading buttons is by role and accessible name. This accounts for
+  label precedence. For example:
+
+  ```
+  screen.findByRole("button", {
+    name: /, Loading/,
+  })
+  ```
+
+  To validate a loading button that is already located, use `toHaveAccessibleName()`:
+
+  ```
+  render(<Button testId="foo" isLoading>My label</Button>);
+
+  const button = screen.getByTestId("foo");
+  expect(button).toHaveAccessibleName(`My label , Loading`);
+  ```
+
+  For locating loading spinners, a test ID has been added that is based on the button `testId`. For
+  example:
+
+  ```
+  render(<Button isLoading testId="bar">My label</Button>);
+
+
+  const spinner = screen.getByTestId("bar--loading-spinner-wrapper");
+  expect(spinner).toBeInTheDocument();
+
+  ```
+
+## 17.17.3
+
+### Patch Changes
+
+- [#110867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110867)
+  [`dc7e72da70ef7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc7e72da70ef7) -
+  Migrating instances of `UNSAFE_ANCHOR` primitive imports to the new safe import `Anchor`, in
+  preparation of Anchor open beta and removal of the unsafe export from `@atlaskit/primitives`
+
 ## 17.17.2
 
 ### Patch Changes
@@ -38,7 +93,7 @@
 
 - [#99861](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99861)
   [`452b917ff365`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/452b917ff365) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 17.14.3
 

package/__perf__/button.tsx

@@ -8,12 +8,12 @@ import { interactionTasks } from './utils/interaction-tasks';
 const button = () => <Example Component={Button} />;
 
 button.story = {
-  name: 'Button',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Button',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default button;

package/__perf__/custom.tsx

@@ -8,12 +8,12 @@ import { interactionTasks } from './utils/interaction-tasks';
 const customThemeButton = () => <Example Component={CustomThemeButton} />;
 
 customThemeButton.story = {
-  name: 'CustomThemeButton',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'CustomThemeButton',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default customThemeButton;

package/__perf__/customised.tsx

@@ -5,7 +5,5 @@ import AddIcon from '@atlaskit/icon/glyph/editor/add';
 import { CustomThemeButton } from '../src';
 
 export default () => (
-  <CustomThemeButton iconBefore={<AddIcon label="" />}>
-    Button
-  </CustomThemeButton>
+	<CustomThemeButton iconBefore={<AddIcon label="" />}>Button</CustomThemeButton>
 );

package/__perf__/utils/example-runner.tsx

@@ -4,44 +4,40 @@ import { bindAll } from 'bind-event-listener';
 
 import type { ButtonProps } from '../../src';
 
-export default function Example({
-  Component,
-}: {
-  Component: ButtonProps['component'];
-}) {
-  const [isSelected, setIsSelected] = useState<boolean>(false);
-  const [isDisabled, setIsDisabled] = useState<boolean>(false);
-  const ref = useRef<HTMLElement>(null);
+export default function Example({ Component }: { Component: ButtonProps['component'] }) {
+	const [isSelected, setIsSelected] = useState<boolean>(false);
+	const [isDisabled, setIsDisabled] = useState<boolean>(false);
+	const ref = useRef<HTMLElement>(null);
 
-  useLayoutEffect(() => {
-    function toggleSelect() {
-      setIsSelected((value) => !value);
-    }
-    function toggleDisabled() {
-      setIsDisabled((value) => !value);
-    }
+	useLayoutEffect(() => {
+		function toggleSelect() {
+			setIsSelected((value) => !value);
+		}
+		function toggleDisabled() {
+			setIsDisabled((value) => !value);
+		}
 
-    const el: HTMLElement | null = ref.current;
-    if (!el) {
-      throw new Error('Could not find button ref');
-    }
+		const el: HTMLElement | null = ref.current;
+		if (!el) {
+			throw new Error('Could not find button ref');
+		}
 
-    return bindAll(el, [
-      { type: 'toggle-select', listener: toggleSelect },
-      { type: 'toggle-disabled', listener: toggleDisabled },
-    ]);
-  }, []);
+		return bindAll(el, [
+			{ type: 'toggle-select', listener: toggleSelect },
+			{ type: 'toggle-disabled', listener: toggleDisabled },
+		]);
+	}, []);
 
-  return (
-    // @ts-ignore
-    <Component
-      ref={ref}
-      testId="my-button"
-      isSelected={isSelected}
-      isDisabled={isDisabled}
-      data-is-selected={isSelected}
-    >
-      Hello world
-    </Component>
-  );
+	return (
+		// @ts-ignore
+		<Component
+			ref={ref}
+			testId="my-button"
+			isSelected={isSelected}
+			isDisabled={isDisabled}
+			data-is-selected={isSelected}
+		>
+			Hello world
+		</Component>
+	);
 }

package/__perf__/utils/interaction-tasks.tsx

@@ -1,98 +1,77 @@
 import { fireEvent } from '@testing-library/react';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
 
 export const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'Click a button',
-    description:
-      'Recording how long a mousedown + click event take to be processed',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const button: HTMLElement | null = container.querySelector(
-        '[data-testid="my-button"]',
-      );
-      if (button == null) {
-        throw new Error('Could not find button element');
-      }
+	{
+		name: 'Click a button',
+		description: 'Recording how long a mousedown + click event take to be processed',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const button: HTMLElement | null = container.querySelector('[data-testid="my-button"]');
+			if (button == null) {
+				throw new Error('Could not find button element');
+			}
 
-      fireEvent.mouseDown(button);
-      fireEvent.click(button);
-    },
-  },
-  {
-    name: 'Focus on button',
-    description: 'Focus on a button and wait for layout and paint to finish',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const button: HTMLElement | null = container.querySelector(
-        '[data-testid="my-button"]',
-      );
-      if (button == null) {
-        throw new Error('Could not find button element');
-      }
+			fireEvent.mouseDown(button);
+			fireEvent.click(button);
+		},
+	},
+	{
+		name: 'Focus on button',
+		description: 'Focus on a button and wait for layout and paint to finish',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const button: HTMLElement | null = container.querySelector('[data-testid="my-button"]');
+			if (button == null) {
+				throw new Error('Could not find button element');
+			}
 
-      await controls.time(async () => {
-        fireEvent.focus(button);
-        fireEvent.blur(button);
-      });
-    },
-  },
-  {
-    name: 'Select button',
-    description: 'Trigger the selection of a button',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const button: HTMLElement | null = container.querySelector(
-        '[data-testid="my-button"]',
-      );
-      if (button == null) {
-        throw new Error('Could not find button element');
-      }
+			await controls.time(async () => {
+				fireEvent.focus(button);
+				fireEvent.blur(button);
+			});
+		},
+	},
+	{
+		name: 'Select button',
+		description: 'Trigger the selection of a button',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const button: HTMLElement | null = container.querySelector('[data-testid="my-button"]');
+			if (button == null) {
+				throw new Error('Could not find button element');
+			}
 
-      if (button.getAttribute('data-is-selected') !== 'false') {
-        throw new Error('Should not start selected');
-      }
+			if (button.getAttribute('data-is-selected') !== 'false') {
+				throw new Error('Should not start selected');
+			}
 
-      await controls.time(async () => {
-        fireEvent(button, new Event('toggle-select'));
-      });
+			await controls.time(async () => {
+				fireEvent(button, new Event('toggle-select'));
+			});
 
-      if (button.getAttribute('data-is-selected') !== 'true') {
-        throw new Error('Should now be selected');
-      }
-    },
-  },
-  {
-    name: 'Disable button',
-    description: 'Trigger the disabling of a button',
-    run: async ({
-      container,
-      controls,
-    }: InteractionTaskArgs): Promise<void> => {
-      const button: HTMLElement | null = container.querySelector(
-        '[data-testid="my-button"]',
-      );
-      if (button == null) {
-        throw new Error('Could not find button element');
-      }
+			if (button.getAttribute('data-is-selected') !== 'true') {
+				throw new Error('Should now be selected');
+			}
+		},
+	},
+	{
+		name: 'Disable button',
+		description: 'Trigger the disabling of a button',
+		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
+			const button: HTMLElement | null = container.querySelector('[data-testid="my-button"]');
+			if (button == null) {
+				throw new Error('Could not find button element');
+			}
 
-      if (button.hasAttribute('disabled')) {
-        throw new Error('Should not start disabled');
-      }
+			if (button.hasAttribute('disabled')) {
+				throw new Error('Should not start disabled');
+			}
 
-      await controls.time(async () => {
-        fireEvent(button, new Event('toggle-disabled'));
-      });
+			await controls.time(async () => {
+				fireEvent(button, new Event('toggle-disabled'));
+			});
 
-      if (!button.hasAttribute('disabled')) {
-        throw new Error('Should now be disabled');
-      }
-    },
-  },
+			if (!button.hasAttribute('disabled')) {
+				throw new Error('Should now be disabled');
+			}
+		},
+	},
 ];

package/codemods/15.0.0-lite-mode.tsx

@@ -3,46 +3,42 @@ import { type Collection } from 'jscodeshift/src/Collection';
 
 import { changeType, transformButton } from './helpers/15.0.0-runner';
 import {
-  getDefaultSpecifierName,
-  type Nullable,
-  shiftDefaultImport,
+	getDefaultSpecifierName,
+	type Nullable,
+	shiftDefaultImport,
 } from './helpers/helpers-generic';
 
-export default function transformer(
-  file: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  return transformButton({
-    file,
-    j,
-    custom: (base: Collection<any>) => {
-      changeType({
-        j,
-        base,
-        oldName: 'ButtonProps',
-        newName: 'CustomThemeButtonProps',
-        fallbackNameAlias: 'DSCustomThemeButtonProps',
-      });
+export default function transformer(file: FileInfo, { jscodeshift: j }: API, options: Options) {
+	return transformButton({
+		file,
+		j,
+		custom: (base: Collection<any>) => {
+			changeType({
+				j,
+				base,
+				oldName: 'ButtonProps',
+				newName: 'CustomThemeButtonProps',
+				fallbackNameAlias: 'DSCustomThemeButtonProps',
+			});
 
-      const defaultName: Nullable<string> = getDefaultSpecifierName({
-        j,
-        base,
-        packageName: '@atlaskit/button',
-      });
-      if (defaultName == null) {
-        return;
-      }
+			const defaultName: Nullable<string> = getDefaultSpecifierName({
+				j,
+				base,
+				packageName: '@atlaskit/button',
+			});
+			if (defaultName == null) {
+				return;
+			}
 
-      shiftDefaultImport({
-        j,
-        base,
-        defaultName,
-        oldPackagePath: '@atlaskit/button',
-        newPackagePath: '@atlaskit/button/custom-theme-button',
-      });
-    },
-  });
+			shiftDefaultImport({
+				j,
+				base,
+				defaultName,
+				oldPackagePath: '@atlaskit/button',
+				newPackagePath: '@atlaskit/button/custom-theme-button',
+			});
+		},
+	});
 }
 
 // Note: not exporting a 'parser' because doing so