Fix accessibility violations for the date picker (#2088)

* Fix accessibility violations for the date picker * Add i18n for date picker
temporalio · May 6, 2024 · 2b8b941 · 2b8b941
1 parent fc3e260
commit 2b8b941
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/src/lib/holocene/calendar.svelte b/src/lib/holocene/calendar.svelte
@@ -38,20 +38,24 @@
 
   <div class="row">
     {#each cells as { allowed, value }, index (index)}
-      <button
-        type="button"
-        on:click={allowed && value ? () => onChange(value) : noop}
-        class="cell"
-        class:highlight={allowed && value}
-        class:disabled={!allowed}
-        class:selected={new Date(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate(),
-        ).getTime() === new Date(year, month, value).getTime()}
-      >
-        {value || ''}
-      </button>
+      {#if value}
+        <button
+          type="button"
+          on:click={allowed && value ? () => onChange(value) : noop}
+          class="cell"
+          class:highlight={allowed && value}
+          class:disabled={!allowed}
+          class:selected={new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate(),
+          ).getTime() === new Date(year, month, value).getTime()}
+        >
+          {value || ''}
+        </button>
+      {:else}
+        <div class="cell"></div>
+      {/if}
     {/each}
   </div>
 </div>
@@ -74,7 +78,7 @@
   }
 
   .disabled {
-    @apply cursor-not-allowed bg-interactive text-disabled opacity-50;
+    @apply cursor-not-allowed bg-interactive/50 text-disabled;
   }
 
   .highlight {

diff --git a/src/lib/holocene/date-picker.svelte b/src/lib/holocene/date-picker.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from 'svelte';
 
   import { clickoutside } from '$lib/holocene/outside-click';
+  import { translate } from '$lib/i18n/translate';
   import { getMonthName } from '$lib/utilities/calendar';
 
   import Calender from './calendar.svelte';
@@ -70,6 +71,9 @@
     showDatePicker = false;
     dispatch('datechange', d.detail);
   };
+
+  const previousMonth = translate('date-picker.previous-month');
+  const nextMonth = translate('date-picker.next-month');
 </script>
 
 <div class="relative" use:clickoutside={() => (showDatePicker = false)}>
@@ -93,18 +97,21 @@
     >
       <div class="mx-3 my-2 flex items-center justify-around">
         <div class="flex items-center justify-center">
-          <button type="button" on:click={prev}
-            ><Icon name="chevron-left" /></button
+          <button type="button" on:click={prev} title={previousMonth}>
+            <span class="sr-only">{previousMonth}</span>
+            <Icon name="chevron-left" /></button
           >
         </div>
         <div class="flex items-center justify-center">
           {getMonthName(month)?.label ?? ''}
           {year}
         </div>
         <div class="flex items-center justify-center">
-          <button type="button" on:click={next}
-            ><Icon name="chevron-right" /></button
-          >
+          <span class="sr-only">Next Month</span>
+          <button type="button" on:click={next} title={nextMonth}>
+            <span class="sr-only">{nextMonth}</span>
+            <Icon name="chevron-right" />
+          </button>
         </div>
       </div>
       <Calender

diff --git a/src/lib/i18n/locales/en/date-picker.ts b/src/lib/i18n/locales/en/date-picker.ts
@@ -0,0 +1,6 @@
+export const Namespace = 'date-picker' as const;
+
+export const Strings = {
+  'next-month': 'Next Month',
+  'previous-month': 'Previous Month',
+} as const;
diff --git a/src/lib/i18n/locales/en/index.ts b/src/lib/i18n/locales/en/index.ts
@@ -1,6 +1,7 @@
 import * as Batch from './batch';
 import * as Common from './common';
 import * as DataEncoder from './data-encoder';
+import * as DatePicker from './date-picker';
 import * as Events from './events';
 import * as Namespaces from './namespaces';
 import * as Schedules from './schedules';
@@ -13,6 +14,7 @@ export const EN = 'en' as const;
 export const English = {
   [Batch.Namespace]: Batch.Strings,
   [Common.Namespace]: Common.Strings,
+  [DatePicker.Namespace]: DatePicker.Strings,
   [Workflows.Namespace]: Workflows.Strings,
   [TypedErrors.Namespace]: TypedErrors.Strings,
   [Events.Namespace]: Events.Strings,