feat: add accessibility features to UI

app/glossary/glossary-client.tsx

@@ -84,7 +84,10 @@ export function GlossaryClient({ data }: { data: GlossaryData }) {
       const filtered = entries.filter((e) => {
         const normTerm = normalizeForSearch(e.term);
         const normDef = normalizeForSearch(e.definition);
-        return normTerm.includes(normalizedQuery) || normDef.includes(normalizedQuery);
+        return (
+          normTerm.includes(normalizedQuery) ||
+          normDef.includes(normalizedQuery)
+        );
       });
       if (filtered.length > 0) {
         result[letter] = filtered;
@@ -210,7 +213,8 @@ export function GlossaryClient({ data }: { data: GlossaryData }) {
                 {letter}
               </Badge>
               <span className="ml-2 text-sm text-muted-foreground">
-                {filteredGroups[letter].length} entr{filteredGroups[letter].length === 1 ? "y" : "ies"}
+                {filteredGroups[letter].length} entr
+                {filteredGroups[letter].length === 1 ? "y" : "ies"}
               </span>
             </div>
 
@@ -223,7 +227,7 @@ export function GlossaryClient({ data }: { data: GlossaryData }) {
                       {highlightMatch(entry.term, query)}
                     </dt>
                     <dd
-                      className="mt-1 text-sm text-muted-foreground leading-relaxed"
+                      className="mt-1 text-base text-foreground leading-relaxed"
                       dangerouslySetInnerHTML={{
                         __html: query
                           ? highlightHtml(entry.definition_html, query)
@@ -261,7 +265,9 @@ function highlightMatch(text: string, query: string): React.ReactNode {
   return (
     <>
       {before}
-      <mark className="bg-primary/20 text-foreground rounded-sm px-0.5">{match}</mark>
+      <mark className="bg-primary/20 text-foreground rounded-sm px-0.5">
+        {match}
+      </mark>
       {after}
     </>
   );