fix: Update test page

Author: Who-is-PS

pages/tooltip/component-usage.page.tsx

@@ -29,7 +29,6 @@ export default function InternalTooltipExamples() {
         <SpaceBetween size="l">
           <Header variant="h1">Tooltip</Header>
           <TruncatedTextExample />
-          <IconOnlyButtonsExample />
           <FileInputItemExample />
           <ButtonExample />
           <SelectItemExample />
@@ -76,11 +75,11 @@ function TruncatedTextExample() {
                 borderRadius: '4px',
               }}
             >
-              my-very-long-filename-document-final-v2.pdf
+              this-is-a-example-filename-document-final-v2.pdf
             </div>
             {show1 && (
               <Tooltip
-                content="my-very-long-filename-document-final-v2.pdf"
+                content=" this-is-a-example-filename-document-final-v2.pdf"
                 getTrack={() => ref1.current}
                 onEscape={() => setShow1(false)}
                 trackKey="file1"
@@ -149,57 +148,6 @@ function TruncatedTextExample() {
   );
 }
 
-function IconOnlyButtonsExample() {
-  const refs = {
-    edit: useRef<HTMLDivElement>(null),
-    copy: useRef<HTMLDivElement>(null),
-    delete: useRef<HTMLDivElement>(null),
-    settings: useRef<HTMLDivElement>(null),
-  };
-  const [show, setShow] = useState({ edit: false, copy: false, delete: false, settings: false });
-
-  return (
-    <Container header={<Header variant="h2">Icon-Only Actions</Header>}>
-      <ScreenshotArea>
-        <SpaceBetween direction="horizontal" size="xs">
-          {[
-            { key: 'edit', icon: 'edit', label: 'Edit item' },
-            { key: 'copy', icon: 'copy', label: 'Copy to clipboard' },
-            { key: 'delete', icon: 'remove', label: 'Delete item' },
-            { key: 'settings', icon: 'settings', label: 'Open settings' },
-          ].map(({ key, icon, label }) => (
-            <div
-              key={key}
-              ref={refs[key as keyof typeof refs]}
-              onMouseEnter={() => setShow({ ...show, [key]: true })}
-              onMouseLeave={() => setShow({ ...show, [key]: false })}
-              style={{ display: 'inline-block' }}
-            >
-              <Button
-                variant="icon"
-                iconName={icon as any}
-                nativeButtonAttributes={{
-                  onFocus: () => setShow({ ...show, [key]: true }),
-                  onBlur: () => setShow({ ...show, [key]: false }),
-                }}
-              />
-              {show[key as keyof typeof show] && (
-                <Tooltip
-                  content={label}
-                  getTrack={() => refs[key as keyof typeof refs].current}
-                  position="top"
-                  onEscape={() => setShow({ ...show, [key]: false })}
-                  trackKey={key}
-                />
-              )}
-            </div>
-          ))}
-        </SpaceBetween>
-      </ScreenshotArea>
-    </Container>
-  );
-}
-
 function FileInputItemExample() {
   return (
     <Container header={<Header variant="h2">ButtonGroup - FileInputItem (Internal Tooltips)</Header>}>

src/button-group/icon-button-item.tsx

@@ -8,6 +8,7 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { ButtonProps } from '../button/interfaces.js';
 import { InternalButton } from '../button/internal.js';
 import { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';
+import InternalLiveRegion from '../live-region/internal.js';
 import Tooltip from '../tooltip/internal.js';
 import { ButtonGroupProps, InternalIconButton } from './interfaces.js';
 
@@ -64,7 +65,10 @@ const IconButtonItem = forwardRef(
             className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
             getTrack={() => containerRef.current}
             trackKey={item.id}
-            content={canShowFeedback && item.popoverFeedback ? item.popoverFeedback : item.text}
+            content={
+              (showFeedback && <InternalLiveRegion tagName="span">{item.popoverFeedback}</InternalLiveRegion>) ||
+              item.text
+            }
             onEscape={onTooltipDismiss}
           />
         )}