Fix/SW-1563 accessibility

* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component
* fix(SW-1563): Added buttons around clickable images and changed to design system components
* fix(SW-1563): Renamed variants to match Figma
* fix(SW-1563): Renamed AriaButton to ButtonRAC

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

packages/design-system/lib/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { fn } from '@storybook/test'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { IconButton } from './IconButton'
+import { config } from './variants'
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+    theme: {
+      control: 'select',
+      options: Object.keys(config.variants.theme),
+      default: 'Primary',
+    },
+    style: {
+      control: 'select',
+      options: Object.keys(config.variants.style),
+      default: 'Normal',
+      type: 'string',
+      description: `The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.`,
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof IconButton>
+
+export const PrimaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
+    theme: 'Primary',
+  },
+}
+
+export const PrimaryDisabled: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const InvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
+    ),
+    theme: 'Inverted',
+  },
+}
+
+export const InvertedDisabled: Story = {
+  args: {
+    ...InvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const InvertedElevated: Story = {
+  args: {
+    ...InvertedDefault.args,
+    style: 'Elevated',
+  },
+}
+
+export const InvertedElevatedDisabled: Story = {
+  args: {
+    ...InvertedElevated.args,
+    isDisabled: true,
+  },
+}
+
+export const InvertedMuted: Story = {
+  args: {
+    ...InvertedDefault.args,
+    children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
+    style: 'Muted',
+  },
+}
+
+export const InvertedMutedDisabled: Story = {
+  args: {
+    ...InvertedMuted.args,
+    isDisabled: true,
+  },
+}
+
+export const InvertedFaded: Story = {
+  args: {
+    ...InvertedDefault.args,
+    style: 'Faded',
+  },
+}
+
+export const InvertedFadedDisabled: Story = {
+  args: {
+    ...InvertedFaded.args,
+    isDisabled: true,
+  },
+}
+
+export const TertiaryElevated: Story = {
+  args: {
+    onPress: fn(),
+    children: <MaterialIcon icon="arrow_back" size={24} color="CurrentColor" />,
+    theme: 'Tertiary',
+    style: 'Elevated',
+  },
+}
+
+export const TertiaryDisabled: Story = {
+  args: {
+    ...TertiaryElevated.args,
+    isDisabled: true,
+  },
+}
+
+export const BlackMuted: Story = {
+  args: {
+    onPress: fn(),
+    children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
+    theme: 'Black',
+  },
+}
+
+export const BlackMutedDisabled: Story = {
+  args: {
+    ...BlackMuted.args,
+    isDisabled: true,
+  },
+}