Feat/datepicker modal search toolbar#72
Conversation
包含日曆對話框、combobox 模式、鍵盤導航與年度切換按鈕。
實作 WAI-ARIA dialog 模式，以 autofocus 管理焦點，關閉按鈕採用 form method=dialog。
以 output 元素提供搜尋結果即時回饋。
實作 roving tabindex 鍵盤導航與 aria-pressed 狀態管理。
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a suite of new accessible UI components, including a Date Picker, Modal, Search Feedback, and Toolbar, complete with styles, scripts, and documentation. The review feedback highlights several improvement opportunities for the Date Picker, such as disabling browser autocomplete, properly handling empty input states, and reverting invalid manual entries to ensure consistency between the enhanced and native inputs. Additionally, the Toolbar's menu navigation should be adjusted to follow W3C APG patterns, allowing arrow keys to return focus to the toolbar for a better user experience.
| if (!isValidDate(value)) { | ||
| this._updateFeedback('日期格式不正確，請輸入 YYYY-MM-DD 格式。'); | ||
| return; |
There was a problem hiding this comment.
當手動輸入的日期格式不正確時，目前的實作僅播報錯誤但保留了無效的文字，這會導致增強輸入框與隱藏的 nativeInput 資料不一致。建議在驗證失敗時將輸入框還原為上一次有效的日期值。
| if (!isValidDate(value)) { | |
| this._updateFeedback('日期格式不正確，請輸入 YYYY-MM-DD 格式。'); | |
| return; | |
| if (!isValidDate(value)) { | |
| this._updateFeedback('日期格式不正確，請輸入 YYYY-MM-DD 格式。'); | |
| this._textInput.value = this.state.selectedDate || ''; | |
| return; | |
| } |
tony140407
force-pushed
the
feat/datepicker-modal-search-toolbar
branch
from
9f18337 to
6811f2f
Compare
| textInput.className = 'dp__input dp__input--enhanced'; | ||
| textInput.setAttribute('placeholder', 'YYYY-MM-DD'); | ||
| textInput.setAttribute('role', 'combobox'); | ||
| textInput.setAttribute('aria-haspopup', 'grid'); |
There was a problem hiding this comment.
aria-haspopup="dialog" 確保與 popup 角色一致，避免產生預期互動方式與實際落差或使用者不知道如何操作。
| 由 JS 動態建立並插入，初始不存在於 HTML | ||
| JS 會加上以下屬性： | ||
| role="combobox" | ||
| aria-haspopup="grid" |
2 participants
主要改動
新增 Date Picker、Modal、Search Feedback、Toolbar 四個元件
新增元件
其他調整