mib

components/docs/collections/menu-with-icon-demo.tsx

@@ -20,7 +20,7 @@ export default function MenuWithIconDemo() {
   return (
     <Menu>
       <Menu.Trigger>
-        <Avatar className="size-10" src="https://github.com/irsyadadl.png" />
+        <Avatar alt="irsyadadl" className="size-10" src="https://github.com/irsyadadl.png" />
       </Menu.Trigger>
       <Menu.Content placement="bottom" showArrow className="sm:min-w-64">
         <Menu.Section>

components/docs/media/avatar-initials-demo.tsx

@@ -3,5 +3,5 @@
 import { Avatar } from "ui"
 
 export default function AvatarInitialsDemo() {
-  return <Avatar initials="IR" />
+  return <Avatar alt="IR" initials="IR" />
 }

components/docs/media/avatar-size-demo.tsx

@@ -5,9 +5,9 @@ import { Avatar } from "ui"
 export default function AvatarSizeDemo() {
   return (
     <div className="flex gap-4">
-      <Avatar size="small" src="https://github.com/irsyadadl.png" />
-      <Avatar size="medium" src="https://github.com/irsyadadl.png" />
-      <Avatar size="large" src="https://github.com/irsyadadl.png" />
+      <Avatar alt="irsyadadl small" size="small" src="https://github.com/irsyadadl.png" />
+      <Avatar alt="irsyadadl medium" size="medium" src="https://github.com/irsyadadl.png" />
+      <Avatar alt="irsyadadl large" size="large" src="https://github.com/irsyadadl.png" />
     </div>
   )
 }

components/docs/overlays/popover-trigger-demo.tsx

@@ -5,8 +5,8 @@ import { Avatar, Button, Popover } from "ui"
 export default function PopoverTriggerDemo() {
   return (
     <Popover>
-      <Popover.Trigger>
-        <Avatar src="https://github.com/irsyadadl.png" />
+      <Popover.Trigger aria-label="Open Popover">
+        <Avatar alt="irsyadadl" src="https://github.com/irsyadadl.png" />
       </Popover.Trigger>
       <Popover.Content className="min-w-72">
         <Popover.Header>

components/docs/surfaces/heading-level-demo.tsx

@@ -1,5 +1,5 @@
 import { Heading } from "ui"
 
 export default function HeadingLevelDemo() {
-  return <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
+  return <Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
 }

components/docs/surfaces/heading-tracking-demo.tsx

@@ -1,5 +1,9 @@
 import { Heading } from "ui"
 
 export default function HeadingTrackingDemo() {
-  return <Heading tracking="tighter">The quick brown fox jumps over the lazy dog</Heading>
+  return (
+    <Heading level={2} tracking="tighter">
+      The quick brown fox jumps over the lazy dog
+    </Heading>
+  )
 }

resources/content/docs/components/collections/accordion.mdx

@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: "An accordion is a vertical stack of headers that expand or collapse to reveal or conceal content sections, providing an organized and user-friendly way to manage information."
+description: Accordion is a vertical stack of headers that expand or collapse to show or hide content, providing an organized, user-friendly way to manage information.
 order: 6
 published: true
 status: updated

resources/content/docs/components/date-and-time/date-range-picker.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Date Range Picker"
-description: "Date Range Pickers are essential tools for communicating date-based information to users effectively, enhancing the interaction experience with precise date selections."
+description: Date Range Pickers are crucial for conveying date-based info effectively, improving user interaction with accurate date selections.
 order: 6
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/DateRangePicker.html#props"]

resources/content/docs/components/forms/text-field.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Text Field"
-description: "Enter text similar to jotting down notes on your phone, offering versatility for any data entry that involves typing, accommodating various types of information."
+description: Enter text like jotting notes on your phone, offering versatility for typing and accommodating various types of information.
 order: 2
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/TextField.html#props", "https://www.framer.com/motion/animate-presence"]

resources/content/docs/components/forms/textarea.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Textarea"
-description: "Provides ample space for detailed text, similar to drafting an email, allowing you to elaborate on your thoughts and present comprehensive information with ease."
+description: Provides ample space for detailed text, like drafting an email, allowing you to elaborate on thoughts and present comprehensive information easily.
 order: 4
 published: true
 references: ["https://react-spectrum.adobe.com/react-aria/TextField.html#textarea-1"]

resources/content/docs/prologue/contribution-guide.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Contribution Guide"
-description: "Interested in contributing to Justd? This guide covers setting up your development environment, understanding the project structure, and best practices for your first PR."
+description: Over 50 accessible components, neatly organized into sections, ensuring usability and ease of access for everyone. Perfect for a range of applications and users.
 order: 1
 published: true
 ---