題幹與適用場景
這道前端題考察複雜互動元件的鍵盤模型與可存取性。重點不是給輸入框綁幾個 keydown，而是定義開啟、搜尋、選擇、執行、關閉與恢復焦點的完整狀態機，讓螢幕閱讀器取得正確角色、名稱與狀態。
面試官考察什麼
- 能否區分對話框、combobox、listbox 與 menu 的語意。
- 能否設計 Tab、方向鍵、Enter、Escape、Home、End 的一致行為。
- 能否處理焦點可見、焦點恢復、動態結果、載入與錯誤狀態。
- 能否避免全域快捷鍵搶占輸入、輔助技術或瀏覽器預設行為。
回答前需要釐清的問題
先確認命令是否分組、是否支援最近記錄與非同步搜尋，行動裝置是否有入口，快捷鍵是否可設定，以及執行命令後是否導覽、開啟彈窗或改變頁面狀態。也要確認是否混用滑鼠與觸控、結果數量與載入延遲上限。
30 秒回答框架
我會把面板作為帶輸入框的模態對話框，輸入與結果建立明確的 combobox/listbox 關係。開啟時保存觸發元素並把焦點移入輸入框，方向鍵移動活動項，Enter 執行，Escape 關閉並恢復焦點。結果變化更新可感知狀態，快捷鍵只在安全情境觸發，並用鍵盤、讀屏與自動化測試覆蓋狀態遷移。
分步驟深入解答
1. 選擇正確的語意邊界
外層是可命名的 dialog，輸入框依互動模式使用 combobox 語意，結果容器使用 listbox，選項使用 option。若命令有層級和選單項，應參考 menu 模式，不要把所有元素都加上 role="menuitem"。ARIA 只描述真實行為，不能用角色掩蓋錯誤 DOM 結構。
2. 設計焦點與鍵盤狀態機
開啟時記錄觸發按鈕，焦點進入輸入框；上下方向鍵在結果間移動，Home/End 跳到首尾，Enter 執行目前項目，Escape 關閉。Tab 的行為要與所選模式一致，不能讓焦點意外掉到背景。關閉、執行失敗或導覽後，按情境恢復到觸發元素或新的目標位置。
3. 處理動態結果與讀屏回饋
搜尋結果非同步更新時保留輸入焦點，更新 aria-activedescendant 或真實焦點，並提供載入、無結果、錯誤與結果數量提示。不要每個字元都朗讀完整列表；用簡潔的狀態區域回報變化，確保選中項名稱、快捷鍵與停用狀態可被讀到。
4. 控制快捷鍵與預設行為
開啟快捷鍵應檢查目前焦點、組合鍵與平台差異，避免在輸入框、文字編輯器或螢幕閱讀器模式下搶占。處理事件前確認是否需要 preventDefault，不要阻止瀏覽器原生複製、貼上、尋找和輔助技術操作。命令面板也應提供可見按鈕入口，不把快捷鍵作為唯一入口。
5. 讓執行、失敗與測試可觀察
執行命令前顯示目前選擇，非同步命令提供進度或停用重複提交；失敗時保留上下文、說明下一步並允許重試。測試覆蓋純鍵盤路徑、焦點可見、焦點陷阱、Escape 恢復、動態結果、縮放、低速網路與至少一種螢幕閱讀器。記錄開啟、搜尋、執行失敗與取消事件，但不要記錄敏感輸入。
高品質示範回答
我會用可命名的 dialog 包住輸入框與結果。開啟時保存觸發按鈕，把焦點移到輸入框；輸入框和 listbox 透過 aria-controls、aria-activedescendant 等關係表達目前選項。上下鍵、Home/End 移動選擇，Enter 執行，Escape 關閉並恢復焦點，Tab 不讓焦點掉到背景。非同步搜尋顯示載入、無結果和錯誤狀態，結果數量用簡潔狀態提示告知讀屏。快捷鍵檢查焦點和平台，不搶占輸入或瀏覽器預設操作，同時提供可見按鈕入口。測試覆蓋鍵盤、讀屏、縮放、慢網、失敗重試與焦點可見，並避免記錄搜尋中的敏感內容。
常見錯誤
- 只監聽 keydown，沒有定義開啟、關閉和恢復焦點的狀態機。
- 給普通容器亂加 menu、menuitem 或 combobox 角色。
- 動態更新列表後焦點遺失，讀屏無法知道目前選項。
- 全域攔截快捷鍵，破壞輸入、複製貼上和輔助技術行為。
- 沒有可見入口，使用者必須記住快捷鍵才能使用。
- 只測滑鼠和自動化點擊，不測純鍵盤、縮放、讀屏和慢網路。
追問與應對
應該移動真實焦點還是使用 aria-activedescendant？
兩者都可行，取決於元件結構和讀屏支援。移動真實焦點更直觀，但要維護輸入與選項互動；aria-activedescendant 可保留輸入焦點，必須確保引用穩定、選項可感知並覆蓋真實裝置測試。
搜尋結果為空時如何避免焦點陷阱？
保留輸入焦點，顯示明確的無結果狀態，仍允許 Escape 關閉、修改查詢或使用其他可見按鈕。不要把焦點移到不可操作的佔位節點。
命令執行後頁面導覽了，焦點怎麼處理？
由目標頁面決定新的焦點位置，例如標題或主要內容；若仍在原頁面，則恢復觸發按鈕或合理上下文。執行失敗時留在面板並保留輸入與錯誤說明。
如何驗證快捷鍵不會與瀏覽器衝突？
列出支援的平台和組合鍵，在輸入、編輯器、表單和螢幕閱讀器環境中手工驗證。只有確實替代預設行為時才阻止事件，並提供設定或按鈕作為替代入口。