diff --git a/packages/chat-ui/src/composer.tsx b/packages/chat-ui/src/composer.tsx index f670ae349..faece22d6 100644 --- a/packages/chat-ui/src/composer.tsx +++ b/packages/chat-ui/src/composer.tsx @@ -890,6 +890,7 @@ export const Composer = forwardRef< 0} + aria-hidden={!(focused && value.trim().length > 0)} > {CHAT_STRINGS.composerKeyboardHint} diff --git a/packages/chat-ui/src/styles.css b/packages/chat-ui/src/styles.css index 69fffe042..e41f12cd6 100644 --- a/packages/chat-ui/src/styles.css +++ b/packages/chat-ui/src/styles.css @@ -2560,12 +2560,14 @@ font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; + visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms var(--chat-ease); } .chat-composer-keyboard-hint[data-visible="true"] { + visibility: visible; opacity: 1; } diff --git a/packages/chat-ui/test/composer.test.tsx b/packages/chat-ui/test/composer.test.tsx index 1a55e8acd..082a9dc2c 100644 --- a/packages/chat-ui/test/composer.test.tsx +++ b/packages/chat-ui/test/composer.test.tsx @@ -265,6 +265,7 @@ describe("Composer keyboard hint", () => { mount(() => Promise.resolve(true)); expect(keyboardHint()).not.toBeNull(); expect(keyboardHint()?.getAttribute("data-visible")).toBe("false"); + expect(keyboardHint()?.getAttribute("aria-hidden")).toBe("true"); act(() => { textarea().focus(); @@ -273,6 +274,7 @@ describe("Composer keyboard hint", () => { await settle(); expect(keyboardHint()?.getAttribute("data-visible")).toBe("true"); + expect(keyboardHint()?.getAttribute("aria-hidden")).toBe("false"); expect(keyboardHint()?.textContent).toBe("Enter to send"); expect( container?.querySelectorAll(".chat-composer-actions > button").length, @@ -294,6 +296,7 @@ describe("Composer keyboard hint", () => { typeInto(textarea(), ""); await settle(); expect(keyboardHint()?.getAttribute("data-visible")).toBe("false"); + expect(keyboardHint()?.getAttribute("aria-hidden")).toBe("true"); }); });