fix: Annotation focus on the start of the popover on clicking next (#533

)
cloudscape-design · Dec 1, 2022 · ee62932 · ee62932
1 parent fcd5ae7
commit ee62932
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/src/annotation-context/__tests__/annotation-context.test.tsx b/src/annotation-context/__tests__/annotation-context.test.tsx
@@ -242,3 +242,21 @@ test('trigger should have aria-label with steps information', () => {
   hotspot.findTrigger().click();
   expect(hotspot.findTrigger().getElement().getAttribute('aria-label')).toBe('CLOSE_HOTSPOT_TEST_FOR_STEP_1_OF_2_TEST');
 });
+
+test('annotation should have be labeled by header and step counter', () => {
+  const { wrapper } = renderAnnotationContext(
+    <>
+      <Hotspot hotspotId="first-hotspot" />
+      <Hotspot hotspotId="second-hotspot" />
+      <Hotspot hotspotId="third-hotspot" />
+    </>
+  );
+
+  const annotation = wrapper.findAnnotation()!;
+  const labelIds = annotation.getElement().getAttribute('aria-labelledby');
+  const label = labelIds!
+    .split(' ')
+    .map(label => annotation.find(`#${label}`)!.getElement().textContent)
+    .join(' ');
+  expect(label).toBe('TASK_1_FIRST_TASK_TEST STEP_1_OF_1_TEST');
+});
diff --git a/src/annotation-context/annotation/annotation-popover.tsx b/src/annotation-context/annotation/annotation-popover.tsx
@@ -13,6 +13,8 @@ import { AnnotationContextProps } from '../interfaces';
 import InternalAlert from '../../alert/internal';
 import { InternalPosition } from '../../popover/interfaces';
 import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
+import { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';
+import { joinStrings } from '../../internal/utils/strings/join-strings.js';
 
 export interface AnnotationPopoverProps {
   title: string;
@@ -81,6 +83,9 @@ export function AnnotationPopover({
     scrollElementIntoView(trackRef.current ?? undefined);
   }, [trackRef]);
 
+  const popoverHeaderId = useUniqueId('poppver-header-');
+  const stepCounterId = useUniqueId('step-counter-');
+
   return (
     <PopoverContainer
       size="medium"
@@ -96,14 +101,23 @@ export function AnnotationPopover({
         dismissButton={true}
         dismissAriaLabel={i18nStrings.labelDismissAnnotation}
         header={
-          <InternalBox color="text-body-secondary" fontSize="body-s" margin={{ top: 'xxxs' }} className={styles.header}>
+          <InternalBox
+            id={popoverHeaderId}
+            color="text-body-secondary"
+            fontSize="body-s"
+            margin={{ top: 'xxxs' }}
+            className={styles.header}
+          >
             {title}
           </InternalBox>
         }
         onDismiss={onDismiss}
         className={styles.annotation}
         variant="annotation"
         overflowVisible="content"
+        // create new dialog to have the native dialog behavior of the screen readers
+        key={taskLocalStepIndex}
+        ariaLabelledby={joinStrings(popoverHeaderId, stepCounterId)}
       >
         <InternalSpaceBetween size="s">
           <div className={styles.description}>
@@ -117,7 +131,12 @@ export function AnnotationPopover({
 
             <div className={styles.actionBar}>
               <div className={styles.stepCounter}>
-                <InternalBox className={styles['step-counter-content']} color="text-body-secondary" fontSize="body-s">
+                <InternalBox
+                  id={stepCounterId}
+                  className={styles['step-counter-content']}
+                  color="text-body-secondary"
+                  fontSize="body-s"
+                >
                   {i18nStrings.stepCounterText(taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}
                 </InternalBox>
               </div>

diff --git a/src/popover/body.tsx b/src/popover/body.tsx
@@ -22,6 +22,7 @@ export interface PopoverBodyProps {
   overflowVisible?: 'content' | 'both';
 
   className?: string;
+  ariaLabelledby?: string;
 }
 
 export default function PopoverBody({
@@ -33,6 +34,7 @@ export default function PopoverBody({
   variant,
   overflowVisible,
   className,
+  ariaLabelledby,
 }: PopoverBodyProps) {
   const labelledById = useUniqueId('awsui-popover-');
   const dismissButtonFocused = useRef(false);
@@ -79,7 +81,7 @@ export default function PopoverBody({
       role={header ? 'dialog' : undefined}
       onKeyDown={onKeyDown}
       aria-modal={showDismissButton && variant !== 'annotation' ? true : undefined}
-      aria-labelledby={header ? labelledById : undefined}
+      aria-labelledby={ariaLabelledby ?? (header ? labelledById : undefined)}
     >
       <FocusLock disabled={variant === 'annotation' || !showDismissButton} autoFocus={false}>
         {header && (