chore: Adjust logic for last item and add tests

cloudscape-design · Feb 10, 2025 · 9342646 · 9342646
1 parent dfdedd5
commit 9342646
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 30 deletions.
diff --git a/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts b/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts
@@ -169,23 +169,23 @@ describe('BreadcrumbGroup', () => {
     )
   );
 
-  test(
-    'Last item is focusable when truncated',
-    setupTest(
-      async page => {
-        await page.click('#focus-target-long-text');
-        await page.keys('Tab');
-        await page.keys('Tab');
-        await page.keys('Tab');
-        await page.keys('Tab');
-        await page.keys('Tab');
-        await page.keys('Tab');
-        await expect(page.isTooltipDisplayed()).resolves.toBe(true);
-        await page.keys('Tab');
-        await expect(page.isTooltipDisplayed()).resolves.toBe(false);
-        await expect(page.getActiveElementId()).resolves.toBe('focus-target-short-text');
-      },
-      { width: 950, height: 800 }
-    )
+  test.each([
+    [{ width: 770, height: 800 }, 'when truncated'],
+    [{ width: 1200, height: 800 }, 'default state'],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ])('Last item should be focusable %s', (viewportSize, scenario) =>
+    setupTest(async page => {
+      await page.click('#focus-target-long-text');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await page.keys('Tab');
+      await expect(page.isTooltipDisplayed()).resolves.toBe(true);
+      await page.keys('Tab');
+      await expect(page.isTooltipDisplayed()).resolves.toBe(false);
+      await expect(page.getActiveElementId()).resolves.toBe('focus-target-short-text');
+    }, viewportSize)()
   );
 });
diff --git a/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx b/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx
@@ -114,10 +114,16 @@ describe('BreadcrumbGroup Item', () => {
 
     test('should not be a link', () => {
       expect(lastLink.getElement()).not.toHaveAttribute('href');
-      expect(lastLink.getElement()).not.toHaveAttribute('aria-current');
       expect(lastLink.getElement().tagName).toEqual('SPAN');
     });
 
+    test('should have proper aria-labels and focusable', () => {
+      expect(lastLink.getElement()).toHaveAttribute('aria-current');
+      expect(lastLink.getElement()).toHaveAttribute('aria-disabled');
+      expect(lastLink.getElement().getAttribute('role')).toBe('link');
+      expect(lastLink.getElement().getAttribute('tabindex')).toBe('0');
+    });
+
     test('should not trigger click event', () => {
       lastLink.click();
       expect(onClickSpy).not.toHaveBeenCalled();

diff --git a/src/breadcrumb-group/item/item.tsx b/src/breadcrumb-group/item/item.tsx
@@ -54,7 +54,6 @@ const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
         }}
         onMouseLeave={() => setShowPopover(false)}
         anchorAttributes={anchorAttributes}
-        {...(isLast ? { tabIndex: 0 } : {})}
       >
         {children}
       </Item>
@@ -68,16 +67,25 @@ type ItemProps = React.HTMLAttributes<HTMLElement> & {
   isLast: boolean;
 };
 const Item = React.forwardRef<HTMLElement, ItemProps>(
-  ({ anchorAttributes, children, isLast, ...itemAttributes }, ref) =>
-    isLast ? (
-      <span ref={ref} className={styles.anchor} {...itemAttributes}>
+  ({ anchorAttributes, children, isLast, ...itemAttributes }, ref) => {
+    return isLast ? (
+      <span
+        ref={ref}
+        className={styles.anchor}
+        role="link"
+        aria-disabled={true}
+        aria-current="page"
+        tabIndex={0}
+        {...itemAttributes}
+      >
         {children}
       </span>
     ) : (
       <a ref={ref as React.Ref<HTMLAnchorElement>} className={styles.anchor} {...itemAttributes} {...anchorAttributes}>
         {children}
       </a>
-    )
+    );
+  }
 );
 
 export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
@@ -103,16 +111,11 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
     onClick: isLast ? preventDefault : onClickHandler,
     tabIndex: 0,
   };
+
   if (isGhost) {
     anchorAttributes.tabIndex = -1;
   }
 
-  if (isLast) {
-    anchorAttributes.role = 'link';
-    anchorAttributes['aria-disabled'] = true;
-    anchorAttributes['aria-current'] = 'page';
-  }
-
   const breadcrumbItem = (
     <FunnelBreadcrumbItem
       className={styles.text}