chore: Deprecate ariaLabel in ChatBubble component

The role group was preventing the contents of the chat bubble message from being announced by aria-live when the message appeared. With that the aria-label property gets obsolete.
cloudscape-design · Feb 20, 2025 · e6555c7 · e6555c7
1 parent b5b61a9
commit e6555c7
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 42 deletions.
diff --git a/pages/chat-bubble/content-variants.page.tsx b/pages/chat-bubble/content-variants.page.tsx
@@ -73,7 +73,7 @@ export default function ChatBubblesContentVariantsPage() {
 
 function GenAIChatBubble({ children }: { children: React.ReactNode }) {
   return (
-    <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" actions={<Actions />} ariaLabel="Message">
+    <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" actions={<Actions />}>
       {children}
     </ChatBubble>
   );

diff --git a/pages/chat-bubble/simple.page.tsx b/pages/chat-bubble/simple.page.tsx
@@ -15,42 +15,26 @@ export default function ChatBubblePage() {
 
       <TestBed>
         <ChatContainer>
-          <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
+          <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />}>
             What can I do with Amazon S3?
           </ChatBubble>
-          <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" ariaLabel="Gen AI at at 4:23:23pm">
+          <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming">
             Amazon S3 provides a simple web service interface that you can use to store and retrieve any amount of data,
             at any time, from anywhere.
           </ChatBubble>
 
-          <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:25:00pm">
+          <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />}>
             Long text. {longText}
           </ChatBubble>
 
-          <ChatBubble
-            avatar={<ChatBubbleAvatarGenAI />}
-            type="incoming"
-            actions={<Actions />}
-            ariaLabel="Gen AI at 4:25:05pm"
-          >
+          <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" actions={<Actions />}>
             Long text. {longText}
           </ChatBubble>
-          <ChatBubble
-            avatar={<ChatBubbleAvatarGenAI />}
-            type="incoming"
-            actions={<Actions />}
-            ariaLabel="Gen AI at 4:25:07pm"
-            hideAvatar={true}
-          >
+          <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" actions={<Actions />} hideAvatar={true}>
             Second consecutive message coming from the same author, avatar is hidden.
           </ChatBubble>
 
-          <ChatBubble
-            avatar={<ChatBubbleAvatarGenAI loading={true} />}
-            type="incoming"
-            showLoadingBar={true}
-            ariaLabel="Gen AI at 4:24:24pm"
-          >
+          <ChatBubble avatar={<ChatBubbleAvatarGenAI loading={true} />} type="incoming" showLoadingBar={true}>
             <Box color="text-body-secondary">Generating a response (using Box)</Box>
           </ChatBubble>
 
@@ -59,7 +43,6 @@ export default function ChatBubblePage() {
             type="incoming"
             showLoadingBar={true}
             actions={<Actions />}
-            ariaLabel="Gen AI at 4:24:25pm"
           >
             Generating a response with actions
           </ChatBubble>

diff --git a/pages/chat-bubble/with-updates.page.tsx b/pages/chat-bubble/with-updates.page.tsx
@@ -7,8 +7,6 @@ import Button from "@cloudscape-design/components/button";
 import ChatBubble from "../../lib/components/chat-bubble";
 import { Actions, ChatBubbleAvatarGenAI, ChatBubbleAvatarUser, ChatContainer } from "./util-components";
 
-const firstBubbleTimestamp = new Date().toLocaleTimeString();
-
 export default function ChatBubblesWithUpdates() {
   const [bubbleTimestamps, setBubbleTimestamps] = useState<Array<string>>([]);
   const [defaultChatBubbleUpdateCount, setDefaultChatBubbleUpdateCount] = useState(0);
@@ -25,7 +23,7 @@ export default function ChatBubblesWithUpdates() {
       </Button>
 
       <ChatContainer>
-        <ChatBubble type="outgoing" ariaLabel={firstBubbleTimestamp} avatar={<ChatBubbleAvatarUser />}>
+        <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />}>
           Bubble updated {defaultChatBubbleUpdateCount} times
         </ChatBubble>
         {bubbleTimestamps.map((timestamp: string, index: number) => {
@@ -34,7 +32,6 @@ export default function ChatBubblesWithUpdates() {
           return (
             <ChatBubble
               key={timestamp + index}
-              ariaLabel={`${isGenAi ? "Gen AI assistant" : "Jane Doe"} at ${timestamp}`}
               type={isGenAi ? "incoming" : "outgoing"}
               avatar={isGenAi ? <ChatBubbleAvatarGenAI /> : <ChatBubbleAvatarUser />}
               actions={isGenAi ? <Actions /> : undefined}

diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -100,10 +100,11 @@ exports[`definition for chat-bubble matches the snapshot > chat-bubble 1`] = `
   "name": "ChatBubble",
   "properties": [
     {
+      "deprecatedTag": "You can safely remove this property as it has no effect.",
       "description": "Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.
 For example, "John Doe at 3:42:10am".",
       "name": "ariaLabel",
-      "optional": false,
+      "optional": true,
       "type": "string",
     },
     {

diff --git a/src/chat-bubble/__tests__/chat-bubble.test.tsx b/src/chat-bubble/__tests__/chat-bubble.test.tsx
@@ -30,7 +30,6 @@ describe("Chat bubble", () => {
           <ExpandableSection headerText="Sources">Sources</ExpandableSection>
         </>
       ),
-      ariaLabel: "Chat bubble",
       actions: (
         <ButtonGroup
           variant="icon"
@@ -68,7 +67,6 @@ describe("Chat bubble", () => {
       type: "outgoing",
       avatar: <Avatar ariaLabel="Avatar" />,
       children: "Test content",
-      ariaLabel: "Chat bubble",
       showLoadingBar: true,
     });
 
@@ -80,7 +78,6 @@ describe("Chat bubble", () => {
       type: "outgoing",
       avatar: <Avatar ariaLabel="Avatar" />,
       children: "Test content",
-      ariaLabel: "Chat bubble",
       showLoadingBar: false,
     });
 
@@ -92,7 +89,6 @@ describe("Chat bubble", () => {
       type: "outgoing",
       avatar: <Avatar ariaLabel="Avatar" />,
       children: "Test content",
-      ariaLabel: "Chat bubble",
       hideAvatar: true,
     });
 

diff --git a/src/chat-bubble/interfaces.ts b/src/chat-bubble/interfaces.ts
@@ -23,8 +23,10 @@ export interface ChatBubbleProps {
   /**
    * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.
    * For example, "John Doe at 3:42:10am".
+   *
+   * @deprecated You can safely remove this property as it has no effect.
    */
-  ariaLabel: string;
+  ariaLabel?: string;
 
   /**
    * Hides the avatar while preserving its space.

diff --git a/src/chat-bubble/internal.tsx b/src/chat-bubble/internal.tsx
@@ -19,7 +19,6 @@ export default function InternalChatBubble({
   actions,
   showLoadingBar,
   hideAvatar = false,
-  ariaLabel,
   __internalRootRef = null,
   ...rest
 }: InternalChatBubbleProps) {
@@ -37,13 +36,7 @@ export default function InternalChatBubble({
   }, [hideAvatar]);
 
   return (
-    <div
-      className={styles.root}
-      {...getDataAttributes(rest)}
-      ref={__internalRootRef}
-      role="group"
-      aria-label={ariaLabel}
-    >
+    <div className={styles.root} {...getDataAttributes(rest)} ref={__internalRootRef}>
       {avatar && (
         <div ref={avatarRef} className={clsx(styles.avatar, hideAvatar && styles.hide)}>
           {avatar}