自訂選單與組合框系統 是做什麼的？
目的
本系統旨在提供一套系統化的方法論，用於設計和建構自訂下拉選項、自動完成搜尋選擇器（組合框）以及多選標記輸入元件。
標準的 HTML <select> 元素在不同瀏覽器間難以保持一致的樣式，且無法支援豐富的佈局組合（例如在單一選項中包含描述、圖示、徽章或子網格）。然而，自訂下拉選單時常導致嚴重的無障礙失敗、鍵盤陷阱和使用性錯誤。本技能建立了設計、空間和互動標準，確保自訂選單元件在視覺上保持一致性、高度響應性，並完全符合無障礙標準（WCAG 2.2 AA）。
使用案例
在設計以下情境時應用此系統：
- 豐富內容下拉選單： 選項需要視覺指示、副標題、輔助元數據或狀態徽章（例如，附有國旗圖示的國家選擇器、工作區切換器或帳戶資料）。
- 可搜尋選擇器（組合框）： 選項超過 10 個，使用者必須能夠透過內嵌搜尋輸入來篩選選擇（例如，長長的州/省列表、標籤選擇）。
- 多選標記欄位： 允許進行多次選擇，並須以可關閉的徽章/晶片形式顯示在觸發器容器內或旁邊。
- 動態配置篩選器： 高密度的篩選控制項（例如，在電子商務或數據儀表板側邊欄上），需要豐富的佈局對齊和即時的上下文回饋。
何時不應使用
請勿在以下情況應用此系統：
- 選項數量少（2 到 5 個選項）： 請使用「分段控制系統」或標準的分組單選按鈕。這樣可以避免將選項隱藏在額外的點擊背後，並降低認知負荷。
- 全域頁面導航： 如果點擊下拉選單項目會立即將使用者導向到不同的頁面或網站地圖節點，請使用「網站導航系統」或巢狀下拉選單。選取輸入是語意上的表單欄位，用於編輯屬性，而非瀏覽網站地圖。
- 標準無樣式表單： 對於一般性、低優先級或實用性的表單（如基本聯絡人欄位），請使用原生的瀏覽器
<select>輸入。原生下拉選單提供了完美、免費的行動裝置響應性和原生螢幕閱讀器支援。 - 全螢幕指令面板： 如果目標是搜尋整個應用程式的頁面和動作，而不是選取單一表單值，請使用「指令面板系統」。
輸入
在設計自訂選單或組合框之前，請收集以下需求：
- 選項基數與密度： 有多少選項（例如 5、50、500+）？最大字元長度是多少？
- 選取類型： 單選還是多選？靜態列表還是非同步篩選查詢列表（組合框）？
- 資料豐富度： 選項是否需要輔助視覺元素（圖示、頭像、旗幟、色票）或輔助文字（副標籤、定價修飾、活躍使用者計數）？
- 佈局上下文： 這個元件會放在高密度的側邊欄、寬敞的登陸頁面、疊加彈窗還是持續顯示的設定儀表板中？
- 品牌代碼： 間距比例（「流體間距系統」）、字體排印比例（「流體字體排印系統」）、焦點環（「焦點指示器設計系統」）和陰影比例（「高程與深度系統」）。
輸出
此系統會產生以下設計交付物：
- 結構規格說明： 詳細的藍圖，顯示間距、對齊、圖示、文字截斷規則，以及「觸發器」和「下拉面板」的邊框/背景層。
- 狀態與互動矩陣： 定義懸停、啟用/開啟、選取、焦點、禁用和驗證錯誤狀態的視覺樣式。
- 響應式自適應模型： 結構化規格，詳細說明桌面版下拉選單如何轉換到行動視口（例如，轉換為底部抽屜/工作表或原生降級疊加層）。
- 無障礙地圖（WAI-ARIA 與鍵盤）： 提供給開發人員的精確角色、即時區域宣告、焦點追蹤狀態和按鍵對應行為。
工作流程
1. 建構元件結構
一個完整的自訂選單系統由兩個主要空間層組成：
A. 觸發器（欄位）
- 容器： 高度與相鄰表單輸入保持一致（通常為 40px 到 48px，以利觸控目標）。使用中性外框（與頁面背景對比度 >= 3:1）和定義好的內邊距（通常為
12px 16px）。 - 值/佔位符插槽： 位於左側。未啟用的文字代表佔位符（與欄位背景對比度 >= 4.5:1）。選取後的文字使用主要中性粗體樣式。
- 視覺提示（箭頭圖示）： 位於最右側。使用明顯的下指箭頭來表示可折疊的內容。當選單啟用時，將箭頭旋轉 180 度。
- 選取徽章（僅多選）： 緊湊的內聯晶片，帶有各自的關閉（x）控制項，可優雅地換行或使用計數修飾符進行截斷（例如「+3 更多」）。
B. 下拉面板（選單）
- 疊加容器： 位於較高的 Z 軸層級（「高程與深度系統」第 3/4 級）。預設顯示在觸發器下方，如果視口邊緣限制了下方的空間，則顯示在其上方。使用明顯的陰影（例如帶有柔和模糊效果的
box-shadow）使其與背景頁面分離。 - 滾動容器： 設定最大高度限制（通常為
240px到320px/ 5–8 個項目），以防止面板超出頁面範圍。對於較長的列表，使用可見的、可防止滾動條偏移的滾動軌道。 - 搜尋輸入（僅組合框）： 一個固定在選單面板頂部的搜尋輸入，在選單啟用時保持焦點。
C. 選項項目（選擇）
- 佈局： 水平彈性盒佈局，由左側的視覺資源、中央的主要文字（以及豐富選項的副標題）和右側的選取狀態指示器（例如勾選標記）組成。
- 安全內邊距： 最小垂直內邊距為
8px，水平內邊距與觸發器的水平內邊距一致（12px到16px）。
+------------------------------------------+
| 選擇國家 [v] | <-- 觸發器（關閉）
+------------------------------------------+
+------------------------------------------+
| [Q] 搜尋國家... | <-- 固定搜尋輸入
+------------------------------------------+
| [x] 加拿大 | <-- 選項（已選取並聚焦）
| ISO: CA | +1 國家代碼 |
|------------------------------------------|
| [ ] 德國 | <-- 選項（預設）
| ISO: DE | +49 國家代碼 |
+------------------------------------------+
2. 制定狀態與回饋矩陣
為元件生命週期的每個狀態設計明確、無歧義的樣式：
- 預設狀態： 觸發器使用清晰的外框（與頁面背景的最小對比度為 3:1）和清晰文字標籤（最小對比度為 4.5:1）。
- 懸停狀態： 觸發器和選項行上產生微妙的背景色調變化（例如低對比度的灰色），以表示可互動能力。游標設定為
pointer。 - 焦點狀態： 活動元素周圍有高度可見的焦點環。對於組合框，當列表開啟時，焦點應位於搜尋輸入上，但對高亮的列表選項使用視覺焦點處理（例如背景色調或活動外框）。
- 啟用/展開狀態： 箭頭旋轉，觸發器外框顏色改變（例如改為主要品牌色），下拉面板以平滑的高度和透明度過渡（150ms 到 250ms）出現。
- 選取狀態： 選取時選項行視覺上發生變化。在最右側使用高對比度的勾選標記圖示和微妙的背景填充。不要僅依賴顏色來指示選取。
- 禁用狀態： 視覺透明度降低至 40%–50%。游標變為
not-allowed指示器，並且該元素在標籤索引中被跳過。 - 錯誤/無效狀態： 觸發器外框變為驗證錯誤顏色（通常為高對比度的紅色，>= 3.1），並在輸入下方附帶錯誤訊息和錯誤圖示。
3. 建立空間與放置規則
為避免佈局衝突和累積佈局位移 (CLS)：
- 動態定位（翻轉行為）： 計算視口邊界。如果下拉容器靠近視口底部邊緣，則將其對齊方向翻轉，改為在觸發器上方滑出。
- 寬度對齊： 下拉面板必須與觸發器的左右邊緣精確對齊，或者具有與觸發器匹配的定義最小寬度，以防止視覺不穩定。
- 疊加隔離： 使用與高程系統第 3 級（固定/浮動 UI）或第 4 級（疊加層和對話框）匹配的 CSS
z-index堆疊。始終確保面板顯示在相鄰表單元素、背景和佈局卡片之上。
4. 設計響應式與行動裝置自適應
切勿將多欄或寬版桌面下拉選單強制塞入小型行動裝置視口。請應用以下自適應佈局規則：
模式 A：行動底部工作表（適用於豐富選項）
在螢幕尺寸小於 640px（或標準平板電腦斷點）時，將自訂下拉面板轉換為滑出的底部工作表：
- 觸發： 點擊觸發器會開啟一個全寬的底部工作表疊加層。
- 遮罩： 一個半透明的深色背景（40% 到 60% 不透明度）覆蓋主要內容，使背景元素無法互動。
- 標頭： 工作表包含一個固定標頭，帶有清晰標題和一個位於右上角、易於觸控的「關閉」(x) 按鈕。
- 拇指可及性： 選項行佔據全螢幕寬度，並增加觸控目標高度（最小 48px，建議 56px），以便輕鬆用手指點擊選取。
模式 B：原生降級（適用於簡單列表）
在行動視口上，完全從螢幕閱讀器和視覺 DOM 中隱藏自訂標記，並替換為視覺上隱藏、層疊的原生 <select> 元素：
- 運作方式： 將一個標準的
<select>直接定位在自訂觸發器上方，並使用opacity: 0樣式。 - 結果： 使用者看到的是您的自訂品牌觸發器，但點擊它會啟動原生的 OS 選取滾輪（iOS 選取器或 Android 對話框）。這提供了無與倫比的原生效能和本地無障礙性。
5. 定義螢幕閱讀器與鍵盤架構
自訂選單元素必須支援完整的輔助技術。在交接時指定此精確行為：
ARIA 映射與語意
- 觸發器按鈕： 必須具有
role="combobox"、aria-haspopup="listbox"、aria-expanded="true/false"和aria-controls="listbox-id"。 - 下拉面板： 必須具有
role="listbox"，並由觸發器的 ID 標記（aria-labelledby="trigger-id"）。 - 選項項目： 必須具有
role="option"。當前選取的項目必須具有aria-selected="true"，其他項目則必須具有aria-selected="false"。 - 焦點管理： 對於自動完成組合框，搜尋輸入必須具有
aria-autocomplete="list"。在輸入上使用aria-activedescendant="option-id"來追蹤使用者按上下方向鍵移動時，視覺上高亮的選項。 - 即時宣告： 使用
aria-live="polite"或指定的螢幕閱讀器宣告元素來廣播選取狀態變更或計數更新（例如「找到 5 個選項。使用方向鍵進行瀏覽。」）。
鍵盤互動表
您的規格表必須規定這些確切的快捷鍵對應：
| 動作 | 按鍵 | 預期行為 |
|---|---|---|
| 開啟選單 | Space 或 Enter 或 ArrowDown | 開啟下拉面板，將焦點置於第一個選項（或搜尋輸入）上。 |
| 關閉選單 | Escape 或 Tab | 關閉面板，將鍵盤焦點返回至觸發器。 |
| 瀏覽選項 | ArrowDown / ArrowUp | 將活動高亮狀態移動到下一個或上一個選項行。 |
| 選取選項 | Space 或 Enter | 選取高亮的選項，更新值，關閉面板。 |
| 第一個/最後一個項目 | Home / End | 將活動高亮移動到選項列表的絕對開頭或結尾。 |
| 跳躍搜尋 | 任何字母數字鍵 | 如果是靜態列表，焦點立即跳轉到以該字母開頭的第一個選項。 |
決策規則
自訂選單選項決策樹
總共有多少選項？
├── 2 到 5 個選項 ─────────> 使用分段控制或分組單選按鈕
├── 6 到 10 個選項 ────────> 使用自訂選單（單欄，無搜尋輸入）
└── 超過 10 個選項 ───────> 使用組合框（帶有整合搜尋輸入的自訂選單）
選擇正確的選取模式
| 需求 | 使用標準選單 | 使用可搜尋組合框 | 使用多選標記 |
|---|---|---|---|
| 選取限制 | 僅單一值 | 僅單一值 | 同時選取多個值 |
| 選項規模 | 6 到 15 個項目 | 15 到 100+ 個項目 | 5 到 50 個項目 |
| 摩擦類型 | 低度探索 | 需要快速目標檢索 | 累積式組合 |
| 選項佈局 | 簡單文字行 | 簡單或豐富列表行 | 晶片/標記換行佈局 |
限制
- 焦點保留： 當透過
Escape或點擊外部關閉下拉選單時，焦點絕不能遺失或重置到頂層網站地圖層級。它必須程式化地返回至觸發器元素。 - 焦點可見性 (WCAG 2.2 SC 2.4.11)： 觸發器或活動選項上的焦點指示器絕不能被固定的頁面標頭、浮動的底部欄或重疊的疊加層隱藏或遮蔽。
- 觸控目標 (WCAG 2.2 SC 2.5.8)： 每個選項行和觸發器元素必須具有最小
24x24px的可點擊尺寸，預設佈局要求高度為40px到48px，以避免在行動裝置上觸控重疊。 - 色彩對比 (WCAG 2.1 SC 1.4.11)： 所有視覺狀態指示器（如焦點環、懸停背景、錯誤邊框）必須與相鄰顏色保持至少 3:1 的對比度。
- 動畫與減少動畫： 下拉展開/摺疊動畫必須在 CSS 的
prefers-reduced-motion: reduce媒體查詢下被抑制或完全移除。
依賴關係
在沒有以下系統的情況下，此技能無法獨立運作：
- 「流體間距系統」： 提供用於觸發器和面板內邊距的間距比例。
- 「流體字體排印系統」： 提供用於選項文字、副標題和標籤的可縮放字型比例。
- 「焦點指示器設計系統」： 提供用於聚焦觸發器和選項行的焦點環樣式。
- 「高程與深度系統」： 提供用於下拉面板疊加層的陰影和 Z 軸層級權重。
- 「色彩調色板與互動系統」： 提供用於預設、懸停、選取和錯誤狀態的顏色記號。