ptrlrd · ptrlrd · Jul 31, 2026 · Jul 31, 2026
diff --git a/frontend/app/cards/CardsClient.tsx b/frontend/app/cards/CardsClient.tsx
@@ -230,6 +230,7 @@ function CardsClientInner({ initialCards }: { initialCards: Card[] }) {
         filters={[
           {
             label: "View",
+            name: "View",
             value: view,
             options: [
               { value: "card", label: "Card View" },
@@ -240,30 +241,35 @@ function CardsClientInner({ initialCards }: { initialCards: Card[] }) {
           },
           {
             label: "Any Color",
+            name: "Color",
             value: color,
             options: colorOptions,
             onChange: (v) => setFilterAndUrl("color", v, setColor),
           },
           {
             label: "Any Type",
+            name: "Type",
             value: type,
             options: typeOptions,
             onChange: (v) => setFilterAndUrl("type", v, setType),
           },
           {
             label: "Any Rarity",
+            name: "Rarity",
             value: rarity,
             options: rarityOptions,
             onChange: (v) => setFilterAndUrl("rarity", v, setRarity),
           },
           {
             label: "Any Cost",
+            name: "Cost",
             value: cost,
             options: costOptions,
             onChange: (v) => setFilterAndUrl("cost", v, setCost),
           },
           {
             label: "Any Keyword",
+            name: "Keyword",
             value: keyword,
             options: keywordOptions,
             onChange: (v) => setFilterAndUrl("keyword", v, setKeyword),

diff --git a/frontend/app/cards/browse/[slug]/BrowseDetail.tsx b/frontend/app/cards/browse/[slug]/BrowseDetail.tsx
@@ -101,6 +101,7 @@ export default function BrowseDetail({ initialCards, fixedParams }: BrowseDetail
   if (showColorFilter) {
     filters.push({
       label: "Any Color",
+      name: "Color",
       value: color,
       options: colorOptions,
       onChange: setColor,
@@ -109,6 +110,7 @@ export default function BrowseDetail({ initialCards, fixedParams }: BrowseDetail
   if (showTypeFilter) {
     filters.push({
       label: "Any Type",
+      name: "Type",
       value: type,
       options: typeOptions,
       onChange: setType,
@@ -117,6 +119,7 @@ export default function BrowseDetail({ initialCards, fixedParams }: BrowseDetail
   if (showRarityFilter) {
     filters.push({
       label: "Any Rarity",
+      name: "Rarity",
       value: rarity,
       options: rarityOptions,
       onChange: setRarity,
@@ -125,6 +128,7 @@ export default function BrowseDetail({ initialCards, fixedParams }: BrowseDetail
   if (showKeywordFilter) {
     filters.push({
       label: "Any Keyword",
+      name: "Keyword",
       value: keyword,
       options: keywordOptions,
       onChange: setKeyword,

diff --git a/frontend/app/components/SearchFilter.tsx b/frontend/app/components/SearchFilter.tsx
@@ -33,6 +33,9 @@ interface SearchFilterProps {
   onSearchChange: (value: string) => void;
   filters?: {
     label: string;
+    // Short caption rendered above the select so the filter stays identifiable
+    // after a value is picked. Passed through t(); falls back to the raw text.
+    name?: string;
     value: string;
     options: FilterOption[];
     onChange: (value: string) => void;
@@ -81,8 +84,14 @@ export default function SearchFilter({
     return () => clearTimeout(timer);
   }, [draft, search]);
 
+  const caption = (text: string) => (
+    <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">
+      {t(text, lang)}
+    </span>
+  );
+
   return (
-    <div className="flex flex-wrap gap-2 items-center mb-6">
+    <div className="flex flex-wrap gap-2 items-end mb-6">
       <div className="relative flex-1 min-w-[140px]">
         <input
           type="text"
@@ -93,48 +102,55 @@ export default function SearchFilter({
         />
       </div>
       {filters?.map((filter) => (
-        <select
-          key={filter.label}
-          value={filter.value}
-          onChange={(e) => filter.onChange(e.target.value)}
-          className={selectClass}
-        >
-          {!filter.noEmptyOption && (
-            <option className="filter-option" value="">
-              {filter.label}
-            </option>
-          )}
-          {groupOptions(filter.options).map((seg, i) =>
-            seg.group ? (
-              <optgroup key={`${seg.group}-${i}`} label={seg.group}>
-                {seg.opts.map((opt) => (
+        <label key={filter.label} className="flex flex-col gap-1">
+          {filter.name && caption(filter.name)}
+          <select
+            value={filter.value}
+            onChange={(e) => filter.onChange(e.target.value)}
+            aria-label={t(filter.name ?? filter.label, lang)}
+            className={selectClass}
+          >
+            {!filter.noEmptyOption && (
+              <option className="filter-option" value="">
+                {t(filter.label, lang)}
+              </option>
+            )}
+            {groupOptions(filter.options).map((seg, i) =>
+              seg.group ? (
+                <optgroup key={`${seg.group}-${i}`} label={seg.group}>
+                  {seg.opts.map((opt) => (
+                    <option className="filter-option" key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </optgroup>
+              ) : (
+                seg.opts.map((opt) => (
                   <option className="filter-option" key={opt.value} value={opt.value}>
                     {opt.label}
                   </option>
-                ))}
-              </optgroup>
-            ) : (
-              seg.opts.map((opt) => (
-                <option className="filter-option" key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))
-            ),
-          )}
-        </select>
+                ))
+              ),
+            )}
+          </select>
+        </label>
       ))}
       {sortOptions && onSortChange && (
-        <select
-          value={sortValue}
-          onChange={(e) => onSortChange(e.target.value)}
-          className={selectClass}
-        >
-          {sortOptions.map((opt) => (
-            <option className="filter-option" key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
+        <label className="flex flex-col gap-1">
+          {caption("Sort by")}
+          <select
+            value={sortValue}
+            onChange={(e) => onSortChange(e.target.value)}
+            aria-label={t("Sort by", lang)}
+            className={selectClass}
+          >
+            {sortOptions.map((opt) => (
+              <option className="filter-option" key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
       )}
       {resultCount !== undefined && (
         <span className="text-sm text-[var(--text-muted)] whitespace-nowrap">

diff --git a/frontend/app/enchantments/EnchantmentsClient.tsx b/frontend/app/enchantments/EnchantmentsClient.tsx
@@ -78,6 +78,7 @@ function EnchantmentsClientInner({ initialEnchantments }: { initialEnchantments:
         filters={[
           {
             label: "Any Card Type",
+            name: "Card Type",
             value: cardType,
             options: cardTypeOptions,
             onChange: (v) => setFilterAndUrl("cardType", v, setCardType),

diff --git a/frontend/app/encounters/EncountersClient.tsx b/frontend/app/encounters/EncountersClient.tsx
@@ -115,12 +115,14 @@ function EncountersClientInner({ initialEncounters }: { initialEncounters: Encou
         filters={[
           {
             label: "Any Type",
+            name: "Type",
             value: roomType,
             options: roomTypeOptions,
             onChange: (v) => setFilterAndUrl("roomType", v, setRoomType),
           },
           {
             label: "Any Act",
+            name: "Act",
             value: act,
             options: actOptions,
             onChange: (v) => setFilterAndUrl("act", v, setAct),

diff --git a/frontend/app/events/EventsClient.tsx b/frontend/app/events/EventsClient.tsx
@@ -188,12 +188,14 @@ function EventsClientInner({ initialEvents }: { initialEvents: GameEvent[] }) {
         filters={[
           {
             label: "Any Type",
+            name: "Type",
             value: type,
             options: typeOptions,
             onChange: (v) => setFilterAndUrl("type", v, setType),
           },
           {
             label: "Any Act",
+            name: "Act",
             value: act,
             options: actOptions,
             onChange: (v) => setFilterAndUrl("act", v, setAct),

diff --git a/frontend/app/guides/GuidesClient.tsx b/frontend/app/guides/GuidesClient.tsx
@@ -108,12 +108,14 @@ function GuidesClientInner({ initialGuides }: { initialGuides: GuideSummary[] })
         filters={[
           {
             label: "Any Category",
+            name: "Category",
             value: category,
             options: categoryOptions,
             onChange: (v) => setFilterAndUrl("category", v, setCategory),
           },
           {
             label: "Any Difficulty",
+            name: "Difficulty",
             value: difficulty,
             options: difficultyOptions,
             onChange: (v) => setFilterAndUrl("difficulty", v, setDifficulty),

diff --git a/frontend/app/keywords/[id]/KeywordDetail.tsx b/frontend/app/keywords/[id]/KeywordDetail.tsx
@@ -181,6 +181,7 @@ export default function KeywordDetail({ initialResult }: { initialResult?: Initi
               filters={[
                 {
                   label: "Any Character",
+                  name: "Character",
                   value: color,
                   options: colorOptions,
                   onChange: setColor,

diff --git a/frontend/app/monsters/MonstersClient.tsx b/frontend/app/monsters/MonstersClient.tsx
@@ -118,12 +118,14 @@ function MonstersClientInner({ initialMonsters }: { initialMonsters: Monster[] }
         filters={[
           {
             label: "Any Type",
+            name: "Type",
             value: type,
             options: typeOptions,
             onChange: (v) => setFilterAndUrl("type", v, setType),
           },
           {
             label: "Any Act",
+            name: "Act",
             value: act,
             options: actOptions,
             onChange: (v) => setFilterAndUrl("act", v, setAct),

diff --git a/frontend/app/potions/PotionsClient.tsx b/frontend/app/potions/PotionsClient.tsx
@@ -122,12 +122,14 @@ function PotionsClientInner({ initialPotions }: { initialPotions: Potion[] }) {
         filters={[
           {
             label: "Any Rarity",
+            name: "Rarity",
             value: rarity,
             options: rarityOptions,
             onChange: (v) => setFilterAndUrl("rarity", v, setRarity),
           },
           {
             label: "Any Character",
+            name: "Character",
             value: pool,
             options: poolOptions,
             onChange: (v) => setFilterAndUrl("pool", v, setPool),

diff --git a/frontend/app/powers/PowersClient.tsx b/frontend/app/powers/PowersClient.tsx
@@ -83,12 +83,14 @@ const [powers, setPowers] = useState<Power[]>(initialPowers);
         filters={[
           {
             label: "Any Type",
+            name: "Type",
             value: type,
             options: typeOptions,
             onChange: setType,
           },
           {
             label: "Any Stack Type",
+            name: "Stack Type",
             value: stackType,
             options: stackOptions,
             onChange: setStackType,

diff --git a/frontend/app/relics/RelicsClient.tsx b/frontend/app/relics/RelicsClient.tsx
@@ -164,18 +164,21 @@ function RelicsClientInner({ initialRelics }: { initialRelics: Relic[] }) {
         filters={[
           {
             label: "Any Rarity",
+            name: "Rarity",
             value: rarity,
             options: rarityOptions,
             onChange: (v) => setFilterAndUrl("rarity", v, setRarity),
           },
           {
             label: "Any Pool",
+            name: "Pool",
             value: pool,
             options: poolOptions,
             onChange: (v) => setFilterAndUrl("pool", v, setPool),
           },
           {
             label: "Any Ancient",
+            name: "Ancient",
             value: ancient,
             options: ancientOptions,
             onChange: (v) => setFilterAndUrl("ancient", v, setAncient),

diff --git a/frontend/app/timeline/TimelineClient.tsx b/frontend/app/timeline/TimelineClient.tsx
@@ -257,6 +257,7 @@ export default function TimelineClient({
         filters={[
           {
             label: "Any Story",
+            name: "Story",
             value: storyFilter,
             options: storyOptions,
             onChange: setStoryFilter,