fix: Reinstate Assistant a11y message groups

src/components/chat-message.tsx

@@ -15,7 +15,7 @@ import { ExecuteIcon } from './icons/execute';
 interface ChatMessageProps {
 	children: React.ReactNode;
 	isUser: boolean;
-	id?: string;
+	id: string;
 	messageId?: number;
 	className?: string;
 	projectPath?: string;

src/components/content-tab-assistant.tsx

@@ -57,6 +57,7 @@ const AuthenticatedView = memo(
 				{ messages.map( ( message, index ) => (
 					<ChatMessage
 						key={ index }
+						id={ `message-chat-${ index }` }
 						isUser={ message.role === 'user' }
 						projectPath={ path }
 						updateMessage={ updateMessage }
@@ -67,7 +68,7 @@ const AuthenticatedView = memo(
 					</ChatMessage>
 				) ) }
 				{ isAssistantThinking && (
-					<ChatMessage isUser={ false }>
+					<ChatMessage isUser={ false } id="message-thinking">
 						<MessageThinking />
 					</ChatMessage>
 				) }

src/components/copy-text-button.tsx

@@ -40,7 +40,6 @@ export function CopyTextButton( {
 		}
 		setTimeoutId( setTimeout( () => setShowCopied( false ), timeoutConfirmation ) );
 	}, [ text, timeoutConfirmation, timeoutId ] );
-	console.log( 'Icon Size:', iconSize );
 
 	return (
 		<Button

src/components/welcome-message-prompt.tsx

@@ -1,8 +1,10 @@
+import { __ } from '@wordpress/i18n';
 import { arrowRight } from '@wordpress/icons';
 import { cx } from '../lib/cx';
 
 interface WelcomeMessagePromptProps {
 	children?: React.ReactNode;
+	id: string;
 	className?: string;
 }
 
@@ -19,14 +21,20 @@ interface WelcomeComponentProps {
 	examplePrompts: string[];
 }
 
-export const WelcomeMessagePrompt = ( { children, className }: WelcomeMessagePromptProps ) => (
+export const WelcomeMessagePrompt = ( { id, children, className }: WelcomeMessagePromptProps ) => (
 	<div className={ cx( 'flex mt-2' ) }>
 		<div
+			id={ id }
+			role="group"
+			aria-labelledby={ id }
 			className={ cx(
 				'inline-block p-3 rounded border border-gray-300 lg:max-w-[70%] select-text bg-white',
 				className
 			) }
 		>
+			<div className="relative">
+				<span className="sr-only">{ __( 'Studio Assistant' ) },</span>
+			</div>
 			<div className="assistant-markdown">
 				<p>{ children }</p>
 			</div>
@@ -67,7 +75,11 @@ const WelcomeComponent = ( {
 	return (
 		<div>
 			{ messages.map( ( message, index ) => (
-				<WelcomeMessagePrompt key={ index } className="welcome-message">
+				<WelcomeMessagePrompt
+					key={ index }
+					id={ `message-welcome-${ index }` }
+					className="welcome-message"
+				>
 					{ message }
 				</WelcomeMessagePrompt>
 			) ) }