From 04945f969d317e4161fb4834751874e10edb2a7c Mon Sep 17 00:00:00 2001
From: Huynh Quang Phuc <quangphuc.huynh95@gmail.com>
Date: Sun, 13 Apr 2025 13:55:23 +0700
Subject: [PATCH 1/2] fix: wrong file naming case cause typescript error

---
 packages/ui/src/core/{time-Picker => time-picker}/index.ts        | 0
 .../core/{time-Picker => time-picker}/time-picker.component.tsx   | 0
 .../ui/src/core/{time-Picker => time-picker}/time-picker.props.ts | 0
 .../src/core/{time-Picker => time-picker}/time-picker.styles.ts   | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/ui/src/core/{time-Picker => time-picker}/index.ts (100%)
 rename packages/ui/src/core/{time-Picker => time-picker}/time-picker.component.tsx (100%)
 rename packages/ui/src/core/{time-Picker => time-picker}/time-picker.props.ts (100%)
 rename packages/ui/src/core/{time-Picker => time-picker}/time-picker.styles.ts (100%)

diff --git a/packages/ui/src/core/time-Picker/index.ts b/packages/ui/src/core/time-picker/index.ts
similarity index 100%
rename from packages/ui/src/core/time-Picker/index.ts
rename to packages/ui/src/core/time-picker/index.ts
diff --git a/packages/ui/src/core/time-Picker/time-picker.component.tsx b/packages/ui/src/core/time-picker/time-picker.component.tsx
similarity index 100%
rename from packages/ui/src/core/time-Picker/time-picker.component.tsx
rename to packages/ui/src/core/time-picker/time-picker.component.tsx
diff --git a/packages/ui/src/core/time-Picker/time-picker.props.ts b/packages/ui/src/core/time-picker/time-picker.props.ts
similarity index 100%
rename from packages/ui/src/core/time-Picker/time-picker.props.ts
rename to packages/ui/src/core/time-picker/time-picker.props.ts
diff --git a/packages/ui/src/core/time-Picker/time-picker.styles.ts b/packages/ui/src/core/time-picker/time-picker.styles.ts
similarity index 100%
rename from packages/ui/src/core/time-Picker/time-picker.styles.ts
rename to packages/ui/src/core/time-picker/time-picker.styles.ts

From 9f214c000a6241c5c4486b0bd17daaa59aeefd40 Mon Sep 17 00:00:00 2001
From: Huynh Quang Phuc <quangphuc.huynh95@gmail.com>
Date: Sun, 13 Apr 2025 13:56:01 +0700
Subject: [PATCH 2/2] feat(accessibility): add ARIA roles to enhance
 accessibility for calendar and menu components

