aural-ui 2.1.13 → 2.1.14

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

@@ -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

@@ -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

@@ -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

@@ -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
+}

package/dist/icons/trash-icon/TrashIcon.stories.tsx

@@ -201,16 +201,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-red-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">
@@ -764,6 +767,10 @@ function CustomTrashIcon({ label = "Delete", ...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",
@@ -798,6 +805,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-red-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TrashIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Trash icon">
+export interface TrashIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TrashIcon = (props: TrashIconProps) => {
+  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}
     >
       <path
         d="M5.75 5.75V21.25H18.25V5.75M5.75 5.75H18.25M5.75 5.75H3.75M18.25 5.75H20.25M14 10.75V16.25M10 10.75V16.25M9.02154 5.38866C9.19999 3.90218 10.4654 2.75 12 2.75C13.5346 2.75 14.8 3.90218 14.9785 5.38866"
@@ -20,5 +24,11 @@ export const TrashIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Trash icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/twitter-x-icon/TwitterXIcon.stories.tsx

@@ -208,18 +208,19 @@ function ShareButton() {
                       </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">
-                          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">
@@ -1234,6 +1235,10 @@ function ShareButton() {
       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)",
@@ -1270,6 +1275,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-white",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/twitter-x-icon/index.tsx

@@ -1,17 +1,27 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const TwitterXIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Twitter X icon">
+export interface TwitterXIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const TwitterXIcon = (props: TwitterXIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 20 18"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path d="M15.4033 0.5H18.2852L11.989 7.70103L19.396 17.5H13.5964L9.05397 11.557L3.85637 17.5H0.972695L7.70709 9.79769L0.601562 0.5H6.54839L10.6544 5.93215L15.4033 0.5ZM14.3918 15.7738H15.9887L5.68067 2.13549H3.96702L14.3918 15.7738Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Twitter X icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/upload-icon/UploadIcon.stories.tsx

@@ -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">
@@ -737,6 +740,10 @@ function CustomUploadIcon({ label = "Upload", ...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",
@@ -771,6 +778,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const UploadIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Upload icon">
+export interface UploadIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const UploadIcon = (props: UploadIconProps) => {
+  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}
     >
       <path
         d="M20.25 12.75V20.25H3.75V12.75M12 15V4.5M16.5 8.25L12 3.75L7.5 8.25"
@@ -20,5 +24,11 @@ export const UploadIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Upload icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/vertical-menu-icon/VerticalMenuIcon.stories.tsx

@@ -199,16 +199,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">
@@ -801,6 +804,10 @@ function CustomMenuIcon({ label = "Menu options", ...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",
@@ -835,6 +842,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (