Add title attribute to chat input button #2935
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: ffab96f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: -4.65 kB (-0.25%) Total Size: 1.87 MB
ℹ️ View Unchanged
|
shaneeza
reviewed
Jul 10, 2025
| @@ -433,6 +433,7 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>( | |||
| className={cx({ | |||
| [sendButtonDisabledStyles]: isSendButtonDisabled(), | |||
| })} | |||
| title="Send message" | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
The submit button for the lg-chat InputBar often has only an icon or just the text
enter. By adding a title we can be more descriptive for screen readers and allow more realistic targeting in tests.Would appreciate some feedback on using the
titleattribute instead ofaria-label. The issue witharia-labelis that it should match the contents of the button (a WCAG 2.1 requirement), butenteris not very descriptive of the action. On the flip-sidetitlehas the side effect of a system tooltip on hover, so it does change the look and feel of the component.✅ Checklist
For bug fixes, new features & breaking changes
pnpm changesetand documented my changesFor new components
🧪 How to test changes