From 3bb1f235b81c05658cc7710682589733ff51983d Mon Sep 17 00:00:00 2001
From: Hunter Read <hunter.read@va.gov>
Date: Tue, 11 Jun 2024 14:49:48 -0700
Subject: [PATCH] Add support to set title on Toggle Button for accessibility.

---
 src/components/Datepicker.tsx     | 3 +++
 src/components/Input.tsx          | 2 ++
 src/contexts/DatepickerContext.ts | 2 ++
 src/types/index.ts                | 1 +
 4 files changed, 8 insertions(+)

diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 54e90b78..d7cbc58e 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -30,6 +30,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputClassName = null,
     containerClassName = null,
     toggleClassName = null,
+    toggleTitle = undefined,
     toggleIcon = undefined,
     displayFormat = DATE_FORMAT,
     readOnly = false,
@@ -269,6 +270,7 @@ const Datepicker: React.FC<DatepickerType> = ({
             inputClassName,
             containerClassName,
             toggleClassName,
+            toggleTitle,
             toggleIcon,
             readOnly,
             displayFormat,
@@ -302,6 +304,7 @@ const Datepicker: React.FC<DatepickerType> = ({
         inputClassName,
         containerClassName,
         toggleClassName,
+        toggleTitle,
         toggleIcon,
         readOnly,
         displayFormat,
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 38fc856e..12430b61 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -30,6 +30,7 @@ const Input: React.FC<Props> = (e: Props) => {
         disabled,
         inputClassName,
         toggleClassName,
+        toggleTitle,
         toggleIcon,
         readOnly,
         displayFormat,
@@ -292,6 +293,7 @@ const Input: React.FC<Props> = (e: Props) => {
                 ref={buttonRef}
                 disabled={disabled}
                 className={getToggleClassName()}
+                title={toggleTitle}
             >
                 {renderToggleIcon(inputText == null || !inputText?.length)}
             </button>
diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts
index d42aadd8..acc9561e 100644
--- a/src/contexts/DatepickerContext.ts
+++ b/src/contexts/DatepickerContext.ts
@@ -38,6 +38,7 @@ interface DatepickerStore {
     inputClassName?: ((className: string) => string) | string | null;
     containerClassName?: ((className: string) => string) | string | null;
     toggleClassName?: ((className: string) => string) | string | null;
+    toggleTitle?: string;
     toggleIcon?: (open: boolean) => React.ReactNode;
     readOnly?: boolean;
     startWeekOn?: string | null;
@@ -80,6 +81,7 @@ const DatepickerContext = createContext<DatepickerStore>({
     inputClassName: "",
     containerClassName: "",
     toggleClassName: "",
+    toggleTitle: undefined,
     readOnly: false,
     displayFormat: DATE_FORMAT,
     minDate: null,
diff --git a/src/types/index.ts b/src/types/index.ts
index b9e561cd..ec48cb99 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -71,6 +71,7 @@ export interface DatepickerType {
     containerClassName?: ((className: string) => string) | string | null;
     inputClassName?: ((className: string) => string) | string | null;
     toggleClassName?: ((className: string) => string) | string | null;
+    toggleTitle?: string;
     toggleIcon?: (open: boolean) => React.ReactNode;
     inputId?: string;
     inputName?: string;