chore: Add proper textual name, role and state to breadcrumb last item

src/breadcrumb-group/__integ__/breadcrumb-group.test.ts

@@ -163,29 +163,29 @@
         await page.keys('Tab');
         await page.keys('Tab');
         await page.keys('Tab');
         await expect(page.getActiveElementId()).resolves.toBe('focus-target-short-text');
       },
       { width: 1200, height: 800 }
     )
   );
 
-  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)()
   );
 });

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();

src/breadcrumb-group/item/item.tsx

@@ -18,12 +18,14 @@ interface BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> {
   isLast: boolean;
   anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;
   children: React.ReactNode;
+  itemAttributes: React.HTMLAttributes<HTMLElement>;
 }
 
 const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
   item,
   isLast,
   anchorAttributes,
+  itemAttributes,
   children,
 }: BreadcrumbItemWithPopoverProps<T>) => {
   const [showPopover, setShowPopover] = useState(false);
@@ -54,7 +56,7 @@ const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
         }}
         onMouseLeave={() => setShowPopover(false)}
         anchorAttributes={anchorAttributes}
-        {...(isLast ? { tabIndex: 0 } : {})}
+        {...itemAttributes}
       >
         {children}
       </Item>
@@ -68,16 +70,17 @@ type ItemProps = React.HTMLAttributes<HTMLElement> & {
   isLast: boolean;
 };
 const Item = React.forwardRef<HTMLElement, ItemProps>(
-  ({ anchorAttributes, children, isLast, ...itemAttributes }, ref) =>
-    isLast ? (
+  ({ anchorAttributes, children, isLast, ...itemAttributes }, ref) => {
+    return isLast ? (
       <span ref={ref} className={styles.anchor} {...itemAttributes}>
         {children}
       </span>
     ) : (
       <a ref={ref as React.Ref<HTMLAnchorElement>} className={styles.anchor} {...itemAttributes} {...anchorAttributes}>
         {children}
       </a>
-    )
+    );
+  }
 );
 
 export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
@@ -101,11 +104,21 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
   const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {
     href: item.href || '#',
     onClick: isLast ? preventDefault : onClickHandler,
+    tabIndex: 0,
   };
+
+  const itemAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {};
   if (isGhost) {
     anchorAttributes.tabIndex = -1;
   }
 
+  if (isLast && !isGhost) {
+    itemAttributes['aria-current'] = 'page';
+    itemAttributes['aria-disabled'] = true;
+    itemAttributes.tabIndex = 0;
+    itemAttributes.role = 'link';
+  }
+
   const breadcrumbItem = (
     <FunnelBreadcrumbItem
       className={styles.text}
@@ -119,11 +132,16 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
   return (
     <div className={clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last)}>
       {isTruncated && !isGhost ? (
-        <BreadcrumbItemWithPopover item={item} isLast={isLast} anchorAttributes={anchorAttributes}>
+        <BreadcrumbItemWithPopover
+          item={item}
+          isLast={isLast}
+          anchorAttributes={anchorAttributes}
+          itemAttributes={itemAttributes}
+        >
           {breadcrumbItem}
         </BreadcrumbItemWithPopover>
       ) : (
-        <Item isLast={isLast} anchorAttributes={anchorAttributes}>
+        <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>
           {breadcrumbItem}
         </Item>
       )}