Fixed Modal announcing + Fixed Calendar closing behavior

cornell-dti · Nov 6, 2023 · 5ecd090 · 5ecd090
1 parent bd1bac9
commit 5ecd090
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git 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
@@ -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
@@ -70,3 +70,12 @@
 .space {
   width: 0.5em;
 }
+
+.modal_state {
+  top: 0;
+  left: -2px;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}