chore: Add proper textual name, role and state to breadcrumb last item (#3258)

Author: taheramr

Diff for: src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts

@@ -68,13 +68,15 @@ describe('refresh-toolbar', () => {
           await expect(page.isExisting(tooltipSelector)).resolves.toBe(false);
           // Focus split panel trigger
           await page.click(wrapper.findToolbar().toSelector());
-          await page.keys(['Tab', 'Tab']);
+          await page.keys(['Tab', 'Tab', 'Tab']);
           await assertSplitPanelTriggerFocusedWithTooltip(page);
           // Focus breadcrumbs
           await page.keys(['Shift', 'Tab']);
+          await page.keys(['Shift', 'Tab']);
           await expect(page.isExisting(tooltipSelector)).resolves.toBe(false);
           // Navigate back to split panel trigger
-          await page.keys(['Tab']);
+          await page.keys(['Tab', 'Tab']);
+
           await assertSplitPanelTriggerFocusedWithTooltip(page);
           // Open the split panel
           await page.keys('Enter');
@@ -88,7 +90,7 @@ describe('refresh-toolbar', () => {
           await expect(page.isExisting(tooltipSelector)).resolves.toBe(false);
           // Focus split panel trigger
           await page.click(wrapper.findToolbar().toSelector());
-          await page.keys(['Tab', 'Tab']);
+          await page.keys(['Tab', 'Tab', 'Tab']);
           await assertSplitPanelTriggerFocusedWithTooltip(page);
           await page.keys('Escape');
           await expect(page.isExisting(tooltipSelector)).resolves.toBe(false);

Diff for: src/breadcrumb-group/__integ__/breadcrumb-group.test.ts

@@ -163,16 +163,17 @@ describe('BreadcrumbGroup', () => {
         await page.keys('Tab');
         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 => {
+  test.each([[{ width: 770, height: 800 }], [{ width: 1100, height: 800 }]])(
+    'Last item should be focusable %s',
+    viewportSize =>
+      setupTest(async page => {
         await page.click('#focus-target-long-text');
         await page.keys('Tab');
         await page.keys('Tab');
@@ -182,10 +183,9 @@ describe('BreadcrumbGroup', () => {
         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 }
-    )
+      }, viewportSize)()
   );
 });

Diff for: src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx

@@ -112,10 +112,11 @@ describe('BreadcrumbGroup Item', () => {
       lastLink = links[links.length - 1];
     });
 
-    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', 'page');
+      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', () => {

Diff for: 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>
       )}