update ui - #465
Conversation
seafile-dev
left a comment
There was a problem hiding this comment.
Verdict: Comment
Warnings:
- 新增清除控件不是可访问的交互元素;详见 inline comment。
Suggested fix: 统一改为带本地化 aria-label 的button type="button"。
| <span | ||
| className=" dtable-font dtable-icon-x" | ||
| aria-hidden="true" | ||
| onClick={this.clearSearchValue} |
There was a problem hiding this comment.
[Warning] 清除控件无法由键盘或读屏操作
Why this matters:
清除操作只绑定在带有 aria-hidden="true" 的 span 上。该元素不可聚焦、没有可访问名称,也没有键盘事件,因此键盘和屏幕阅读器用户无法使用新增加的清除按钮;同一实现模式也出现在本 PR 的 LinkEditor 搜索框。
Suggested fix: 使用原生 button type="button"(或项目现有的可访问图标按钮),提供本地化的 aria-label,并保留点击处理;避免将可交互元素标记为 aria-hidden。
seafile-dev
left a comment
There was a problem hiding this comment.
Verdict: Comment
Warnings:
- The new clear-control markup depends on utility classes not supplied by this component package; see inline comment.
Suggested fix: ship the clearable-input layout styles with the component or use an existing package-owned control, then ensure consumers receive that contract.
| {this.renderParticipantList()} | ||
| <div className="dtable-ui-participants-editor-search"> | ||
| <input className="form-control" type="text" placeholder={getLocale('Search_collaborator')} value={this.state.searchVal} onChange={this.onChangeSearch}/> | ||
| <div className="seatable-input-wrapper"> |
There was a problem hiding this comment.
[Warning] Clear-control styles are not packaged
Why this matters:
This adds seatable-input-wrapper, form-control-clear-icon, and search-icon-right, but this PR adds no stylesheet and the component package has no definitions for the wrapper or icon-positioning classes. A consumer that loads only the published component CSS will render the icon in normal flow instead of as an in-field clear control.
Suggested fix: define and export these layout/padding rules with dtable-ui-component, or replace this markup with an existing package-owned clearable-input component and release the matching dependency contract.
No description provided.