Style updates (#264)

joshreisner · web-flow · commit f40950910bfd · 2022-10-15T10:16:03.000-07:00
* implementing a11y recommendations

* style updates

* update version
diff --git a/jest.config.js b/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
     '!<rootDir>/src/(types|i18n)/*',
     '!<rootDir>/**/__snapshots__/*',
     '!<rootDir>/e2e/**/*',
+    '!<rootDir>/src/**/index.ts',
   ],
   testPathIgnorePatterns: ['e2e'],
 };
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.7",
+  "version": "1.4.8",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -34,7 +34,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.2.2",
     "deepmerge": "^4.2.2",
     "luxon": "^3.0.3",
     "react": "^17.0.2",
diff --git a/public/app.js b/public/app.js
diff --git a/public/style.css b/public/style.css
diff --git a/public/tests/aasfmarin.html b/public/tests/aasfmarin.html
@@ -19,11 +19,14 @@
     ></div>
     <script>
       var tsml_react_config = {
-        'conference_providers': {
+        conference_providers: {
           'sites.google.com': 'Custom',
           'tinyurl.com': 'Custom',
           'MillValleyCabin.com': 'Custom',
         },
+        show: {
+          listButtons: true,
+        },
       };
     </script>
     <script src="/app.js" async></script>
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -140,38 +140,40 @@ export default function Controls({ state, setState, mapbox }: ControlsProps) {
     <div className="controls d-print-none gx-3 gx-md-4 gy-3 row">
       <div className="col-6 col-lg">
         <div className="position-relative">
-          <form className="input-group" onSubmit={locationSearch}>
-            <input
-              aria-label={strings.modes[state.input.mode]}
-              className="form-control"
-              disabled={state.input.mode === 'me'}
-              onChange={e => {
-                if (state.input.mode === 'search') {
-                  state.input.search = e.target.value;
-                  setState({ ...state });
-                } else {
-                  setSearch(e.target.value);
-                }
-              }}
-              placeholder={strings.modes[state.input.mode]}
-              ref={searchInput}
-              spellCheck="false"
-              type="search"
-              value={
-                state.input.mode === 'location' ? search : state.input.search
-              }
-            />
-            {modes.length > 1 && (
-              <button
-                id="mode"
+          <form onSubmit={locationSearch}>
+            <fieldset className="input-group">
+              <input
                 aria-label={strings.modes[state.input.mode]}
-                className="btn btn-outline-secondary dropdown-toggle"
-                onClick={() =>
-                  setDropdown(dropdown === 'search' ? undefined : 'search')
+                className="form-control"
+                disabled={state.input.mode === 'me'}
+                onChange={e => {
+                  if (state.input.mode === 'search') {
+                    state.input.search = e.target.value;
+                    setState({ ...state });
+                  } else {
+                    setSearch(e.target.value);
+                  }
+                }}
+                placeholder={strings.modes[state.input.mode]}
+                ref={searchInput}
+                spellCheck="false"
+                type="search"
+                value={
+                  state.input.mode === 'location' ? search : state.input.search
                 }
-                type="button"
               />
-            )}
+              {modes.length > 1 && (
+                <button
+                  id="mode"
+                  aria-label={strings.modes[state.input.mode]}
+                  className="btn btn-outline-secondary dropdown-toggle"
+                  onClick={() =>
+                    setDropdown(dropdown === 'search' ? undefined : 'search')
+                  }
+                  type="button"
+                />
+              )}
+            </fieldset>
           </form>
           {modes.length > 1 && (
             <div
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -1,7 +1,12 @@
 import React, { Fragment } from 'react';
 
 import type { State } from '../types';
-import { formatClasses as cx, getIndexByKey, formatUrl } from '../helpers';
+import {
+  formatClasses as cx,
+  formatUrl,
+  getIndexByKey,
+  strings,
+} from '../helpers';
 
 type DropdownProps = {
   defaultValue: string;
@@ -88,7 +93,17 @@ export default function Dropdown({
         onClick={e => setFilter(e, filter, key)}
       >
         <span>{name}</span>
-        <span className="badge bg-light border ms-3 text-dark">
+        <span
+          aria-label={
+            slugs.length === 1
+              ? strings.match_single
+              : strings.match_multiple.replace(
+                  '%count%',
+                  slugs.length.toString()
+                )
+          }
+          className="badge bg-light border ms-3 text-dark"
+        >
           {slugs.length}
         </span>
       </a>
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -182,7 +182,11 @@ export default function Map({
   }, [data, dimensions]);
 
   return (
-    <div className="border rounded bg-light flex-grow-1 map" ref={mapFrame}>
+    <div
+      aria-hidden={true}
+      className="border rounded bg-light flex-grow-1 map"
+      ref={mapFrame}
+    >
       {viewport && !!data.locationKeys.length && (
         <ReactMapGL
           mapStyle={settings.map.style}
diff --git a/src/components/Meeting.tsx b/src/components/Meeting.tsx
@@ -60,6 +60,8 @@ export default function Meeting({
       el.scrollIntoView();
     }
 
+    document.getElementById('tsml-title')?.focus();
+
     //log edit_url
     if (meeting.edit_url) {
       console.log(`TSML UI edit ${meeting.name}: ${meeting.edit_url}`);
@@ -224,7 +226,7 @@ export default function Meeting({
         'online': !!meeting.isOnline,
       })}
     >
-      <h1 className="fw-light mb-1">
+      <h1 className="fw-light mb-1" id="tsml-title" tabIndex={-1}>
         <Link meeting={meeting} />
       </h1>
       <div className="align-items-center border-bottom d-flex h6 mb-3 pb-2">
diff --git a/src/components/TsmlUI.tsx b/src/components/TsmlUI.tsx
@@ -236,7 +236,7 @@ export default function TsmlUI({ google, mapbox, src, timezone }: TsmlUIProps) {
             feedback_emails={settings.feedback_emails}
           />
         ) : (
-          <div className="d-grid gap-3">
+          <div className="d-flex flex-column flex-grow-1 gap-3">
             {settings.show.title && <Title state={state} />}
             {settings.show.controls && (
               <Controls state={state} setState={setState} mapbox={mapbox} />
diff --git a/src/helpers/data/distance.spec.ts b/src/helpers/data/distance.spec.ts
@@ -10,7 +10,8 @@ describe('distance', () => {
   //exact
   it('returns 0 for exact location', () => {
     const meeting: Meeting = {
-      slug: '',
+      name: 'Test meeting',
+      slug: 'test',
       latitude: 1,
       longitude: 1,
       formatted_address: '123 Main St, Anytown, OK 12345, USA',
diff --git a/src/helpers/format/format-feedback-email.spec.ts b/src/helpers/format/format-feedback-email.spec.ts
@@ -1,6 +1,5 @@
 import { settings } from '../settings';
 import { getQueryString } from '../query-string';
-//import { formatUrl } from './format-url';
 import { formatFeedbackEmail } from '.';
 import { Meeting } from '../../types';
 
diff --git a/src/helpers/format/format-feedback-email.ts b/src/helpers/format/format-feedback-email.ts
@@ -27,10 +27,7 @@ export function formatFeedbackEmail(
 
   //build mailto link
   return `mailto:${formatArray(feedback_emails).join()}?${new URLSearchParams({
-    subject: strings.email_subject.replace(
-      '%name%',
-      meeting.name ?? strings.unnamed_meeting
-    ),
+    subject: strings.email_subject.replace('%name%', meeting.name),
     body: lines.join('\n'),
   })
     .toString()
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -21,6 +21,8 @@ export const en: Translation = {
   in_progress_multiple: '%count% meetings in progress',
   location: 'Location',
   location_group: 'Location / Group',
+  match_single: '1 result',
+  match_multiple: '%count% results',
   meeting_information: 'Meeting Information',
   meetings: 'Meetings',
   midday: 'Midday',
diff --git a/src/i18n/es.ts b/src/i18n/es.ts
@@ -21,6 +21,8 @@ export const es: Translation = {
   in_progress_multiple: '%count% reuniones en curso',
   location: 'Ubicación',
   location_group: 'Ubicación / Grupo',
+  match_single: '1 resultado',
+  match_multiple: '%count% resultados',
   meeting_information: 'Información de la reunión',
   meetings: 'Reuniones',
   midday: 'Mediodía',
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
@@ -21,6 +21,8 @@ export const fr: Translation = {
   in_progress_multiple: '%count% rendez-vous en cours',
   location: 'Emplacement',
   location_group: 'Emplacement / Groupe',
+  match_single: '1 résultat',
+  match_multiple: '%count% résultats',
   meeting_information: 'Informations sur la réunion',
   meetings: 'Rencontres',
   midday: 'Midi',
diff --git a/src/style.scss b/src/style.scss
diff --git a/src/types/Meeting.ts b/src/types/Meeting.ts
diff --git a/src/types/Translation.ts b/src/types/Translation.ts
