Skip to content

Add title attribute to chat input button #2935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add title attribute to chat input button #2935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f006f22
add accessible title to submit button
greggb Jul 1, 2025
ffab96f
add changeset
greggb Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/spotty-areas-work.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-chat/input-bar': patch
---

Add an accessible title to the submit button
2 changes: 1 addition & 1 deletion chat/input-bar/src/InputBar/InputBar.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('packages/input-bar', () => {

test('fires when enter is clicked', () => {
const textarea = screen.getByRole('textbox');
const sendButton = screen.getByRole('button');
const sendButton = screen.getByTitle('Send message');
userEvent.type(textarea, testText);
userEvent.click(sendButton);

Expand Down
1 change: 1 addition & 0 deletions chat/input-bar/src/InputBar/InputBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,7 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
className={cx({
[sendButtonDisabledStyles]: isSendButtonDisabled(),
})}
title="Send message"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue with aria-label is that it should match the contents of the button (a WCAG 2.1 requirement), but enter is not very descriptive of the action.

According to this page, I think it's saying that the aria-label does not have to match the contents of the button, but it should contain it.

When the use of these techniques results in an accessible name in which the exact string of the visible label does not occur in the accessible name, speech users may be unable to activate that control.

So something like the following would be considered accessible, since the visible label Enter is present within the aria-label:

<button aria-label='Enter message'>Enter</button>

Additionally, since the button can sometimes render as an icon-only button, aria-label would be beneficial over title since aria-label provides a text label for elements that might not have a visible one, while title is more for additional context.

Given that the button may include or exclude visible text, relying on aria-label seems like the most robust and accessible solution.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @shaneeza - Is Enter Message the right label for a submit button? This seems like a good compromise, but in isolation it sounds like the label for an input, not submit, action. If it wasn't so wordy I would suggest aria-label="press enter to submit message". Any thoughts before I make this change?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did a little more research, and it seems that the accessible name doesn't just need to contain the visible text; it needs to match or clearly include what you see on the screen.

When speech input users interact with a web page, they usually speak a command followed by the reference to some visible label (like the text in a button or a link, or the text labelling some input). If the visible label does not match the accessible name of the control, speech users may be unable to directly activate that control.

For example, speech input users interact with web pages by speaking commands like click send or click enter. The tools they use rely on the accessible label to match what the user says.

So if a button is labeled Enter, but its accessible name is Press enter to submit, that mismatch can cause problems. The word Enter is present, but the label now sounds like an instruction instead of a button name. The speech tool might not recognize it when the user says Click Enter.

In contrast, something like Enter message still feels like an action and would likely be recognized correctly.

That said, I think that Enter Message makes sense as an accessible label because it's on a button. It's universally understood that after typing a message, you would press Enter to submit/send it.

However, maybe this brings up another point that instead of Enter, we should use Send or Submit. I'm not sure why we went with Enter.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greggb, any thoughts?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to update this to have aria-label="Enter message". I wasn't sure if you wanted to further modify the action text. I think for the scope of this change keeping it as-is feels more appropriate and just adding the label. Agreed?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree!

>
{shouldRenderButtonText && 'Enter'}
</Button>
Expand Down