feat: Improve AI assistant accessibility

src/components/assistant-thinking.tsx

@@ -1,6 +1,8 @@
+import { __ } from '@wordpress/i18n';
+
 export function MessageThinking() {
 	return (
-		<div className="flex justify-center items-center gap-1 p-0.5">
+		<div aria-label={ __( 'Thinking…' ) } className="flex justify-center items-center gap-1 p-0.5">
 			<div
 				className="animate-pulse h-1.5 w-1.5 bg-a8c-blueberry rounded-full"
 				style={ { animationDelay: '0.2s' } }

src/components/content-tab-assistant.tsx

@@ -20,6 +20,7 @@ interface ContentTabAssistantProps {
 }
 
 interface MessageProps {
+	id: string;
 	children: React.ReactNode;
 	isUser: boolean;
 	className?: string;
@@ -85,7 +86,7 @@ const ActionButton = ( {
 	);
 };
 
-export const Message = ( { children, isUser, className }: MessageProps ) => {
+export const Message = ( { children, id, isUser, className }: MessageProps ) => {
 	const [ cliOutput, setCliOutput ] = useState< string | null >( null );
 	const [ cliStatus, setCliStatus ] = useState< 'success' | 'error' | null >( null );
 	const [ cliTime, setCliTime ] = useState< string | null >( null );
@@ -158,11 +159,19 @@ export const Message = ( { children, isUser, className }: MessageProps ) => {
 			) }
 		>
 			<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',
 					! isUser ? 'bg-white' : 'bg-white/45'
 				) }
 			>
+				<div className="relative">
+					<span className="sr-only">
+						{ isUser ? __( 'Your message' ) : __( 'Studio Assistant' ) },
+					</span>
+				</div>
 				{ typeof children === 'string' ? (
 					<div className="assistant-markdown">
 						<Markdown components={ { code: CodeBlock } }>{ children }</Markdown>
@@ -185,12 +194,12 @@ const AuthenticatedView = memo(
 	} ) => (
 		<>
 			{ messages.map( ( message, index ) => (
-				<Message key={ index } isUser={ message.role === 'user' }>
+				<Message key={ index } id={ `message-${ index }` } isUser={ message.role === 'user' }>
 					{ message.content }
 				</Message>
 			) ) }
 			{ isAssistantThinking && (
-				<Message isUser={ false }>
+				<Message isUser={ false } id="message-thinking">
 					<MessageThinking />
 				</Message>
 			) }
@@ -199,7 +208,7 @@ const AuthenticatedView = memo(
 );
 
 const UnauthenticatedView = ( { onAuthenticate }: { onAuthenticate: () => void } ) => (
-	<Message className="w-full" isUser={ false }>
+	<Message id="message-unauthenticated" className="w-full" isUser={ false }>
 		<div className="mb-3 a8c-label-semibold">{ __( 'Hold up!' ) }</div>
 		<div className="mb-1">
 			{ __( 'You need to log in to your WordPress.com account to use the assistant.' ) }

src/components/icons/assistant.tsx

@@ -1,10 +1,16 @@
+import { ReactSVG, SVGProps } from 'react';
+
 interface AssistantIconProps {
 	size?: number;
 }
 
-export function AssistantIcon( { size = 14 }: AssistantIconProps ) {
+export function AssistantIcon( {
+	size = 14,
+	'aria-hidden': ariaHidden,
+}: AssistantIconProps & SVGProps< ReactSVG > ) {
 	return (
 		<svg
+			aria-hidden={ ariaHidden }
 			width={ size }
 			height={ size }
 			viewBox={ `0 0 14 14` }