aural-ui 2.1.13 → 2.1.16

package/dist/icons/suggestion-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SuggestionIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Suggestion icon">
+export interface SuggestionIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SuggestionIcon = (props: SuggestionIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <g transform="scale(1.5)">
         <path
@@ -29,5 +33,11 @@ export const SuggestionIcon = (
         />
       </g>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Suggestion icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/sun-icon/SunIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { SunIcon } from "."
 
@@ -201,16 +201,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
+                      {" "}
+                      <tr className="!bg-black/10">
                         <td className="px-6 py-4 font-mono text-sm !text-blue-300">
-                          width
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">24</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -681,6 +684,10 @@ import { SunIcon } from "@icons/suggestion-icon"
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -723,6 +730,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/sun-icon/index.tsx

@@ -1,21 +1,24 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const SunIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Sun icon">
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 512 512"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-      >
-        <path
-          d="M256,144c-61.75,0-112,50.25-112,112s50.25,112,112,112s112-50.25,112-112S317.75,144,256,144z M256,336
+export interface SunIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const SunIcon = (props: SunIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <path
+        d="M256,144c-61.75,0-112,50.25-112,112s50.25,112,112,112s112-50.25,112-112S317.75,144,256,144z M256,336
           c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c44.188,0,80,35.812,80,80C336,300.188,300.188,336,256,336z M256,112
           c8.833,0,16-7.167,16-16V64c0-8.833-7.167-16-16-16s-16,7.167-16,16v32C240,104.833,247.167,112,256,112z M256,400
           c-8.833,0-16,7.167-16,16v32c0,8.833,7.167,16,16,16s16-7.167,16-16v-32C272,407.167,264.833,400,256,400z M380.438,154.167
@@ -27,8 +30,13 @@ export const SunIcon = (
           c6.251,6.25,16.376,6.25,22.625,0c6.251-6.25,6.251-16.375,0-22.625l-22.625-22.625c-6.25-6.25-16.374-6.25-22.625,0
           c-6.25,6.25-6.25,16.375,0,22.625L131.541,154.167z M380.459,357.812c-6.271-6.25-16.376-6.25-22.625,0
           c-6.251,6.25-6.271,16.375,0,22.625l22.625,22.625c6.249,6.25,16.374,6.25,22.624,0s6.25-16.375,0-22.625L380.459,357.812z"
-        />
-      </svg>
-    </AccessibleIcon>
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Sun icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/text-color-icon/TextColorIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { TextColorIcon } from "."
 
@@ -202,16 +202,19 @@ function MyEditor() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
+                      {" "}
+                      <tr className="!bg-black/10">
                         <td className="px-6 py-4 font-mono text-sm !text-blue-300">
-                          width
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">18</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -778,6 +781,10 @@ function CustomTextColorIcon({ label = "Text Color", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -816,6 +823,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/text-color-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TextColorIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Text Color icon">
+export interface TextColorIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TextColorIcon = (props: TextColorIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="18"
       height="18"
       viewBox="0 0 18 18"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M15.9375 5.57812C15.9375 6.66544 15.0141 7.6875 13.875 7.6875C12.7359 7.6875 11.8125 6.66544 11.8125 5.57812C11.8125 4.17188 13.875 2.0625 13.875 2.0625C13.875 2.0625 15.9375 4.17188 15.9375 5.57812Z"
@@ -31,5 +35,11 @@ export const TextColorIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Text Color icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/text-indicator-icon/TextIndicatorIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { TextIndicatorIcon } from "."
 
@@ -202,16 +202,19 @@ function MyEditor() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-slate-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">18</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -798,6 +801,10 @@ function CustomTextIndicatorIcon({ label = "Text Indicator", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -836,6 +843,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-slate-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/text-indicator-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TextIndicatorIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Text Indicator Icon">
+export interface TextIndicatorIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TextIndicatorIcon = (props: TextIndicatorIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="18"
       height="18"
       viewBox="0 0 18 18"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M2.0625 4.3125H6M6 4.3125H9.9375M6 4.3125V13.6875M12.5625 2.0625H14.25M14.25 2.0625H15.9375M14.25 2.0625V15.9375M14.25 15.9375H12.5625M14.25 15.9375H15.9375"
@@ -20,5 +24,11 @@ export const TextIndicatorIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Text Indicator Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/threads-icon/ThreadsIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { ThreadsIcon } from "."
 
@@ -211,18 +211,19 @@ function SocialShare() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-zinc-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/50">
-                          auto
+                          true
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon (maintains aspect ratio)
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -1235,6 +1236,10 @@ function SocialShare() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon (maintains aspect ratio)",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon (maintains aspect ratio)",
@@ -1271,6 +1276,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-white",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/threads-icon/index.tsx

@@ -1,17 +1,27 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ThreadsIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Threads icon">
+export interface ThreadsIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ThreadsIcon = (props: ThreadsIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 18 22"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path d="M13.9062 10.2514C13.8179 10.209 13.7283 10.1683 13.6374 10.1293C13.4793 7.21371 11.8868 5.54454 9.21275 5.52746C9.20063 5.52739 9.18858 5.52739 9.17647 5.52739C7.57706 5.52739 6.24686 6.21036 5.42813 7.45315L6.89876 8.46236C7.51038 7.53404 8.47026 7.33614 9.17717 7.33614C9.18534 7.33614 9.19354 7.33614 9.20162 7.33621C10.0821 7.34183 10.7465 7.59792 11.1765 8.09733C11.4894 8.46092 11.6987 8.96335 11.8023 9.59744C11.0217 9.46471 10.1775 9.4239 9.27498 9.47567C6.73265 9.62216 5.09824 11.1055 5.20801 13.1666C5.26371 14.2121 5.78436 15.1115 6.67398 15.6991C7.42615 16.1958 8.39489 16.4387 9.4017 16.3837C10.7313 16.3108 11.7744 15.8033 12.5021 14.8754C13.0547 14.1707 13.4042 13.2575 13.5586 12.1068C14.1922 12.4893 14.6618 12.9928 14.9212 13.5979C15.3622 14.6267 15.3879 16.3172 14.0091 17.6954C12.801 18.9028 11.3488 19.4251 9.15422 19.4412C6.71979 19.4232 4.87867 18.6421 3.68162 17.1198C2.56068 15.6943 1.98138 13.6353 1.95976 11C1.98138 8.36466 2.56068 6.30567 3.68162 4.88018C4.87867 3.35787 6.71976 2.57685 9.15418 2.55875C11.6063 2.57699 13.4795 3.36176 14.7223 4.89143C15.3318 5.64156 15.7912 6.5849 16.0941 7.6848L17.8175 7.22482C17.4504 5.87096 16.8726 4.70433 16.0865 3.73681C14.4931 1.77571 12.1628 0.770836 9.16019 0.75H9.14818C6.15171 0.770764 3.84748 1.77946 2.29949 3.74805C0.922002 5.49985 0.21145 7.93735 0.187575 10.9928L0.1875 11L0.187575 11.0072C0.21145 14.0626 0.922002 16.5002 2.29949 18.252C3.84748 20.2205 6.15171 21.2293 9.14818 21.25H9.16019C11.8242 21.2315 13.702 20.5338 15.2489 18.9876C17.2729 16.9649 17.2119 14.4294 16.5449 12.8729C16.0663 11.7567 15.1539 10.8501 13.9062 10.2514ZM9.30652 14.5776C8.19226 14.6404 7.03467 14.14 6.97759 13.0684C6.93528 12.2738 7.54285 11.3872 9.3749 11.2815C9.58471 11.2694 9.79059 11.2635 9.99284 11.2635C10.6583 11.2635 11.2809 11.3282 11.8468 11.452C11.6357 14.0894 10.3975 14.5177 9.30652 14.5776Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Threads icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/tick-circle-icon/TickCircleIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { TickCircleIcon } from "."
 
@@ -218,16 +218,19 @@ function SuccessMessage() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-green-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">16</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -987,6 +990,10 @@ function CompletionIcon({ label = "Completed", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -1021,6 +1028,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-green-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/tick-circle-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TickCircleIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Tick Circle icon">
+export interface TickCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TickCircleIcon = (props: TickCircleIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
       viewBox="0 0 16 16"
       fill="currentColor"
-      {...props}
+      {...svgProps}
     >
       <path
         fillRule="evenodd"
@@ -19,5 +23,11 @@ export const TickCircleIcon = (
         d="M8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666C11.682 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.682 1.33325 8.00016 1.33325ZM10.7038 6.26289L9.92983 5.62965L6.96303 9.25572L5.66683 7.95945L4.95972 8.66658L7.0373 10.7441L10.7038 6.26289Z"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Tick Circle icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/tick-icon/TickIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { TickIcon } from "."
 
@@ -218,16 +218,19 @@ function CheckboxComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-green-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">24</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -1099,6 +1102,10 @@ function CompletionIcon({ label = "Completed", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -1137,6 +1144,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-green-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/tick-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TickIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Tick icon">
+export interface TickIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TickIcon = (props: TickIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       fill="transparent"
-      {...props}
+      {...svgProps}
     >
       <path
         d="m7 13 3 3 7-8"
@@ -20,5 +24,11 @@ export const TickIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Tick icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}