chore: Add aria-expanded to Hotspot trigger buttons (#3321)

Co-authored-by: Johannes Weber <[email protected]>
Co-authored-by: Avinash Dwarapu <[email protected]>

Author: 3 people

pages/onboarding/i18n.ts

@@ -29,10 +29,7 @@ export const tutorialPanelStrings: TutorialPanelProps.I18nStrings = {
 export const annotationContextStrings: AnnotationContextProps.I18nStrings = {
   stepCounterText: (stepIndex, totalStepCount) => `Step ${stepIndex + 1}/${totalStepCount}`,
   taskTitle: (taskIndex, taskTitle) => `Task ${taskIndex + 1}: ${taskTitle}`,
-  labelHotspot: (openState, stepIndex, totalStepCount) =>
-    openState
-      ? `close annotation for step ${stepIndex + 1}/${totalStepCount}`
-      : `open annotation for step ${stepIndex + 1}/${totalStepCount}`,
+  labelHotspot: (openState, stepIndex, totalStepCount) => `Annotation for step ${stepIndex + 1}/${totalStepCount}`,
   nextButtonText: 'Next',
   previousButtonText: 'Previous',
   finishButtonText: 'Finish',

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -380,8 +380,15 @@ in the \`detail\` property of the \`onStartTutorial\` event.",
       "type": "AnnotationContextProps.Tutorial | null",
     },
     {
-      "description": "An object containing all the necessary localized strings required by
-the component.",
+      "description": "An object containing all the necessary localized strings required by the component. The object should contain:
+* \`finishButtonText\` - Specifies the text that's displayed in the finish button.
+* \`labelDismissAnnotation\` - Specifies the aria-label for the dismiss button.
+* \`labelHotspot\` - Specifies the aria-label for the hotspot button. The \`openState\` argument is deprecated, it's handled by the hotspot button aria-expanded attribute.
+* \`nextButtonText\` - Specifies the text that's displayed in the next button.
+* \`previousButtonText\` - Specifies the text that's displayed in the previous button.
+* \`stepCounterText\` - Specifies the step counter text that's displayed in the annotation popover.
+* \`taskTitle\` - Specifies the title text that's displayed in the annotation popover.
+",
       "inlineType": {
         "name": "AnnotationContextProps.I18nStrings",
         "properties": [

src/annotation-context/__tests__/annotation-context.test.tsx

@@ -244,6 +244,22 @@ test('trigger should have aria-label with steps information', () => {
   expect(hotspot.findTrigger().getElement().getAttribute('aria-label')).toBe('CLOSE_HOTSPOT_TEST_FOR_STEP_1_OF_2_TEST');
 });
 
+test('trigger should have aria-expanded depending on open state', () => {
+  const { wrapper } = renderAnnotationContext(
+    <>
+      <Hotspot hotspotId="first-hotspot" data-testid="first-hotspot" />
+      <Hotspot hotspotId="second-hotspot" data-testid="second-hotspot" />
+    </>
+  );
+
+  // First hotspot is open by default.
+  const hotspot = wrapper.findHotspot('[data-testid="first-hotspot"]')!;
+  expect(hotspot.findTrigger().getElement().getAttribute('aria-expanded')).toBe('true');
+  // Switching to the second hotspot which closes the first one.
+  hotspot.findTrigger().click();
+  expect(hotspot.findTrigger().getElement().getAttribute('aria-expanded')).toBe('false');
+});
+
 test('annotation should have be labeled by header and step counter', () => {
   const { wrapper } = renderAnnotationContext(
     <>

src/annotation-context/annotation/annotation-trigger.tsx

@@ -34,6 +34,7 @@ export default React.forwardRef<HTMLButtonElement, AnnotationTriggerProps>(funct
       ref={ref}
       className={styles.hotspot}
       aria-haspopup="dialog"
+      aria-expanded={open}
       aria-label={i18nStrings.labelHotspot(open, taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}
       onClick={onClick}
     >

src/annotation-context/interfaces.ts

@@ -46,8 +46,15 @@ export interface AnnotationContextProps {
   children: React.ReactNode;
 
   /**
-   * An object containing all the necessary localized strings required by
-   * the component.
+   * An object containing all the necessary localized strings required by the component. The object should contain:
+   *
+   * * `finishButtonText` - Specifies the text that's displayed in the finish button.
+   * * `labelDismissAnnotation` - Specifies the aria-label for the dismiss button.
+   * * `labelHotspot` - Specifies the aria-label for the hotspot button. The `openState` argument is deprecated, it's handled by the hotspot button aria-expanded attribute.
+   * * `nextButtonText` - Specifies the text that's displayed in the next button.
+   * * `previousButtonText` - Specifies the text that's displayed in the previous button.
+   * * `stepCounterText` - Specifies the step counter text that's displayed in the annotation popover.
+   * * `taskTitle` - Specifies the title text that's displayed in the annotation popover.
    */
   i18nStrings: AnnotationContextProps.I18nStrings;
 }