Scheduler time zone addons + a11y improvements for form elements. (#1949

) * Scheduler time zone addons + a11y improvements for form elements. * layout tweaks * format * format? * format?? * compile scheduler * reviewed translations --------- Co-authored-by: Andrew <[email protected]>
cds-snc · Oct 29, 2024 · fb55586 · fb55586
1 parent 5d09877
commit fb55586
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 16 deletions.
diff --git a/app/assets/javascripts/scheduler.min.js b/app/assets/javascripts/scheduler.min.js
diff --git a/app/assets/javascripts/scheduler/Confirmation/Confirmation.js b/app/assets/javascripts/scheduler/Confirmation/Confirmation.js
@@ -10,7 +10,9 @@ export const Confirmation = () => {
   const date = selected + "T" + time;
 
   const timeFormat =
-    _24hr === "on" ? time : dayjs(date).format(translate("time_format"));
+    _24hr === "on"
+      ? dayjs(date).format("H [h] mm")
+      : dayjs(date).format("h:mm A");
 
   return selected.length > 0 && time ? (
     <div>
@@ -20,7 +22,7 @@ export const Confirmation = () => {
           <strong>
             {translate("date_prefix")}
             {dayjs(date).format(translate("date_format"))} {translate("at")}{" "}
-            {timeFormat}
+            {timeFormat}, {translate("local_time_suffix")}
           </strong>
         </p>
       </div>

diff --git a/app/assets/javascripts/scheduler/Date/Date.js b/app/assets/javascripts/scheduler/Date/Date.js
@@ -11,8 +11,8 @@ export const Date = () => {
   const date = selected[0];
 
   if (!date) {
-    return <div className="date-display"></div>;
+    return <span className="date-display"></span>;
   }
   const txt = formattedDay(selected[0]);
-  return <div className="date-display">{txt}</div>;
+  return <span className="date-display">{txt}</span>;
 };
diff --git a/app/assets/javascripts/scheduler/DateTime/DateTime.js b/app/assets/javascripts/scheduler/DateTime/DateTime.js
@@ -2,10 +2,11 @@ import React, { useContext } from "react";
 import { Date } from "../Date/Date";
 import { Toggle } from "../Toggle/Toggle";
 import { Time } from "../Time/Time";
-import { store } from "./index";
+import { store, I18nContext } from "./index";
 
 export const DateTime = () => {
   const { selected } = useContext(store);
+  const { translate } = useContext(I18nContext);
 
   if (typeof selected[0] === "undefined") {
     return null;
@@ -16,8 +17,17 @@ export const DateTime = () => {
       <div className="selected-date-time-box">
         <div className="triangle"></div>
         <div className="date-time-box">
-          <Date />
-          <Time name="time" />
+          <div classNAme="form-group">
+            <label className="form-label" for="time">
+              <span>
+                {translate("select_time_label")} <Date />
+              </span>
+            </label>
+            <span id="time-hint" className="form-hint">
+              {translate("select_time_hint")}
+            </span>
+            <Time name="time" />
+          </div>
           <Toggle />
         </div>
       </div>

diff --git a/app/assets/javascripts/scheduler/DateTime/index.js b/app/assets/javascripts/scheduler/DateTime/index.js
@@ -1 +1,2 @@
 export { store, StateProvider } from "../store";
+export { I18nContext } from "../i18n";
diff --git a/app/assets/javascripts/scheduler/Time/Time.js b/app/assets/javascripts/scheduler/Time/Time.js
@@ -32,7 +32,7 @@ export const Time = ({ name }) => {
           });
         }}
         id={name}
-        aria-label={name}
+        aria-describedby={`${name}-hint`}
         value={time}
       >
         {valid_time_values.map((item) => {

diff --git a/app/assets/javascripts/scheduler/Toggle/Toggle.js b/app/assets/javascripts/scheduler/Toggle/Toggle.js
@@ -1,15 +1,23 @@
 import React, { useContext } from "react";
-import { store } from "./index";
+import { store, I18nContext } from "./index";
 
 export const Toggle = () => {
   const { _24hr, time, dispatch } = useContext(store);
+  const { translate } = useContext(I18nContext);
 
   if (time === "") {
     return <div className="choice choice--radios"></div>;
   }
 
   return (
-    <div className="choice choice--radios">
+    <fieldset
+      className="form-group choice choice--radios"
+      id="time-toggle"
+      role="radio-group"
+    >
+      <legend className="form-label w-full">
+        <span>{translate("select_time_format_label")}</span>
+      </legend>
       <div className="choice__item">
         <input
           name="time-toggle"
@@ -37,6 +45,6 @@ export const Toggle = () => {
         />
         <label htmlFor="_24">24h</label>
       </div>
-    </div>
+    </fieldset>
   );
 };
diff --git a/app/assets/javascripts/scheduler/locales/en.js b/app/assets/javascripts/scheduler/locales/en.js
@@ -15,4 +15,10 @@ export const EN = {
   time_format: "h:mm A",
   cancel: "You can cancel this send before the scheduled time.",
   select_date: "Select a date and time to schedule the send.",
+  select_time_label: "What time on",
+  select_time_hint: "The clock uses your local time zone",
+  select_time_format_label: "Time format",
+  is_24: "24 hr time selected",
+  is_am_pm: "AM PM time selected",
+  local_time_suffix: "local time",
 };
diff --git a/app/assets/javascripts/scheduler/locales/fr.js b/app/assets/javascripts/scheduler/locales/fr.js
@@ -15,4 +15,10 @@ export const FR = {
   time_format: "H [h] mm",
   cancel: "Vous pourrez annuler cet envoi avant l’heure prévue.",
   select_date: "Sélectionnez une date et une heure pour programmer l’envoi.",
+  select_time_label: "Heure d'envoi le",
+  select_time_hint: "L'heure affichée correspond à votre fuseau horaire",
+  select_time_format_label: "Format de l'heure",
+  is_24: "Mode 24 heures activé",
+  is_am_pm: "Mode AM PM activé",
+  local_time_suffix: "heure locale",
 };
diff --git a/app/assets/javascripts/scheduler/store.js b/app/assets/javascripts/scheduler/store.js
@@ -105,10 +105,7 @@ export const StateProvider = ({ value, children }) => {
           ...state,
           _24hr: action.payload,
           time_values: populateTimes(action.payload),
-          updateMessage:
-            action.payload === "off"
-              ? "24 hr time selected"
-              : "AM PM time selected ",
+          updateMessage: action.payload === "off" ? "is_am_pm" : "is_24",
         };
         break;
       case "CALENDAR_UPDATES":
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { store, StateProvider } from "../store";
		export { I18nContext } from "../i18n";