feat(calendar): add role and aria-label to birthday events

heroui-inc · Nov 27, 2024 · 1cd1d21 · 1cd1d21
1 parent 24ccded
commit 1cd1d21
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 24 deletions.
diff --git a/apps/docs/content/components/calendar/custom-cell-content.ts b/apps/docs/content/components/calendar/custom-cell-content.ts
@@ -9,17 +9,29 @@ export default function App() {
           <CalendarCellBody>
             <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
               {date.day % 7 === 0 && (
-                <span className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1">
-                  Birth day
+                <span 
+                  className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                  role="status"
+                  aria-label="Birthday event"
+                > 
+                Birth day
                 </span>
               )}
               {date.day % 5 === 0 && (
-                <span className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1">
+                <span 
+                  className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                  role="status"
+                  aria-label="Birthday event"
+                > 
                   MTG
                 </span>
               )}
               {date.day % 3 === 0 && (
-                <span className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1">
+                <span 
+                  className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                  role="status"
+                  aria-label="Birthday event"
+                > 
                   MTG
                 </span>
               )}

diff --git a/apps/docs/content/components/range-calendar/custom-cell-content.ts b/apps/docs/content/components/range-calendar/custom-cell-content.ts
@@ -7,19 +7,31 @@ export default function App() {
         <CalendarCellContent>
           <CalendarCellHeader />
           <CalendarCellBody>
-            <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
+                <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
               {date.day % 7 === 0 && (
-                <span className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1">
-                  Birth day
+                <span 
+                  className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                  role="status"
+                  aria-label="Birthday event"
+                > 
+                Birth day
                 </span>
               )}
               {date.day % 5 === 0 && (
-                <span className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1">
+                <span 
+                  className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                  role="status"
+                  aria-label="Birthday event"
+                > 
                   MTG
                 </span>
               )}
               {date.day % 3 === 0 && (
-                <span className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1">
+                <span 
+                  className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                  role="status"
+                  aria-label="Birthday event"
+                > 
                   MTG
                 </span>
               )}

diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx
@@ -277,18 +277,30 @@ const CustomCellTemplate = (args: CalendarProps) => {
               <CalendarCellHeader />
               <CalendarCellBody>
                 <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
-                  {date.day % 5 === 0 && (
-                    <span className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1">
+                  {date.day % 7 === 0 && (
+                    <span
+                      aria-label="Birthday event"
+                      className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                      role="status"
+                    >
                       Birth day
                     </span>
                   )}
-                  {date.day % 4 === 0 && (
-                    <span className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1">
+                  {date.day % 5 === 0 && (
+                    <span
+                      aria-label="Birthday event"
+                      className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                      role="status"
+                    >
                       MTG
                     </span>
                   )}
-                  {date.day % 2 === 0 && (
-                    <span className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1">
+                  {date.day % 3 === 0 && (
+                    <span
+                      aria-label="Birthday event"
+                      className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                      role="status"
+                    >
                       MTG
                     </span>
                   )}

diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx
@@ -82,7 +82,11 @@ const ControlledTemplate = (args: RangeCalendarProps) => {
         <RangeCalendar
           aria-label="Date range (controlled)"
           value={value}
-          onChange={setValue}
+          onChange={(newValue) => {
+            if (newValue) {
+              setValue(newValue);
+            }
+          }}
           {...args}
           color="secondary"
         />
@@ -163,7 +167,11 @@ const InvalidDatesTemplate = (args: RangeCalendarProps) => {
       errorMessage={isInvalid ? "Stay dates cannot fall on weekends" : undefined}
       isInvalid={isInvalid}
       value={date}
-      onChange={setDate}
+      onChange={(newValue) => {
+        if (newValue) {
+          setDate(newValue);
+        }
+      }}
     />
   );
 };
@@ -285,7 +293,11 @@ const PresetsTemplate = (args: RangeCalendarProps) => {
           </ButtonGroup>
         }
         value={value}
-        onChange={setValue}
+        onChange={(newValue) => {
+          if (newValue) {
+            setValue(newValue);
+          }
+        }}
         onFocusChange={setFocusedValue}
         {...args}
       />
@@ -305,18 +317,30 @@ const CustomCellTemplate = (args: RangeCalendarProps) => {
               <CalendarCellHeader />
               <CalendarCellBody>
                 <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
-                  {date.day % 5 === 0 && (
-                    <span className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1">
+                  {date.day % 7 === 0 && (
+                    <span
+                      aria-label="Birthday event"
+                      className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                      role="status"
+                    >
                       Birth day
                     </span>
                   )}
-                  {date.day % 4 === 0 && (
-                    <span className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1">
+                  {date.day % 5 === 0 && (
+                    <span
+                      aria-label="Birthday event"
+                      className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                      role="status"
+                    >
                       MTG
                     </span>
                   )}
-                  {date.day % 2 === 0 && (
-                    <span className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1">
+                  {date.day % 3 === 0 && (
+                    <span
+                      aria-label="Birthday event"
+                      className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                      role="status"
+                    >
                       MTG
                     </span>
                   )}