Enhance Calendar Component Accessibility with Role Attribute

This commit focuses on improving the accessibility of the calendar component by introducing role attributes to the day, month, and year selectors. A new role parameter has been added to the renderButtonSelector function within the calendar's selector component, allowing for dynamic assignment of appropriate roles to the Button component for each selector type. Additionally, the ISelector and IConfigAccessibility interfaces have been updated to include properties for monthSelectorRole, yearSelectorRole, and daySelectorRole. These enhancements aim to make the calendar component more accessible and user-friendly for individuals using assistive technologies.

Author: Kubit

src/components/calendar/selector/selector.tsx

@@ -41,7 +41,12 @@ export const Selector = (props: ISelector): JSX.Element => {
     );
   };
 
-  const renderButtonSelector = (type: string, showSelector: boolean, ariaLabel?: string) => {
+  const renderButtonSelector = (
+    type: string,
+    showSelector: boolean,
+    ariaLabel?: string,
+    role?: string
+  ) => {
     const buttonState = showSelector ? ButtonStateType.DISABLED : ButtonStateType.DEFAULT;
 
     const selectorToShow = () => {
@@ -73,6 +78,7 @@ export const Selector = (props: ISelector): JSX.Element => {
       <Button
         aria-label={ariaLabel}
         disabled={showSelector}
+        role={role}
         size={sizeSelectorButton || props.styles?.selectorOptions?.sizeSelectorButton}
         variant={variantSelectorButton || props.styles?.selectorOptions?.variantSelectorButton}
         onClick={handleClickButtonSelector}
@@ -101,29 +107,21 @@ export const Selector = (props: ISelector): JSX.Element => {
     onChangeCurrentDate(dateHelpers.getAddMonths(auxCurrentDate, 1));
   };
 
-  const handleOnClickBack: React.MouseEventHandler<HTMLDivElement> = event => {
-    onClickLeftIcon();
-    props.onLeftIconClick?.(event);
-  };
-
   const handleOnClickLeftIcon: React.MouseEventHandler<HTMLButtonElement> = event => {
     onClickLeftIcon();
     leftArrowIcon.onClick?.(event);
-  };
-
-  const handleOnClickRight: React.MouseEventHandler<HTMLDivElement> = event => {
-    onClickRightIcon();
-    props.onRightIconClick?.(event);
+    props.onLeftIconClick?.(event);
   };
 
   const handleOnClickRightIcon: React.MouseEventHandler<HTMLButtonElement> = event => {
     onClickRightIcon();
     rightArrowIcon.onClick?.(event);
+    props.onRightIconClick?.(event);
   };
 
   return (
     <SelectorStyled isDaySelector={isDaySelector} styles={props.styles}>
-      <IconAndBackTextStyled styles={props.styles} onClick={handleOnClickBack}>
+      <IconAndBackTextStyled styles={props.styles}>
         <ElementOrIcon
           color={iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.leftArrow}
@@ -147,20 +145,23 @@ export const Selector = (props: ISelector): JSX.Element => {
           renderButtonSelector(
             CalendarElementType.DAY,
             props.showDaySelector,
-            props.configAccesibility?.daySelectorAriaLabel
+            props.configAccesibility?.daySelectorAriaLabel,
+            props.configAccesibility?.daySelectorRole
           )}
         {renderButtonSelector(
           CalendarElementType.MONTH,
           props.showMonthSelector,
-          props.configAccesibility?.monthSelectorAriaLabel
+          props.configAccesibility?.monthSelectorAriaLabel,
+          props.configAccesibility?.monthSelectorRole
         )}
         {renderButtonSelector(
           CalendarElementType.YEAR,
           props.showYearSelector,
-          props.configAccesibility?.yearSelectorAriaLabel
+          props.configAccesibility?.yearSelectorAriaLabel,
+          props.configAccesibility?.yearSelectorRole
         )}
       </OptionsStyled>
-      <RightIconStyled showCustomSelector={showCustomSelector} onClick={handleOnClickRight}>
+      <RightIconStyled showCustomSelector={showCustomSelector}>
         <ElementOrIcon
           color={iconArrowDisabled(props.maxDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.rightArrow}

src/components/calendar/selector/types/selector.ts

@@ -39,6 +39,9 @@ export interface ISelector {
     sizeSelectorButton?: string;
   };
   configAccesibility?: {
+    monthSelectorRole?: string;
+    yearSelectorRole?: string;
+    daySelectorRole?: string;
     monthSelectorAriaLabel?: string;
     yearSelectorAriaLabel?: string;
     daySelectorAriaLabel?: string;

src/components/calendar/types/calendar.ts

@@ -28,6 +28,9 @@ export type IConfigAccesibility = {
   monthSelectorAriaLabel?: string;
   yearSelectorAriaLabel?: string;
   backToMonthAriaLabel?: string;
+  monthSelectorRole?: string;
+  yearSelectorRole?: string;
+  daySelectorRole?: string;
 };
 export interface ICalendarStandAlone<V = undefined extends string ? unknown : string> {
   id?: string;