Skip to content

移动端 Web UI 控件可访问性问题 #121

@pia

Description

@pia

问题描述

在手机浏览器中通过 Web 访问 codeg 时,移动端界面有两个控件可访问性问题。

1. 滚动长会话后顶部控件可能消失

在较长的会话内容中持续向上滚动时,顶部的会话标签栏以及左上角用于展开侧边栏的三横线按钮有时会被滚出视口。之后再向下滑动,会话内容可以继续滚动,但顶部控件不一定恢复显示,导致无法方便地切换会话或打开侧边栏。

期望行为:移动端顶部控件应始终保持可访问,滚动会话内容不应让整个应用外壳被滚走。

2. 侧边栏项目目录的“+”按钮依赖 hover

侧边栏中每个项目目录右侧的新建会话“+”按钮目前只有在鼠标 hover 到目录行时才显示。手机端没有 hover 状态,因此该按钮默认不可见,用户不容易发现或触发该操作。

期望行为:在触摸设备或移动端上,该“+”按钮应该可见,或至少提供等价的可访问入口。

复现环境

  • 运行模式:Web
  • 设备:手机浏览器
  • 现象主要发生在移动端视口下

可能原因

  • 移动端页面外层使用 h-screen,但根 html/body 没有完全固定滚动,长内容滚动时可能把滚动传递到页面本身。
  • 项目目录“+”按钮样式依赖 group-hover:opacity-100,触摸设备没有 hover。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions