What Sender does for you, and what it leaves to the page around it.
Naming the input
The input is a real <textarea>. In slot mode it is a <div> with role="textbox" and contenteditable. Neither gets a name of its own.
Pass aria-label to Sender, like “Message”. It reaches the input. The placeholder is not a label: it disappears as soon as the reader types, and in slot mode it is not exposed at all.
Use aria-labelledby to point at a visible heading instead. Do not pass id for a <label htmlFor>: it lands on the root and the input both, so the page has the same id twice.
Say how to send next to the input when it is not obvious, like “Shift+Enter to send” under submitType="shiftEnter". Put it in the footer and point aria-describedby at it.
Naming the buttons
The action buttons are real <button> elements, so they take focus and Enter or Space. Most show only a glyph.
The send button has no name. Give it one through the function form of suffix, which passes your props on to the button.
The stop button is named “Stop loading”, from the locale. The microphone, clear and header close buttons are named after their glyph (“audio”, “clear”, “close”), which is English and not very clear. Rebuild the ones you use the same way, with your own aria-label.
Buttons you put in prefix are yours, so they need a name from you, like aria-label="Attach files" on a paperclip.
Enter sends and Shift+Enter breaks the line, or the reverse under shiftEnter. Enter pressed while an input method is composing text (Chinese, Japanese, Korean) never sends.
Tab follows the order on screen: the header's content, the prefix, the input, the suffix buttons, then the footer.
A reader who sends with the button leaves focus on it, and the button disables itself once you clear the input. Call ref.current.focus() after sending, so the next message can be typed at once.
A skill chip is focusable, and its close control is named “Close skill”.
What is announced
Sender announces nothing on its own. Sending, the switch to the stop button and a reply arriving all happen silently for a screen reader.
Render the conversation in a region with aria-live="polite", or announce a short line like “Reply finished” in a <div role="status"> of your own when loading turns off.
A disabled Sender only says it is disabled. Put the reason in text the reader can reach, not only in the placeholder.
Sender.Switch
Sender.Switch renders a plain button. Its on state is a color change, and nothing tells a screen reader whether it is on.
Put the state in the text with checkedChildren and unCheckedChildren, like “Deep search on” and “Deep search off”.
aria-* props on the switch land on its wrapper, not on the button, so aria-pressed cannot be set from outside. If you need it, use a Button of your own in the footer.
Contrast
Placeholder text is light gray and falls well under 4.5:1. Keep it to a short hint, and never put instructions only there.
The disabled send button is the primary color at reduced opacity. That is fine for a disabled control, but check a custom primary color in both modes.
Slot fields are tinted with the primary color. Check their text against your theme. The Tokens tab lists the slot tokens.