Copilot commented on code in PR #883:
URL:
https://github.com/apache/rocketmq-dashboard/pull/883#discussion_r3705605175
##########
web/src/pages/home/index.tsx:
##########
Review Comment:
These disabled icon+text buttons rely on visible text for their accessible
name, but they don't expose an explicit accessible description explaining why
they're disabled. Consider adding `aria-disabled` (optional when using
`disabled`) and/or `aria-describedby` pointing to helper text, or at least add
`aria-label` that includes the reason (e.g., '工具（暂未接入）') so screen reader users
get the same context as the `title` tooltip (which is not reliably announced).
##########
web/src/pages/ai/index.tsx:
##########
@@ -781,7 +781,7 @@ const AiPage = () => {
<SlidersHorizontal size={17} />
<span>工具</span>
</button>
- <button className="tool-btn">
+ <button className="tool-btn" disabled title="Prompt
增强暂未接入">
Review Comment:
Similar to HomePage, the disabled state explanation is only in `title`,
which is not consistently exposed to assistive tech. Consider adding an
accessible description (e.g., `aria-label` including the reason, or
`aria-describedby` to helper text) so the 'unavailable' reason is available to
non-mouse users.
##########
web/src/index.css:
##########
@@ -154,6 +154,14 @@ body {
.tool-btn:hover {
background: #f3f4f6;
}
+.tool-btn:disabled {
+ color: #9ca3af;
+ cursor: not-allowed;
+ opacity: 0.72;
+}
+.tool-btn:disabled:hover {
+ background: #f9fafb;
+}
Review Comment:
The disabled styling reduces opacity and changes text color, which can lower
contrast and make the button label hard to read depending on the background.
Consider ensuring the resulting disabled foreground/background combination
meets contrast requirements (or avoid opacity changes and instead use a single,
verified disabled color palette).
##########
web/src/pages/home/index.tsx:
##########
@@ -387,7 +387,7 @@ const HomePage = () => {
<SlidersHorizontal size={17} />
<span>工具</span>
</button>
- <button className="tool-btn">
+ <button className="tool-btn" disabled title="Prompt
增强暂未接入">
Review Comment:
These disabled icon+text buttons rely on visible text for their accessible
name, but they don't expose an explicit accessible description explaining why
they're disabled. Consider adding `aria-disabled` (optional when using
`disabled`) and/or `aria-describedby` pointing to helper text, or at least add
`aria-label` that includes the reason (e.g., '工具（暂未接入）') so screen reader users
get the same context as the `title` tooltip (which is not reliably announced).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