---
 .../src/core/accordion-header/accordion-header.styles.ts | 1 +
 packages/ui/src/core/calendar/calendar.styles.ts         | 9 +++++++++
 packages/ui/src/core/menu-item/menu-item.styles.ts       | 1 +
 packages/ui/src/core/menu/menu.component.tsx             | 2 +-
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/core/accordion-header/accordion-header.styles.ts b/packages/ui/src/core/accordion-header/accordion-header.styles.ts
index 12e2c84a..955881d2 100644
--- a/packages/ui/src/core/accordion-header/accordion-header.styles.ts
+++ b/packages/ui/src/core/accordion-header/accordion-header.styles.ts
@@ -27,6 +27,7 @@ const Label = styled.span.attrs({
 
 const Header = styled.div.attrs({
   className: generateClassNames(baseClassName, 'root'),
+  role: 'button',
 })<With<WithTheme, { $fullWidth?: boolean }>>(
   ({ theme, $fullWidth }) => css`
     display: inline-flex;
diff --git a/packages/ui/src/core/calendar/calendar.styles.ts b/packages/ui/src/core/calendar/calendar.styles.ts
index f39b8b78..c1627a75 100644
--- a/packages/ui/src/core/calendar/calendar.styles.ts
+++ b/packages/ui/src/core/calendar/calendar.styles.ts
@@ -30,6 +30,8 @@ const leftDatePickerAnimation = css`
 
 const Calendar = styled.div.attrs({
   className: generateClassNames(baseClassName, 'root'),
+  role: 'application',
+  'aria-label': 'Calendar',
 })<CalendarProps>(
   ({ theme: { palette } }: With<WithTheme, CalendarProps>) => css`
     position: relative;
@@ -131,6 +133,7 @@ const MonthButtonsWrapper = styled.div.attrs({
 
 const MonthButtons = styled.div.attrs({
   className: generateClassNames(baseClassName, 'month-buttons'),
+  role: 'button',
 })<With<WithTheme, { isYearChanged?: boolean; isMonthChanged?: boolean; isDisabled?: boolean }>>(
   ({ isYearChanged = false, isMonthChanged = false, isDisabled = false, theme: { palette } }) => css`
     width: calc(100% / 3);
@@ -317,6 +320,7 @@ const HeaderBodyMonth = styled.div.attrs({
 
 const HeaderLeftArrows = styled.span.attrs({
   className: generateClassNames(baseClassName, 'header-left-arrow'),
+  role: 'button',
 })<With<WithTheme, { isDisabled: boolean }>>(
   ({ theme: { palette }, isDisabled = false }) => css`
     position: absolute;
@@ -330,6 +334,7 @@ const HeaderLeftArrows = styled.span.attrs({
 
 const HeaderLeftArrow = styled.span.attrs({
   className: generateClassNames(baseClassName, 'header-left-arrow'),
+  role: 'button',
 })<With<WithTheme, { isDisabled: boolean }>>(
   ({ theme: { palette }, isDisabled = false }) => css`
     position: absolute;
@@ -343,6 +348,7 @@ const HeaderLeftArrow = styled.span.attrs({
 
 const MonthsHeaderLeftArrow = styled.span.attrs({
   className: generateClassNames(baseClassName, 'month-header-left-arrow'),
+  role: 'button',
 })<With<WithTheme, { isDisabled: boolean }>>(
   ({ theme: { palette }, isDisabled = false }) => css`
     position: absolute;
@@ -357,6 +363,7 @@ const MonthsHeaderLeftArrow = styled.span.attrs({
 
 const HeaderRightArrow = styled.span.attrs({
   className: generateClassNames(baseClassName, 'header-right-arrow'),
+  role: 'button',
 })<With<WithTheme, { isDisabled: boolean }>>(
   ({ theme: { palette }, isDisabled = false }) => css`
     position: absolute;
@@ -370,6 +377,7 @@ const HeaderRightArrow = styled.span.attrs({
 
 const MonthsHeaderRightArrow = styled.span.attrs({
   className: generateClassNames(baseClassName, 'month-header-right-arrow'),
+  role: 'button',
 })<With<WithTheme, { isDisabled: boolean }>>(
   ({ theme: { palette }, isDisabled = false }) => css`
     position: absolute;
@@ -382,6 +390,7 @@ const MonthsHeaderRightArrow = styled.span.attrs({
 
 const HeaderRightArrows = styled.span.attrs({
   className: generateClassNames(baseClassName, 'header-right-arrows'),
+  role: 'button',
 })<With<WithTheme, { isDisabled: boolean }>>(
   ({ theme: { palette }, isDisabled = false }) => css`
     position: absolute;
diff --git a/packages/ui/src/core/menu-item/menu-item.styles.ts b/packages/ui/src/core/menu-item/menu-item.styles.ts
index abbbffc1..862bddd8 100644
--- a/packages/ui/src/core/menu-item/menu-item.styles.ts
+++ b/packages/ui/src/core/menu-item/menu-item.styles.ts
@@ -58,6 +58,7 @@ const MenuItemWrapper = styled.div.attrs({
 
 const MenuItem = styled.div.attrs({
   className: generateClassNames(baseClassName, 'root'),
+  role: 'menuitem',
 })<With<With<WithTheme, MenuItemProps>, { $active?: boolean; $isFocused: boolean }>>(
   ({ size = Size.Sm, $active, theme, disableHover = false, disabled, $isFocused }) => css`
     display: flex;
diff --git a/packages/ui/src/core/menu/menu.component.tsx b/packages/ui/src/core/menu/menu.component.tsx
index cb568b16..449ad6e1 100644
--- a/packages/ui/src/core/menu/menu.component.tsx
+++ b/packages/ui/src/core/menu/menu.component.tsx
@@ -102,7 +102,7 @@ const Menu = intrinsicComponent<MenuProps, HTMLDivElement>(
         wrapperStyles={popperWrapperStyles}
         onClick={handleClose}
       >
-        <Styled.Menu ref={ref} $maxHeight={maxHeight} $rect={rect} {...containerProps} {...rest}>
+        <Styled.Menu ref={ref} $maxHeight={maxHeight} $rect={rect} role="menu" {...containerProps} {...rest}>
           {children}
         </Styled.Menu>
       </Popper>