From 5ecd090a245527f4dbfc2e32f75ef36c5363fab2 Mon Sep 17 00:00:00 2001
From: kevin-lin12 <kevinlin8221@gmail.com>
Date: Mon, 6 Nov 2023 01:38:28 -0500
Subject: [PATCH] Fixed Modal announcing + Fixed Calendar closing behavior

---
 frontend/src/components/MiniCal/MiniCal.tsx   | 34 +++++++++++--------
 .../MiniCal/datepicker_override.css           |  1 +
 .../src/components/MiniCal/minical.module.css |  9 +++++
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MiniCal/MiniCal.tsx b/frontend/src/components/MiniCal/MiniCal.tsx
index 239975c8f..e81d5d077 100644
--- a/frontend/src/components/MiniCal/MiniCal.tsx
+++ b/frontend/src/components/MiniCal/MiniCal.tsx
@@ -32,27 +32,33 @@ const Icon = () => (
 );
 
 const MiniCal = () => {
-  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const { curDate, setCurDate } = useDate();
+  const [isExpanded, setExpanded] = useState('Collapsed');
 
   const updateDate = (d: Date) => {
     setCurDate(d);
   };
+
+  const updateExpanded = (s: string) => {
+    setExpanded(s);
+  };
+
   class CustomInput extends React.Component<any> {
     render() {
       return (
-        <button
-          className={styles.customInput}
-          onClick={this.props.onClick}
-          aria-expanded={isCalendarOpen}
-        >
-          <span className={styles.primary}>
-            {isToday(curDate) ? 'Today ' : ' '}
-            {isTomorrow(curDate) ? 'Tomorrow ' : ' '}
+        <>
+          <span aria-live="polite" className={styles.modal_state}>
+            Modal is{isExpanded}
           </span>
-          <span className={styles.space} /> <Icon />
-          <span className={styles.space} /> {this.props.value}
-        </button>
+          <button className={styles.customInput} onClick={this.props.onClick}>
+            <span className={styles.primary}>
+              {isToday(curDate) ? 'Today ' : ' '}
+              {isTomorrow(curDate) ? 'Tomorrow ' : ' '}
+            </span>
+            <span className={styles.space} /> <Icon />
+            <span className={styles.space} /> {this.props.value}
+          </button>
+        </>
       );
     }
   }
@@ -92,8 +98,8 @@ const MiniCal = () => {
         closeOnScroll={true}
         dateFormat="MMM dd, yyyy"
         showPopperArrow={false}
-        onCalendarClose={() => setIsCalendarOpen(false)}
-        onCalendarOpen={() => setIsCalendarOpen(true)}
+        onCalendarOpen={() => updateExpanded('Expanded')}
+        onCalendarClose={() => updateExpanded('Collapsed')}
         customInput={<CustomInput />}
         highlightDates={[{ 'custom--today': [new Date()] }]}
         renderCustomHeader={({
diff --git a/frontend/src/components/MiniCal/datepicker_override.css b/frontend/src/components/MiniCal/datepicker_override.css
index f100f495f..2726f8cca 100644
--- a/frontend/src/components/MiniCal/datepicker_override.css
+++ b/frontend/src/components/MiniCal/datepicker_override.css
@@ -92,6 +92,7 @@
 .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
   background-color: #000000;
 }
+
 .react-datepicker__month--selected:hover,
 .react-datepicker__month--in-selecting-range:hover,
 .react-datepicker__month--in-range:hover,
diff --git a/frontend/src/components/MiniCal/minical.module.css b/frontend/src/components/MiniCal/minical.module.css
index a5e674b1c..6b0a42f83 100644
--- a/frontend/src/components/MiniCal/minical.module.css
+++ b/frontend/src/components/MiniCal/minical.module.css
@@ -70,3 +70,12 @@
 .space {
   width: 0.5em;
 }
+
+.modal_state {
+  top: 0;
+  left: -2px;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}