fix(breadcrumb): separator is not announced by narrators (#25796)

core/src/components/breadcrumb/breadcrumb.tsx

@@ -222,7 +222,12 @@ export class Breadcrumb implements ComponentInterface {
           </button>
         )}
         {showSeparator && (
-          <span class="breadcrumb-separator" part="separator">
+          /**
+           * Separators should not be announced by narrators.
+           * We add aria-hidden on the span so that this applies
+           * to any custom separators too.
+           */
+          <span class="breadcrumb-separator" part="separator" aria-hidden="true">
             <slot name="separator">
               {mode === 'ios' ? (
                 <ion-icon icon={chevronForwardOutline} lazy={false} flip-rtl></ion-icon>

core/src/components/breadcrumbs/test/breadcrumbs.spec.ts

@@ -34,3 +34,20 @@ it('should correctly provide the collapsed breadcrumbs in the event payload', as
   expect(collapsedBreadcrumbs[1]).toBe(breadcrumb[2]);
   expect(collapsedBreadcrumbs[2]).toBe(breadcrumb[3]);
 });
+
+it('should exclude the separator from narrators', async () => {
+  const page = await newSpecPage({
+    components: [Breadcrumbs, Breadcrumb],
+    html: `
+      <ion-breadcrumbs>
+        <ion-breadcrumb>First</ion-breadcrumb>
+        <ion-breadcrumb>Second</ion-breadcrumb>
+      </ion-breadcrumbs>
+    `,
+  });
+
+  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type');
+  const separator = firstBreadcrumb.shadowRoot.querySelector('[part="separator"]');
+
+  expect(separator.getAttribute('aria-hidden')).toBe('true');
+});