aria-live, dropdown buttons, updated weekday urls (#269)

* aria-live, dropdown buttons, updated weekday urls * old URL pattern support band-aid * query string band-aid
code4recovery · Nov 13, 2022 · 1e97630 · 1e97630
1 parent 7ea3178
commit 1e97630
Show file tree

Hide file tree

Showing 13 changed files with 1,891 additions and 1,835 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsml-ui",
-  "version": "1.4.10",
+  "version": "1.5",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -25,7 +25,7 @@
     "@types/react-test-renderer": "^17.0.1",
     "autoprefixer": "10.4.5",
     "jest": "^27.4.7",
-    "laravel-mix": "^6.0.43",
+    "laravel-mix": "^6.0.49",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.52.1",
     "sass-loader": "^12.6.0",

diff --git a/public/app.js b/public/app.js
diff --git a/public/data/times.json b/public/data/times.json
@@ -7,6 +7,7 @@
     "end_time": "21:00",
     "group": "Online Group",
     "types": ["O", "M"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
@@ -17,6 +18,7 @@
     "end_time": "21:00",
     "group": "Online Group",
     "types": ["O", "SM"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
@@ -27,6 +29,7 @@
     "end_time": "11:00",
     "group": "Online Group",
     "types": ["O", "SM"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
@@ -37,13 +40,15 @@
     "end_time": "21:00",
     "group": "Online Group",
     "types": ["O", "SM"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
     "slug": "appointment",
     "name": "Appt",
     "group": "Online Group",
     "types": ["O", "SM"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
@@ -53,6 +58,7 @@
     "time": "07:00",
     "group": "Online Group",
     "types": ["O", "D"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
@@ -63,16 +69,18 @@
     "end_time": "21:00",
     "group": "Online Group",
     "types": ["O", "SM"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   },
   {
     "slug": "sunday-8am",
     "name": "Sunday 8am",
     "day": "0",
     "time": "08:00",
-    "end_time": "12:00",
+    "end_time": "10:00",
     "group": "Online Group",
     "types": ["O", "SM"],
+    "formatted_address": "123 Main St, Anytown, OK 12345, USA",
     "conference_url": "https://zoom.us/d/1234567"
   }
 ]
diff --git a/public/style.css b/public/style.css
diff --git a/public/tests/espanol.html b/public/tests/espanol.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="description" content="React JS recovery meeting finder demo" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <title>Meetings</title>
+  </head>
+
+  <body>
+    <div
+      id="tsml-ui"
+      data-src="https://sheets.code4recovery.org/storage/12Ga8uwMG4WJ8pZ_SEU7vNETp_aQZ-2yNVsYDFqIwHyE.json"
+      data-mapbox="pk.eyJ1Ijoiam9zaHJlaXNuZXIiLCJhIjoiY2tvYXA0YnZxMGRldDJxbzdta25uNGphdiJ9.eay-UKgIT99ALmdw08xBPw"
+      data-timezone="America/Los_Angeles"
+    ></div>
+    <script src="/app.js" async></script>
+    <script>
+      var tsml_react_config = {
+        feedback_emails: ['[email protected]'],
+        weekdays: [
+          'domingo',
+          'lunes',
+          'martes',
+          'miercoles',
+          'jueves',
+          'viernes',
+          'sabado',
+        ],
+        strings: {
+          en: {
+            domingo: 'Sunday',
+            lunes: 'Monday',
+            martes: 'Tuesday',
+            miercoles: 'Wednesday',
+            jueves: 'Thursday',
+            viernes: 'Friday',
+            sabado: 'Saturday',
+          },
+        },
+      };
+    </script>
+  </body>
+</html>
diff --git a/src/components/Controls.spec.tsx b/src/components/Controls.spec.tsx
@@ -41,8 +41,8 @@ describe('<Controls />', () => {
     );
 
     //click a dropdown button
-    const button = screen.getByRole('button', { name: region_any });
-    fireEvent.click(button);
+    const button = screen.getAllByRole('button', { name: region_any });
+    fireEvent.click(button[0]);
 
     //dropdown opens
     const dropdown = screen.getByLabelText(region_any);

diff --git a/src/components/Dropdown.spec.tsx b/src/components/Dropdown.spec.tsx
@@ -54,8 +54,8 @@ describe('<Dropdown />', () => {
       />
     );
 
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
+    const button = screen.getAllByRole('button');
+    fireEvent.click(button[0]);
     expect(mockSetDropdown).toBeCalled();
 
     const dropdown = screen.getByLabelText(defaultValue);
@@ -92,8 +92,8 @@ describe('<Dropdown />', () => {
     const dropdown = screen.getByLabelText(defaultValue);
     expect(dropdown).toHaveClass('show');
 
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
+    const button = screen.getAllByRole('button');
+    fireEvent.click(button[0]);
     expect(mockSetDropdown).toBeCalled();
 
     //test links

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -32,7 +32,7 @@ export default function Dropdown({
 
   //set filter: pass it up to parent
   const setFilter = (
-    e: React.MouseEvent<HTMLAnchorElement>,
+    e: React.MouseEvent<HTMLButtonElement>,
     filter: keyof typeof state.indexes,
     value?: string
   ) => {
@@ -70,19 +70,14 @@ export default function Dropdown({
 
   const renderDropdownItem = ({ key, name, slugs, children }: Index) => (
     <Fragment key={key}>
-      <a
+      <button
         className={cx(
           'align-items-center d-flex dropdown-item justify-content-between',
           {
             // @ts-expect-error TODO
             'bg-secondary text-white': values.includes(key),
           }
         )}
-        href={formatUrl({
-          ...state.input,
-          // @ts-expect-error TODO
-          [filter]: values.includes(key) ? [key] : [],
-        })}
         onClick={e => setFilter(e, filter, key)}
       >
         <span>{name}</span>
@@ -99,7 +94,7 @@ export default function Dropdown({
         >
           {slugs.length}
         </span>
-      </a>
+      </button>
       {!!children?.length && (
         <div className="children">
           {children.map(child => renderDropdownItem(child))}
@@ -132,18 +127,14 @@ export default function Dropdown({
         })}
         aria-labelledby={filter}
       >
-        <a
+        <button
           className={cx('dropdown-item', {
             'active bg-secondary text-white': !values.length,
           })}
           onClick={e => setFilter(e, filter, undefined)}
-          href={formatUrl({
-            ...state.input,
-            [filter]: [],
-          })}
         >
           {defaultValue}
-        </a>
+        </button>
         {[
           options
             ?.filter(option =>

diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -57,5 +57,9 @@ export default function Title({ state: { indexes, input } }: TitleProps) {
   document.title = title;
 
   //return h1
-  return <h1 className="fw-light mb-n1">{title}</h1>;
+  return (
+    <h1 aria-live="polite" className="fw-light mb-n1">
+      {title}
+    </h1>
+  );
 }
diff --git a/src/helpers/data/load-meeting-data.ts b/src/helpers/data/load-meeting-data.ts
@@ -265,11 +265,13 @@ export function loadMeetingData(
       if (isActive) {
         //day index
         const dayIndex = indexes.weekday.findIndex(
-          ({ key }) => key === `${meeting.day}`
+          ({ key }) =>
+            key ===
+            settings.weekdays[meeting.day as keyof typeof settings.weekdays]
         );
         if (dayIndex === -1) {
           indexes.weekday.push({
-            key: `${meeting.day}`,
+            key: settings.weekdays[meeting.day],
             name: strings[settings.weekdays[meeting.day]],
             slugs: [slug],
           });
@@ -444,7 +446,9 @@ export function loadMeetingData(
   //convert weekday to array and sort by ordinal
   indexes.weekday = flattenAndSortIndexes(
     indexes.weekday,
-    (a, b) => parseInt(a.key) - parseInt(b.key)
+    (a, b) =>
+      //@ts-expect-error TODO
+      settings.weekdays.indexOf(a.key) - settings.weekdays.indexOf(b.key)
   );
 
   //convert time to array and sort by ordinal

diff --git a/src/helpers/query-string.ts b/src/helpers/query-string.ts
@@ -25,6 +25,27 @@ export function getQueryString(): State['input'] {
       input[param] = query.get(param);
     });
 
+  //temporary band-aid to support weekday=0 URLs
+  if (input.weekday) {
+    input.weekday = input.weekday.map(day => {
+      //@ts-expect-error todo
+      if (day === '0') return settings.weekdays[0];
+      //@ts-expect-error todo
+      if (day === '1') return settings.weekdays[1];
+      //@ts-expect-error todo
+      if (day === '2') return settings.weekdays[2];
+      //@ts-expect-error todo
+      if (day === '3') return settings.weekdays[3];
+      //@ts-expect-error todo
+      if (day === '4') return settings.weekdays[4];
+      //@ts-expect-error todo
+      if (day === '5') return settings.weekdays[5];
+      //@ts-expect-error todo
+      if (day === '6') return settings.weekdays[6];
+      return day;
+    });
+  }
+
   return {
     ...settings.defaults,
     ...input,

diff --git a/src/helpers/settings.ts b/src/helpers/settings.ts
@@ -100,11 +100,13 @@ if (!Array.isArray(settings.flags)) {
 }
 
 //columns can be specified to override the default
-if (
-  typeof tsml_react_config === 'object' &&
-  Array.isArray(tsml_react_config.columns)
-) {
-  settings.columns = tsml_react_config.columns;
+if (typeof tsml_react_config === 'object') {
+  if (Array.isArray(tsml_react_config.columns)) {
+    settings.columns = tsml_react_config.columns;
+  }
+  if (Array.isArray(tsml_react_config.weekdays)) {
+    settings.weekdays = tsml_react_config.weekdays;
+  }
 }
 
 const preferredLanguage = navigator.language.substring(0, 2) as Lang;