From 82281b9c9d840eeaf47bb43e579cf7d1d5627e30 Mon Sep 17 00:00:00 2001
From: Abishek Das <abishekdascs@gmail.com>
Date: Wed, 11 Dec 2024 15:14:30 +0530
Subject: [PATCH] feat: enhance WeekdayPicker accessibility with aria-label and
 aria-live support

- Add `aria-label` and `aria-live` for improved screen reader compatibility.
- Add CSS styling for the `aria-live` region to ensure proper visibility and user experience.
- remove aria-pressed
---
 .../components/common/weekday_picker.jsx      | 22 ++++++++++++++-----
 app/assets/stylesheets/modules/_calendar.styl | 12 ++++++++++
 config/locales/en.yml                         | 11 ++++++++--
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/components/common/weekday_picker.jsx b/app/assets/javascripts/components/common/weekday_picker.jsx
index 56f352e667..93e48f4dd5 100644
--- a/app/assets/javascripts/components/common/weekday_picker.jsx
+++ b/app/assets/javascripts/components/common/weekday_picker.jsx
@@ -25,7 +25,6 @@ const WeekdayPicker = ({
   style,
   tabIndex,
 
-  ariaModifier,
   modifiers,
 
   locale,
@@ -145,7 +144,7 @@ const WeekdayPicker = ({
 
     dayClassName += customModifiers.map(modifier => ` ${dayClassName}--${modifier}`).join('');
 
-    const ariaSelected = customModifiers.indexOf(ariaModifier) > -1;
+    const ariaSelected = customModifiers.indexOf('selected') > -1;
 
     let tabIndexValue = null;
     if (onWeekdayClick) {
@@ -159,10 +158,20 @@ const WeekdayPicker = ({
     const onMouseEnterHandler = onWeekdayMouseEnter ? e => handleWeekdayMouseEnter(e, weekday, customModifiers) : null;
     const onMouseLeaveHandler = onWeekdayMouseLeave ? e => handleWeekdayMouseLeave(e, weekday, customModifiers) : null;
 
+    const ariaLabelMessage = ariaSelected
+      ? I18n.t('weekday_picker.aria.weekday_selected', { weekday: localeUtils.formatWeekdayLong(weekday), })
+      : I18n.t('weekday_picker.aria.weekday_select', { weekday: localeUtils.formatWeekdayLong(weekday), });
+
+    const ariaLiveMessage = ariaSelected
+      ? I18n.t('weekday_picker.aria.weekday_selected', { weekday: localeUtils.formatWeekdayLong(weekday), })
+      : I18n.t('weekday_picker.aria.weekday_unselected', { weekday: localeUtils.formatWeekdayLong(weekday), });
+
     return (
       <button
-        key={weekday} className={dayClassName} tabIndex={tabIndexValue}
-        aria-pressed={ariaSelected}
+        key={weekday}
+        className={dayClassName}
+        tabIndex={tabIndexValue}
+        aria-label= {ariaLabelMessage}
         onClick={onClickHandler}
         onKeyDown={e => handleDayKeyDown(e, weekday, customModifiers)}
         onMouseEnter={onMouseEnterHandler}
@@ -171,6 +180,10 @@ const WeekdayPicker = ({
         <span title={localeUtils.formatWeekdayLong(weekday)}>
           {localeUtils.formatWeekdayShort(weekday)}
         </span>
+        {/* Aria-live region for screen reader announcements for confirmation of when a week day is selected or unselected */}
+        <div aria-live="assertive" aria-atomic="true" className="sr-WeekdayPicker-aria-live">
+          {ariaLiveMessage}
+        </div>
       </button>
     );
   };
@@ -201,7 +214,6 @@ WeekdayPicker.propTypes = {
   style: PropTypes.object,
   tabIndex: PropTypes.number,
 
-  ariaModifier: PropTypes.string,
   modifiers: PropTypes.object,
 
   locale: PropTypes.string,
diff --git a/app/assets/stylesheets/modules/_calendar.styl b/app/assets/stylesheets/modules/_calendar.styl
index 1182b48b4f..67e1711531 100644
--- a/app/assets/stylesheets/modules/_calendar.styl
+++ b/app/assets/stylesheets/modules/_calendar.styl
@@ -172,3 +172,15 @@
 
 .DayPicker--ar
   direction rtl
+
+// CSS for screen reader support for weekday picker
+.sr-WeekdayPicker-aria-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8e82b21e90..4212992405 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1869,9 +1869,16 @@ en:
         note_edit_cancel_button_focused: "Cancel note edit {{title}}"
         note_delete_button_focused: "Delete the note {{title}}"
         note_edit_mode: "Entered Edit mode for note titled: {{title}}. You can now edit the title and content."
-
+  
   customize_error_message:
     JSONP_request_failed: "The request to fetch data from Wikipedia has timed out. This may be due to a slow internet connection or temporary server issues. Please try again later."
 
   tagged_courses:
-    download_csv: 'Download CSV'
\ No newline at end of file
+    download_csv: 'Download CSV'
+
+  weekday_picker:
+    aria:
+      weekday_select: "{{weekday}} Press Return key to select"
+      weekday_selected: "{{weekday}} Selected Press Return Key to unselect"
+      weekday_unselected: "{{weekday}} Unselected"
+      
\ No newline at end of file