From affcdc48dcce8aedd0cf614beeb0d4c711d90c66 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 7 Feb 2024 18:50:14 -0600
Subject: [PATCH] Improve arrow key behavior, aria descriptions on Tag Input

---
 src/components/TagInput.tsx  | 37 ++++++++++++++++++++++++------------
 src/photo/form/PhotoForm.tsx |  2 ++
 src/photo/form/index.ts      |  6 +++++-
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
index a1e6ebf2..b5f6bc1d 100644
--- a/src/components/TagInput.tsx
+++ b/src/components/TagInput.tsx
@@ -136,15 +136,19 @@ export default function TagInput({
         setInputText('');
         break;
       case 'ArrowDown':
-        setSelectedOptionIndex(i => {
-          if (i === undefined) {
-            return 1;
-          } else if (i >= optionsFiltered.length - 1) {
-            return 0;
-          } else {
-            return i + 1;
-          }
-        });
+        if (shouldShowMenu) {
+          setSelectedOptionIndex(i => {
+            if (i === undefined) {
+              return optionsFiltered.length > 1 ? 1 : 0;
+            } else if (i >= optionsFiltered.length - 1) {
+              return 0;
+            } else {
+              return i + 1;
+            }
+          });
+        } else {
+          setShouldShowMenu(true);
+        }
         break;
       case 'ArrowUp':
         setSelectedOptionIndex(i => {
@@ -275,7 +279,11 @@ export default function TagInput({
               'text-xl shadow-lg dark:shadow-xl',
             )}
           >
-            {optionsFiltered.map(({ value, annotation }, index) =>
+            {optionsFiltered.map(({
+              value,
+              annotation,
+              annotationAria,
+            }, index) =>
               <div
                 key={value}
                 role="option"
@@ -305,8 +313,13 @@ export default function TagInput({
                   {value}
                 </span>
                 {annotation &&
-                  <span className="whitespace-nowrap text-dim text-sm">
-                    {annotation}
+                  <span
+                    className="whitespace-nowrap text-dim text-sm"
+                    aria-label={annotationAria}
+                  >
+                    <span aria-hidden={Boolean(annotationAria)}>
+                      {annotation}
+                    </span>
                   </span>}
               </div>)}
           </div>
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 5d083b72..4d98bc71 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -151,6 +151,8 @@ export default function PhotoForm({
             .map(({ tag, count }) => ({
               value: tag,
               annotation: `× ${count}`,
+              annotationAria:
+                `tagged in ${count} photo${count === 1 ? '' : 's'}`,
             }))
         )
           .map(([key, {
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index f9d915db..d2ba6a85 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -26,7 +26,11 @@ export type FieldSetType =
   'password' |
   'checkbox';
 
-export type AnnotatedTag = { value: string, annotation?: string };
+export type AnnotatedTag = {
+  value: string,
+  annotation?: string,
+  annotationAria?: string,
+};
 
 type FormMeta = {
   label: string